DevExtreme React - 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.

jQuery
JavaScript
$(function() {
    $("#pieChartContainer").dxPieChart({
        smallValuesGrouping: {
            // ...
            groupName: "miscellaneous"
        }
    });
});
Angular
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