Your search did not match any results.

Pie with Small Values Grouped

Documentation

In this example, the PieChart component combines all values below the threshold property in one category called «others».

www.wikipedia.org
Backend API
@(Html.DevExtreme().PieChart() .ID("pie") .Palette(VizPalette.Bright) .Title("Top internet languages") .Legend(l => l .HorizontalAlignment(HorizontalAlignment.Center) .VerticalAlignment(VerticalEdge.Bottom) ) .Export(e => e.Enabled(true)) .Series(s => s .Add() .ArgumentField("Language") .ValueField("Percent") .Label(l => l .Visible(true) .Connector(c => c .Visible(true) .Width(0.5) ) .Format(Format.FixedPoint) .CustomizeText(@<text> function (point) { return point.argumentText + ": " + point.valueText + "%"; } </text>) ) .SmallValuesGrouping(g => g .Mode(SmallValuesGroupingMode.SmallValueThreshold) .Threshold(4.5) ) ) .DataSource(Model) )
using DevExtreme.AspNet.Data; using DevExtreme.AspNet.Mvc; using DevExtreme.NETCore.Demos.Models; using DevExtreme.NETCore.Demos.Models.SampleData; using Microsoft.AspNetCore.Mvc; using Newtonsoft.Json; using System; using System.Collections.Generic; using System.Linq; namespace DevExtreme.NETCore.Demos.Controllers { public class ChartsController : Controller { public ActionResult PieWithSmallValuesGrouped() { return View(SampleData.LanguagesPercentage); } } }
using System.Collections.Generic; namespace DevExtreme.NETCore.Demos.Models.SampleData { public partial class SampleData { public static readonly IEnumerable<object> LanguagesPercentage = new[] { new { Language = "English", Percent = 55.5 }, new { Language = "Chinese", Percent = 2.8 }, new { Language = "Spanish", Percent = 4.6 }, new { Language = "Japanese", Percent = 5.0 }, new { Language = "Portuguese", Percent = 2.5 }, new { Language = "German", Percent = 5.8 }, new { Language = "French", Percent = 4.0 }, new { Language = "Russian", Percent = 5.9 }, new { Language = "Italian", Percent = 1.9 }, new { Language = "Polish", Percent = 1.7 }, new { Language = "Turkish", Percent = 1.5 }, new { Language = "Dutch", Percent = 1.3 }, new { Language = "Persian", Percent = 0.9 }, new { Language = "Arabic", Percent = 0.8 }, new { Language = "Korean", Percent = 0.7 }, new { Language = "Czech", Percent = 0.7 }, new { Language = "Swedish", Percent = 0.5 }, new { Language = "Vietnamese", Percent = 0.4 }, new { Language = "Indonesian", Percent = 0.4 }, new { Language = "Greek", Percent = 0.4 }, new { Language = "Romanian", Percent = 0.4 }, new { Language = "Hungarian", Percent = 0.3 }, new { Language = "Danish", Percent = 0.3 }, new { Language = "Thai", Percent = 0.3 }, new { Language = "Finnish", Percent = 0.2 }, new { Language = "Slovak", Percent = 0.2 }, new { Language = "Bulgarian", Percent = 0.2 }, new { Language = "Norwegian", Percent = 0.2 }, new { Language = "Hebrew", Percent = 0.1 }, new { Language = "Lithuanian", Percent = 0.1 }, new { Language = "Croatian", Percent = 0.1 }, new { Language = "Ukrainian", Percent = 0.1 }, new { Language = "Norwegian Bokmål", Percent = 0.1 }, new { Language = "Serbian", Percent = 0.1 }, new { Language = "Catalan", Percent = 0.1 }, new { Language = "Slovenian", Percent = 0.1 }, new { Language = "Latvian", Percent = 0.1 }, new { Language = "Estonian", Percent = 0.1 } }; } }
#pie { height: 440px; }