PLotLines In HighCharts Overlapping || React highCharts || YAxis Interval

Question

I am developing a barchart in React Js using React HighCharts Library. So in some of the case my data interval is not linear(diffrence between min value and max is very large). so the plotlines are overlapping. Sharing the image for reference.

Please help me to solve this i want my label to show clearly.

In this Image i have 2 plot lines valued at 0.66 and some nearby value 0.5 or so. They are overlapping. Please help to solve this case.

Thanks.

score 2 · Accepted Answer · answered Jun 18 '18 at 13:04

Highcharts doesn't provide any mechanism for handling overlapping plot lines - it has to be done manually.

Plot line labels can be adjusted by using y property:

plotLines: [{
    value: 22,
  color: 'red',
  width: 1,
  label: {
    text: 'First label',
    y: 13
  }
}

Live demo: http://jsfiddle.net/BlackLabel/zm5fk3rw/

If you're looking for more dynamic approach place the code responsible for changing the position of labels in chart.events.load callback.

Current y position of label is kept in yAxis.plotLinesAndBands[i].label.alignAttr.y property. yAxis.plotLinesAndBands[i].label is SVGElement so its y position can be changed like this: yAxis.plotLinesAndBands[i].label.attr({y: newValue}).

Starting point for implementing dynamic logic for positioning plot line labels: http://jsfiddle.net/BlackLabel/1vh940kj/

API references:

Plot line value property works the same as y in points - it reflects the real value and it's normal that plot lines overlap when they have almost the same value.

If you want to change its y position anyway you can use the same approach that I proposed for dynamic positioning of the labels (current y position of the label can be extracted from yAxis.plotLinesAndBands[0].svgElem.d property):

Starting point for implementing dynamic logic for positioning plot lines: http://jsfiddle.net/BlackLabel/t2hxrwp5/

PLotLines In HighCharts Overlapping || React highCharts || YAxis Interval

1 Answers1