drawing custom lines on highchart graph

Question

I have recently been working with the highchart api to plot some data on a website, and I have need to be able to add a custom vertical "line" to symbolise something happening for example a press release.

I have thought about adding a column element to the chart as a seperate series but this is less than ideal.

if anyone has any ideas that would be awesome

thanks

score 10 · Accepted Answer · edited Apr 20 '18 at 08:21

10

Can you use the the renderer to draw the line?

Here is the API doc for renderer. Look at the path function.

Also check the Try it for jsfiddle for path function.

edited Apr 20 '18 at 08:21

daemone

1,183
1
17
28

answered Oct 12 '11 at 18:39

Bhesh Gurung

50,430
22
93
142

2

hi i had a similar query. problem with this is that if zoom into or out of the chart, the drawn svg lines do not rescale accordingly. similarly, the drawn lines are not exported. is there an alternate option which would take care of this, or should i go for handling these events manually? – Arturo Jul 23 '13 at 07:21
@AtharvaJohri any progress in that matter? – Fardin K. Jan 23 '14 at 23:00
hey.. i wrote my own javascript to handle rescaling, since I could not find anything in the API. Same for exporting. – Arturo Jan 27 '14 at 10:05

score 6 · Answer 2 · edited Dec 30 '14 at 15:24

6

You can also check the addPlotLine or addPlotBand methods (http://api.highcharts.com/highcharts#Axis.addPlotLine and http://api.highcharts.com/highcharts#Axis.addPlotBand).

It may be easier and quicker to use than drawing a SVG path, unless your line isn't straight.

edited Dec 30 '14 at 15:24

Kyle Pittman

2,858
1
30
38

answered Feb 01 '13 at 14:08

Jb Drucker

972
8
14

This is a great answer and solved my problem, although unfortunately links are not working... somebody should tell the Highcharts team that having urls with parenthesis is not such a hot idea. – danii Oct 03 '13 at 09:12

drawing custom lines on highchart graph

2 Answers2

Linked