Pie

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

<dx:BootstrapPieChart runat="server" DataSourceUrl="~/jsondata/ChartTypes/pie.json" TitleText="Countries in the world by population (2017)">
    <SeriesCollection>
        <dx:BootstrapPieChartSeries ArgumentField="country" ValueField="population">
            <Label Visible="true">
                <Format Type="Millions" />
            </Label>
        </dx:BootstrapPieChartSeries>
    </SeriesCollection>
    ...
</dx:BootstrapPieChart>

Pie with Multiple Series

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

<dx:BootstrapPieChart runat="server" DataSourceUrl="~/jsondata/ChartTypes/multiplepie.json" TitleText="Imports/Exports of Goods and Services" SubtitleText="(billion US$, 2012)">
    <SeriesCollection>
        <dx:BootstrapPieChartSeries ArgumentField="Country" ValueField="Export" Name="Export" />
        <dx:BootstrapPieChartSeries ArgumentField="Country" ValueField="Import" Name="Import" />
    </SeriesCollection>
    ...
</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.

<dx:BootstrapPieChart runat="server" DataSourceUrl="~/jsondata/ChartTypes/doughnut.json" Type="Doughnut" TitleText="The Population of Continents and Regions">
    <SeriesCollection>
        <dx:BootstrapPieChartSeries ArgumentField="region">
            <Label Visible="true">
                <Format Type="Millions"/>
            </Label>
        </dx:BootstrapPieChartSeries>
    </SeriesCollection>
    ...
</dx:BootstrapPieChart>
Screen Size
Color Themes
Demo QR Code