Pie

This example demonstrates the Pie Chart control, which is used to compare percentage values of different point arguments in the same series.

Countries in the world by population (2017)
Countries in the world by population (2017)Countries in the world by population (2017)1,383M1,314M325M264M207M197M192M3,616MChinaIndiaUSAIndonesiaBrazilPakistanNigeriaOthers
<dx:BootstrapPieChart ID="PieChartSeries" runat="server" DataSourceUrl="~/jsondata/ChartTypes/pie.json" TitleSettings-Text="Countries in the world by population (2017)">
    <SeriesCollection>
        <dx:BootstrapPieChartSeries ArgumentField="country" ValueField="population">
            <Label Visible="true">
                <Format Type="Millions" />
            </Label>
        </dx:BootstrapPieChartSeries>
    </SeriesCollection>
    <SettingsLegend Position="Outside" VerticalAlignment="Top" HorizontalAlignment="Right" />
    <CssClasses Control="demo-chart" />
</dx:BootstrapPieChart>

Pie with Multiple Series

This example illustrates the ability of a Pie Chart to display multiple series as nested rings.

Imports/Exports of Goods and Services
Imports/Exports of Goods and Services (billion US$, 2012)Imports/Exports of Goods and Services(billion US$, 2012)BrazilRussiaIndiaChinaJapanUSACanadaFranceEnglandGermany
<dx:BootstrapPieChart runat="server" DataSourceUrl="~/jsondata/ChartTypes/multiplepie.json" TitleSettings-Text="Imports/Exports of Goods and Services" TitleSettings-SubtitleSettings-Text="(billion US$, 2012)">
    <SeriesCollection>
        <dx:BootstrapPieChartSeries ArgumentField="Country" ValueField="Export" Name="Export" />
        <dx:BootstrapPieChartSeries ArgumentField="Country" ValueField="Import" Name="Import" />
    </SeriesCollection>
    <CssClasses Control="demo-chart" />
</dx:BootstrapPieChart>

Doughnut

This example shows the Pie Chart in the Doughnut mode, which is similar to the default mode, but the chart displays a pie with a non-zero radius hole.

The Population of Continents and Regions
The Population of Continents and RegionsThe Population of Continents and Regions4,120M1,013M344M591M727M35MAsiaAfricaNorthern AmericaLatin America and the CaribbeanEuropeOceania
<dx:BootstrapPieChart runat="server" DataSourceUrl="~/jsondata/ChartTypes/doughnut.json" Type="Doughnut" TitleSettings-Text="The Population of Continents and Regions">
    <SeriesCollection>
        <dx:BootstrapPieChartSeries ArgumentField="region">
            <Label Visible="true">
                <Format Type="Millions"/>
            </Label>
        </dx:BootstrapPieChartSeries>
    </SeriesCollection>
    <CssClasses Control="demo-chart" />
</dx:BootstrapPieChart>
Screen Size
Color Themes
Demo QR Code
Client-Side API