Get Free Trial

opaque background behind data labels on a line chart

Michael T asked on June 10, 2021

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

1 answer

Vera Didenko Vera Didenko Flexmonster June 10, 2021

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.

  1. A possible workaround could be to use the afterchartdraw event to detect the overlapping labels and update the overlapping label’s coordinates.

    We have a JSFiddle example demonstrating the described approach:

    For more details about the afterchartdraw event, please see the following guide.

  2. Also, if you hover over a chart element, a tooltip is displayed showing data labels for the involved measures.

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

  3. In addition, providing more space for the chart by increasing Flexmonster’s height could help prevent chart labels from overlapping.

Please let us know if this helps.
Kind regards,

Please login or Register to Submit Answer