Posts: 8
Joined: Fri Sep 25, 2015 4:05 am

Activating data label connectors


I was interested to do some experimentation with the 'connectorAllowed' option: https://api.highcharts.com/highstock/pl ... el.enabled
I started with a Column chart example, where I intentionally try to cause collision between data labels in adjacent series, but the labels are still hiding:
connectorAllowed.png (88.17 KiB) Viewed 124 times
JSFiddle: https://jsfiddle.net/rcdubya/Lzbeoua8/1/

Am I misunderstanding how this feature is intended to work, or possibly not activating it correctly?

Thanks in advance!
Posts: 1114
Joined: Thu Aug 12, 2021 12:04 pm

Re: Activating data label connectors

The series-label module is used to display the name of the series on the plot area but only for certain types of series as it is given in the API, so unfortunately it will not work for column:

Code: Select all

The series labels currently work with series types having a graph or an area.

From what I understand, you want to show all dataLabels os series somehow. You can do this with dataLabels.allowOverlap but it may not be that readable. In my opinion, if there are always two series, it may be appropriate to set dataLabels.align in combination with dataLabels.x for the labels of these series to make it look better.

Demo: https://jsfiddle.net/BlackLabel/0waydmzr/
API: https://api.highcharts.com/highstock/se ... bels.align
https://api.highcharts.com/highstock/se ... taLabels.x
https://api.highcharts.com/highstock/se ... lowOverlap
Michał Filipiec
Highcharts Developer

Return to “Highcharts Usage”