DevExtreme React - Resolve Overlapping

In multi-series charts, point labels often overlap. To decide how to resolve overlapping, employ the resolveLabelOverlapping option. It allows you to hide certain labels, or arrange all labels in stacks, or keep the labels as they are (i.e. overlapping).

jQuery
JavaScript
$(function() {
    $("#chartContainer").dxChart({
        // ...
        resolveLabelOverlapping: 'stack' // or 'hide' | 'none'
    });
});
Angular
HTML
TypeScript
<dx-chart
    resolveLabelOverlapping="stack"> <!-- or 'hide' | 'none' -->
</dx-chart>
import { DxChartModule } from 'devextreme-angular';
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxChartModule
    ],
    // ...
})

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 option.

jQuery
JavaScript
$(function() {
    $("#chartContainer").dxChart({
        // ...
        series: [{
            // ...
            maxLabelCount: 10
        }, {
            // ...
        }]
    });
});
Angular
HTML
TypeScript
<dx-chart ... >
    <dxi-series [maxLabelCount]="10" ... ></dxi-series>
</dx-chart>
import { DxChartModule } from 'devextreme-angular';
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxChartModule
    ],
    // ...
})
See Also