lines can sometimes overlap with data labels and make them hard to read.
Is there a way to put an opaque background behind the data labels (e.g. a white box behind each data label) so that the labels are easier to read when there is overlap?
Thank you for your question.
The chart data labels are currently created using the svg
<text> element that doesn’t support the
afterchartdrawevent to detect the overlapping labels and update the overlapping label’s coordinates.
We have a JSFiddle example demonstrating the described approach: https://jsfiddle.net/flexmonster/52tudxrb/.
For more details about the
afterchartdraw event, please see the following guide.
For some cases, a possible solution is to hide the chart data labels and use the tooltips to view details. The chart data labels can be hidden by setting the
showDataLabels chart option to
false. It is also possible to enlarge the chart nodes making it easier to hover on a particular chart node (see example).
Please let us know if this helps.