javascript - How to prevent label overlapping? How to write text at a point relative to plotLines? -

javascript - How to prevent label overlapping? How to write text at a point relative to plotLines? -

i have tornado chart in looks this.

the overlap of labels occurs because have same value in series. want first label right aligned , sec label left aligned both labels visible.

apart this, have vertical line chart labels need left aligned line , visible outside bar column.

jsfiddle link of problem: http://jsfiddle.net/z2jyz7ln/

the chart has threshold 29.5 , series follows:

series: [ {type:'line',color:'black',zindex:505, data:[[-0.25,29.5],[3.25,29.5]], marker:{ enabled: false } }, { threshold: 29.5, name: 'low', grouping: false, type: 'bar', data: [{ x: 0, y: 12.15, }, { x: 1, y: 15.45, }, { x: 2, y: 29.5, }, { x: 3, y: 12.15, }], labels: [10, 5, 1, 2] }, { threshold: 29.5, name: 'high', grouping: false, type: 'bar', data: [{ x: 0, y: 46.86, }, { x: 1, y: 42.28, }, { x: 2, y: 29.5, }, { x: 3, y: 46.86, }], labels: [30, 10, 3, 4] }]

i need create changes pointed out in image. basically, need utilize different datalabel alignments within same series. how do that?

you can command position each of datalabels using point.datalabel.x/y values: http://jsfiddle.net/z2jyz7ln/1/

code:

data: [ [-0.25, 29.5], { x:3.25, y:29.5, datalabels: { y: 20, x: -20 } } ],

unfortunately need observe datalabels collision on own, highcharts doesn't provide such method.

javascript charts highcharts label