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)
<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
<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
<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>