score:1

Accepted answer

I am afraid that it is impossible to achieve it in this way.

Highcharts.SVGRenderer.prototype.symbols this function returns a path. Each of these values in the array means the next position where the line should be drawn - in really basic words.

Check this example to see what I am talking about: https://jsfiddle.net/BlackLabel/c38ofw5h/

for ['M', 0, 0 ] it's like {x: 0, y: 0} , so starts points, next ['L', 100, 100] it's like the drawn line to {x: 100, y: 100}. You pasted a complicated array of coordinates to drawn it, with 'fixed height'.

It is also very good explained here: Extend highcharts renderer symbols to have plus sign

Of course, the SVG element could be customized. But as an HTML element. It is very good explained here: https://css-tricks.com/scale-svg/

So, with the above information, I think that a better approach is to create a custom label as an HTML element.

Demo: https://codesandbox.io/s/costume-icon-mfg7z

API: https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#label

API: https://api.highcharts.com/highstock/chart.events.render


Related Query

More Query from same tag