All docs
V21.1
21.2
21.1
20.2
20.1
19.2
The page you are viewing does not exist in version 19.2. This link will take you to the root page.
19.1
The page you are viewing does not exist in version 19.1. This link will take you to the root page.
18.2
The page you are viewing does not exist in version 18.2. This link will take you to the root page.
18.1
The page you are viewing does not exist in version 18.1. This link will take you to the root page.
17.2
The page you are viewing does not exist in version 17.2. This link will take you to the root page.

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