Pie

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

Unsupported Web Browser

To explore the capabilities of the DevExpress product line, please reload this webpage with a different web browser.

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

Unsupported Web Browser

To explore the capabilities of the DevExpress product line, please reload this webpage with a different web browser.

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

Unsupported Web Browser

To explore the capabilities of the DevExpress product line, please reload this webpage with a different web browser.

<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