Angular 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.HTMLTypeScript- <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 property specifies the threshold.HTMLTypeScript- <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 property.
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
- ],
- // ...
- })
Feel free to share topic-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you for the feedback!
If you have technical questions, please create a support ticket in the DevExpress Support Center.