Visualize categories as parts of the whole with Pie and Donut Charts

A pie chart is a circular graph that shows individual categories as slices – or percentages – of the whole. The donut chart is a variant of the pie chart, with a hole in its center, and it displays categories as arcs rather than slices. Both make part-to-whole relationships easy to grasp at a glance.

They differ from line charts, area charts, column charts, and bar graphs in that they can’t show changes over time.

The pie graph gives a strong and immediate sense of overall proportions, whereas the donut graph leads the reader’s eye around the arcs of the circle – and tend to creates more of a narrative. One advantage of the donut graph is that additional information can be displayed at the graph’s center.

Pie charts and donut charts are commonly used to visualize election and census results, revenue by product or division, recycling data, survey responses, budget breakdowns, educational statistics, spending plans, or population segmentation.

Select from our pie chart and donut chart templates. Then, add your own data and customize their look to fit your team’s requirements:

        <li class="uk-width-small-1-1 uk-width-medium-1-3 mq-list__item">
            <a title="Simple Pie Chart" href="/templates/charts-graphs/pie-donut-chart/simple-pie-chart/">
                <div class="mq-list__item__title">Simple Pie Chart</div>
                <div class="arrow-overlay">
                    <img  
data-src="https://landing.moqups.com/img/content/charts-graphs/pie-donut-charts/simple-pie-chart/simple-pie-chart-800.png"class="lazyload "
    data-src="https://landing.moqups.com/img/content/charts-graphs/pie-donut-charts/simple-pie-chart/simple-pie-chart-800.png"alt="Simple Pie Chart" title="Simple Pie Chart"
data-rendered=false
onload="loaded(this)"

/>

        <li class="uk-width-small-1-1 uk-width-medium-1-3 mq-list__item">
            <a title="Pie Chart for Web Traffic" href="/templates/charts-graphs/pie-donut-chart/pie-chart-web-traffic/">
                <div class="mq-list__item__title">Pie Chart for Web Traffic</div>
                <div class="arrow-overlay">
                    <img  
data-src="https://landing.moqups.com/img/content/charts-graphs/pie-donut-charts/pie-chart-for-web-traffic/pie-chart-for-web-traffic-800.png"class="lazyload "
    data-src="https://landing.moqups.com/img/content/charts-graphs/pie-donut-charts/pie-chart-for-web-traffic/pie-chart-for-web-traffic-800.png"alt="Pie Chart for Web Traffic" title="Pie Chart for Web Traffic"
data-rendered=false
onload="loaded(this)"

/>

        <li class="uk-width-small-1-1 uk-width-medium-1-3 mq-list__item">
            <a title="Pie Chart for Product Sales" href="/templates/charts-graphs/pie-donut-chart/pie-chart-product-sales/">
                <div class="mq-list__item__title">Pie Chart for Product Sales</div>
                <div class="arrow-overlay">
                    <img  
data-src="https://landing.moqups.com/img/content/charts-graphs/pie-donut-charts/pie-chart-for-product-sales/pie-chart-for-product-sales-800.png"class="lazyload "
    data-src="https://landing.moqups.com/img/content/charts-graphs/pie-donut-charts/pie-chart-for-product-sales/pie-chart-for-product-sales-800.png"alt="Pie Chart for Product Sales" title="Pie Chart for Product Sales"
data-rendered=false
onload="loaded(this)"

/>

        <li class="uk-width-small-1-1 uk-width-medium-1-3 mq-list__item">
            <a title="Pie Chart for Marketing Budget" href="/templates/charts-graphs/pie-donut-chart/pie-chart-marketing-budget/">
                <div class="mq-list__item__title">Pie Chart for Marketing Budget</div>
                <div class="arrow-overlay">
                    <img  
data-src="https://landing.moqups.com/img/content/charts-graphs/pie-donut-charts/pie-chart-for-marketing-budget/pie-chart-for-marketing-budget-800.png"class="lazyload "
    data-src="https://landing.moqups.com/img/content/charts-graphs/pie-donut-charts/pie-chart-for-marketing-budget/pie-chart-for-marketing-budget-800.png"alt="Pie Chart for Marketing Budget" title="Pie Chart for Marketing Budget"
data-rendered=false
onload="loaded(this)"

