Data Visualization ▸ Doughnut Selection

@(Html.DevExtreme().PieChart()
    .ID("pie")
    .Type(PieChartType.Donut)
    .Palette(VizPalette.SoftPastel)
    .Title("Olympic Medals in 2008")
    .Legend(l => l
        .HorizontalAlignment(HorizontalAlignment.Right)
        .VerticalAlignment(VerticalEdge.Top)
        .Margin(0)
    )
    .Export(e => e.Enabled(true))
    .Series(s => s
        .Add()
        .ArgumentField("Country")
        .ValueField("Medals")
        .HoverStyle(h => h.Color("#ffd700"))
    )
    .OnPointClick(@<text>
        function(arg) {
            arg.target.select();
        }
    </text>)
    .DataSource(new[] {
        new { Country = "USA", Medals = 110 },
        new { Country = "China", Medals = 100 },
        new { Country = "Russia", Medals = 72 },
        new { Country = "Britain", Medals = 47 },
        new { Country = "Australia", Medals = 46 },
        new { Country = "Germany", Medals = 41 },
        new { Country = "France", Medals = 40 },
        new { Country = "South Korea", Medals = 31 }
    })
)

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 DoughnutSelection() {
            return View();
        }

    }
}

#pie {
    height: 440px;
}