JavaScript/jQuery 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.

$(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
    ],
    // ...
})

<template>
    <DxPieChart ... >
        <DxSmallValuesGrouping ...
            group-name="miscellaneous"
        />
    </DxPieChart>
</template>

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

export default {
    components: {
        DxPieChart,
        DxSmallValuesGrouping
    },
    // ...
}
</script>

import PieChart, {
    SmallValuesGrouping
} from 'devextreme-react/pie-chart';

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

View Demo