Data Visualization ▸ Doughnut with Top N Series

@(Html.DevExtreme().PieChart()
    .ID("pie")
    .Type(PieChartType.Doughnut)
    .Palette(VizPalette.SoftPastel)
    .Title("Top Internet Languages")
    .Legend(l => l
        .HorizontalAlignment(HorizontalAlignment.Center)
        .VerticalAlignment(VerticalEdge.Bottom)
    )
    .Export(e => e.Enabled(true))
    .Series(s => s
        .Add()
        .SmallValuesGrouping(g => g
            .Mode(SmallValuesGroupingMode.TopN)
            .TopCount(3)
        )
        .ArgumentField("Language")
        .ValueField("Percent")
        .Label(l => l
            .Visible(true)
            .Format(Format.FixedPoint)
            .CustomizeText(@<text>
                function (point) {
                    return point.argumentText + ": " + point.valueText + "%";
                }
            </text>)
            .Connector(c => c
                .Visible(true)
                .Width(1)
            )
        )
    )
    .DataSource(new[] {
        new { Language = "English", Percent = 55.5 },
        new { Language = "Chinese", Percent = 4.0 },
        new { Language = "Spanish", Percent = 4.3 },
        new { Language = "Japanese", Percent = 4.9 },
        new { Language = "Portuguese", Percent = 2.3 },
        new { Language = "German", Percent = 5.6 },
        new { Language = "French", Percent = 3.8 },
        new { Language = "Russian", Percent = 6.3 },
        new { Language = "Italian", Percent = 1.6 },
        new { Language = "Polish", Percent = 1.8 }
    })
)

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

    }
}

#pie {
    height: 440px;
}