Pie

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

@(Html.DevExpress()
    .BootstrapPieChart("pieChartSeries")
    .TitleText("Countries in the world by population (2017)")
    .SeriesCollection(series => series
        .Add()
        .ArgumentField("country")
        .ValueField("population")
        .Label(label => label
            .Visible(true)
            .Format(format => format
                .Type(DevExpress.AspNetCore.Bootstrap.FormatType.Millions))))
    ...
    .Bind("jsondata/ChartTypes/pie.json"))

Pie with Multiple Series

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

@(Html.DevExpress()
    .BootstrapPieChart("pieChartMultipleSeries")
    .TitleText("Imports/Exports of Goods and Services")
    .SubtitleText("(billion US$, 2012)")
    .SeriesCollection(series => {
        series.Add()
            .ArgumentField("Country")
            .ValueField("Export")
            .Name("Export");
        series.Add()
            .ArgumentField("Country")
            .ValueField("Import")
            .Name("Import");
    })
    ...
    .Bind("jsondata/ChartTypes/multiplepie.json"))

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.

@(Html.DevExpress()
    .BootstrapPieChart("pieChartDoughnut")
    .TitleText("The Population of Continents and Regions")
    .Type(PieChartType.Doughnut)
    .SeriesCollection(series =>series
        .Add()
        .ArgumentField("region")
        .Label(label => label
            .Visible(true)
            .Format(format => format
                .Type(DevExpress.AspNetCore.Bootstrap.FormatType.Millions))))
    ...
    .Bind("jsondata/ChartTypes/doughnut.json"))
Screen Size
Color Themes
Demo QR Code