Data Visualization ▸ Doughnut with Multiple Series

@(Html.DevExtreme().PieChart()
    .ID("pie")
    .Palette(VizPalette.Ocean)
    .Title(t => t
        .Text("Imports/Exports of Goods and Services")
        .Subtitle(s => s.Text("(billion US$, 2024)"))
    )
    .Legend(l => l.Visible(true))
    .Type(PieChartType.Doughnut)
    .InnerRadius(0.2)
    .CommonSeriesSettings(s => s.Label(l => l.Visible(false)))
    .Tooltip(t => t
        .Enabled(true)
        .Format(Format.Currency)
        .CustomizeTooltip(@<text>
            function() {
                return { text: this.argumentText + "<br>" + this.seriesName + ": " + this.valueText + "B" };
            }
        </text>)
    )
    .Export(e => e.Enabled(true))
    .Series(s => {
        s.Add().Name("Export").ArgumentField("Country").ValueField("Export");
        s.Add().Name("Import").ArgumentField("Country").ValueField("Import");
    })
    .DataSource(new[] {
        new { Country = "United States", Export = 2065, Import = 3359 },
        new { Country = "Germany", Export = 1683, Import = 1425 },
        new { Country = "Japan", Export = 707, Import = 743 },
        new { Country = "United Kingdom", Export = 513, Import = 816 },
        new { Country = "France", Export = 640, Import = 750 },
        new { Country = "Italy", Export = 674, Import = 615 },
        new { Country = "Canada", Export = 568, Import = 573 },
        new { Country = "India", Export = 443, Import = 702 },
        new { Country = "Brazil", Export = 337, Import = 278 },
    })
)

using DevExtreme.AspNet.Data;
using DevExtreme.AspNet.Mvc;
using DevExtreme.MVC.Demos.Models.SampleData;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text.Json;
using System.Web.Mvc;

namespace DevExtreme.MVC.Demos.Controllers {
    public class ChartsController : Controller {

        public ActionResult PieWithMultipleSeries() {
            return View();
        }

    }
}

#pie {
    height: 440px;
}

#pie * {
    margin: 0 auto;
}