Angular PieChart - Group Smaller Points

Smaller points on the PieChart can be collected in a single group in one of the following modes:

  • Top N
    Top N points with the biggest values remain ungrouped; all other points form a group. The smallValuesGrouping.topCount property specifies the N.

    HTML
    TypeScript
    • <dx-pie-chart>
    • <dxo-small-values-grouping
    • mode="topN"
    • [topCount]="5">
    • </dxo-small-values-grouping>
    • </dx-pie-chart>
    • import { DxPieChartModule } from "devextreme-angular";
    • // ...
    • export class AppComponent {
    • // ...
    • }
    • @NgModule({
    • imports: [
    • // ...
    • DxPieChartModule
    • ],
    • // ...
    • })
  • Threshold
    Points that fall beyond a threshold establish a group. The smallValuesGrouping.threshold property specifies the threshold.

    HTML
    TypeScript
    • <dx-pie-chart>
    • <dxo-small-values-grouping
    • mode="smallValueThreshold"
    • [threshold]="3.5">
    • </dxo-small-values-grouping>
    • </dx-pie-chart>
    • import { DxPieChartModule } from "devextreme-angular";
    • // ...
    • export class AppComponent {
    • // ...
    • }
    • @NgModule({
    • imports: [
    • // ...
    • DxPieChartModule
    • ],
    • // ...
    • })

The group for small points is called "others" by default. You can change this using the smallValuesGrouping.groupName property.

HTML
TypeScript
  • <dx-pie-chart>
  • <dxo-small-values-grouping ...
  • groupName="miscellaneous">
  • </dxo-small-values-grouping>
  • </dx-pie-chart>
  • import { DxPieChartModule } from "devextreme-angular";
  • // ...
  • export class AppComponent {
  • // ...
  • }
  • @NgModule({
  • imports: [
  • // ...
  • DxPieChartModule
  • ],
  • // ...
  • })

View Demo