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
Hello, Michael,
Thank you for your question.
The chart data labels are currently created using the svg <text>
element that doesn't support the background
property.
afterchartdraw
event 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.
Kind regards,
Vera