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