DevExtreme jQuery - 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 option specifies the N.

  jQuery

  JavaScript

  $(function() {
      $("#pieChartContainer").dxPieChart({
          smallValuesGrouping: {
              mode: "topN",
              topCount: 5
          }
      });
  });

  Angular

  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 option specifies the threshold.

  jQuery

  JavaScript

  $(function() {
      $("#pieChartContainer").dxPieChart({
          smallValuesGrouping: {
              mode: "smallValueThreshold",
              threshold: 3.5
          }
      });
  });

  Angular

  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 option.

$(function() {
    $("#pieChartContainer").dxPieChart({
        smallValuesGrouping: {
            // ...
            groupName: "miscellaneous"
        }
    });
});

<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