Charts - Small Value Groups

DevExtreme PieChart supports small value grouping operations. To enable this functionality, configure the smallValuesGrouping object within series or commonSeriesSettings. This demo sets smallValuesGrouping.mode to "smallValueThreshold" and specifies the threshold property.

www.wikipedia.org

Backend API

​x
 
@(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))​

xxxxxxxxxx
 
using DevExtreme.AspNet.Data;using DevExtreme.AspNet.Mvc;using DevExtreme.NETCore.Demos.Models;using DevExtreme.NETCore.Demos.Models.SampleData;using Microsoft.AspNetCore.Mvc;using System;using System.Collections.Generic;using System.Linq;​namespace DevExtreme.NETCore.Demos.Controllers {    public class ChartsController : Controller {        public ActionResult SmallValueGroups() {            return View(SampleData.LanguagesPercentage);        }    }}

xxxxxxxxxx
 
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 }        };    }}​

xxxxxxxxxx
 
#pie {    height: 440px;}

You can also set smallValuesGrouping.mode to "topN". In this mode, our PieChart displays a predefined number of large data points (specified with topCount) and groups the rest.