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

    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
        ],
        // ...
    })
    Vue
    App.vue
    <template>
        <DxPieChart ... >
            <DxSmallValuesGrouping
                mode="topN"
                :top-count="5"
            />
        </DxPieChart>
    </template>
    
    <script>
    import DxPieChart, {
        DxSmallValuesGrouping
    } from 'devextreme-vue/pie-chart';
    
    export default {
        components: {
            DxPieChart,
            DxSmallValuesGrouping
        },
        // ...
    }
    </script>
    React
    App.js
    import PieChart, {
        SmallValuesGrouping
    } from 'devextreme-react/pie-chart';
    
    export default function App() {
        return (
            <PieChart ... >
                <SmallValuesGrouping
                    mode="topN"
                    topCount={5}
                />
            </PieChart>
        );
    }
  • Threshold
    Points that fall beyond a threshold establish a group. The smallValuesGrouping.threshold property 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
        ],
        // ...
    })
    Vue
    App.vue
    <template>
        <DxPieChart ... >
            <DxSmallValuesGrouping
                mode="smallValueThreshold"
                :threshold="3.5"
            />
        </DxPieChart>
    </template>
    
    <script>
    import DxPieChart, {
        DxSmallValuesGrouping
    } from 'devextreme-vue/pie-chart';
    
    export default {
        components: {
            DxPieChart,
            DxSmallValuesGrouping
        },
        // ...
    }
    </script>
    React
    App.js
    import PieChart, {
        SmallValuesGrouping
    } from 'devextreme-react/pie-chart';
    
    export default function App() {
        return (
            <PieChart ... >
                <SmallValuesGrouping
                    mode="smallValueThreshold"
                    threshold={3.5}
                />
            </PieChart>
        );
    }

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

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
    ],
    // ...
})
Vue
App.vue
<template>
    <DxPieChart ... >
        <DxSmallValuesGrouping ...
            group-name="miscellaneous"
        />
    </DxPieChart>
</template>

<script>
import DxPieChart, {
    DxSmallValuesGrouping
} from 'devextreme-vue/pie-chart';

export default {
    components: {
        DxPieChart,
        DxSmallValuesGrouping
    },
    // ...
}
</script>
React
App.js
import PieChart, {
    SmallValuesGrouping
} from 'devextreme-react/pie-chart';

export default function App() {
    return (
        <PieChart ... >
            <SmallValuesGrouping ...
                groupName="miscellaneous"
            />
        </PieChart>
    );
}

View Demo