Add a vertical line as "marker" on a line chart


I want to add a vertical line to a line chart showing the months of a year.
The line should be a marker for the corrent month.
I made a mock-up of what it should look like, see attached screenshot.

I searched the documentation and the forum but did not find a solution.
Is there a method to achieve this, or will I have to go with canvas manipulation?


You can tyr the next:

var currentMonth; ... xAxis: { template: "'#month#", lineColor: function(obj) { return ? "#FF0000": "transparent"; } },

AnŠ² use any logic to get your currentMonth

Hi Daria, thank you very much, that works like a charm!

Is there a similar approach to set the font for the current month to bold?
Right now I use a JQuery call (checking the content of the label divs) to set the css, but it would be nicer if I could also include that in the chart configuration.

Sorry for the Typo - Darya :wink:

One more question: is it also possible to change the width of the vertical lines?

About bold text: you need instead of

template: "'#month#",

use the next:

template: function (obj) { return ? "<span style='font-weight: bold'>"+obj.year+"</span>" : "<span style='font-weight: normal'>"+obj.year+"</span>"; },
About line width: unfortunatelly not.