Angular PieChart - Resolve Overlapping
In multi-series charts, point labels often overlap. To decide how to resolve overlapping, specify the resolveLabelOverlapping property. It allows you to hide certain labels, or slightly shift them, or keep them as they are (i.e. overlapping).
HTML
TypeScript
- <dx-pie-chart ...
- resolveLabelOverlapping="shift"> <!-- or 'hide' | 'none' -->
- </dx-pie-chart>
- import { DxPieChartModule } from "devextreme-angular";
- // ...
- export class AppComponent {
- // ...
- }
- @NgModule({
- imports: [
- // ...
- DxPieChartModule
- ],
- // ...
- })
Another way to deal with overlapping labels is to hide all labels of a specific series once their count exceeds a certain limit. Mostly, this feature is useful if the series accepts new points at runtime. To specify the limit on point labels, assign a number to the maxLabelCount property.
HTML
TypeScript
- <dx-pie-chart ... >
- <dxi-series [maxLabelCount]="10" ... ></dxi-series>
- </dx-pie-chart>
- import { DxPieChartModule } from "devextreme-angular";
- // ...
- export class AppComponent {
- // ...
- }
- @NgModule({
- imports: [
- // ...
- DxPieChartModule
- ],
- // ...
- })
See Also
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.