/>

        <li class="uk-width-small-1-1 uk-width-medium-1-3 mq-list__item">
            <a title="Spending Plan Pie Chart" href="/templates/charts-graphs/pie-donut-chart/pie-chart-spending-plan/">
                <div class="mq-list__item__title">Spending Plan Pie Chart</div>
                <div class="arrow-overlay">
                    <img  
data-src="https://landing.moqups.com/img/content/charts-graphs/pie-donut-charts/spending-plan-pie-chart/spending-plan-pie-chart-800.png"class="lazyload "
    data-src="https://landing.moqups.com/img/content/charts-graphs/pie-donut-charts/spending-plan-pie-chart/spending-plan-pie-chart-800.png"alt="Spending Plan Pie Chart" title="Spending Plan Pie Chart"
data-rendered=false
onload="loaded(this)"

/>

        <li class="uk-width-small-1-1 uk-width-medium-1-3 mq-list__item">
            <a title="Simple Donut Chart" href="/templates/charts-graphs/pie-donut-chart/simple-donut-chart/">
                <div class="mq-list__item__title">Simple Donut Chart</div>
                <div class="arrow-overlay">
                    <img  
data-src="https://landing.moqups.com/img/content/charts-graphs/pie-donut-charts/simple-donut-chart/simple-donut-chart-800.png"class="lazyload "
    data-src="https://landing.moqups.com/img/content/charts-graphs/pie-donut-charts/simple-donut-chart/simple-donut-chart-800.png"alt="Simple Donut Chart" title="Simple Donut Chart"
data-rendered=false
onload="loaded(this)"

/>

        <li class="uk-width-small-1-1 uk-width-medium-1-3 mq-list__item">
            <a title="User Acquisition Donut Chart" href="/templates/charts-graphs/pie-donut-chart/donut-chart-user-acquisition/">
                <div class="mq-list__item__title">User Acquisition Donut Chart</div>
                <div class="arrow-overlay">
                    <img  
data-src="https://landing.moqups.com/img/content/charts-graphs/pie-donut-charts/user-acquisition-donut-chart/user-acquisition-donut-chart-800.png"class="lazyload "
    data-src="https://landing.moqups.com/img/content/charts-graphs/pie-donut-charts/user-acquisition-donut-chart/user-acquisition-donut-chart-800.png"alt="User Acquisition Donut Chart" title="User Acquisition Donut Chart"
data-rendered=false
onload="loaded(this)"

/>

        <li class="uk-width-small-1-1 uk-width-medium-1-3 mq-list__item">
            <a title="Delivery Report Donut Chart" href="/templates/charts-graphs/pie-donut-chart/donut-chart-delivery-report/">
                <div class="mq-list__item__title">Delivery Report Donut Chart</div>
                <div class="arrow-overlay">
                    <img  
data-src="https://landing.moqups.com/img/content/charts-graphs/pie-donut-charts/delivery-report-donut-chart/delivery-report-donut-chart-800.png"class="lazyload "
    data-src="https://landing.moqups.com/img/content/charts-graphs/pie-donut-charts/delivery-report-donut-chart/delivery-report-donut-chart-800.png"alt="Delivery Report Donut Chart" title="Delivery Report Donut Chart"
data-rendered=false
onload="loaded(this)"

/>

        <li class="uk-width-small-1-1 uk-width-medium-1-3 mq-list__item">
            <a title="Customer Satisfaction Donut Chart" href="/templates/charts-graphs/pie-donut-chart/donut-chart-customer-satisfaction/">
                <div class="mq-list__item__title">Customer Satisfaction Donut Chart</div>
                <div class="arrow-overlay">
                    <img  
data-src="https://landing.moqups.com/img/content/charts-graphs/pie-donut-charts/customer-satisfaction-donut-chart/customer-satisfaction-donut-chart-800.png"class="lazyload "
    data-src="https://landing.moqups.com/img/content/charts-graphs/pie-donut-charts/customer-satisfaction-donut-chart/customer-satisfaction-donut-chart-800.png"alt="Customer Satisfaction Donut Chart" title="Customer Satisfaction Donut Chart"
data-rendered=false
onload="loaded(this)"

/>

Begin anywhere with Moqups

Your diagrams and flowcharts don’t have to remain in a silo. You can quickly link them to other visual assets like wireframes, mockups, charts, and graphs – all within the same Moqups project!

Moqups lets your team create their own workflow – and go where the project takes them – by removing the blocks, barriers, and obstacles of single-purpose apps.