Highchart plotline.

[vcmSwathiRai]

Axis.plotLines has option called 'className' which is custom class name, in addition to the default highcharts-plot-line, to apply to each individual line. But if I set 'value' (other than undefined and null) this classname doesn't apply.

[pawelfus]

Hi @vcmSwathiRai

It works fine, please take look: http://jsfiddle.net/35r5k67y/1/

Could recreate issue in jsFiddle? Thanks.

[vcmSwathiRai]

Please check the fiddle: http://jsfiddle.net/muy0hmc8/

[vcmSwathiRai]

I have noticed that fiddle which you had given uses highchart.js present inside js folder i.e:
https://code.highcharts.com/js/highcharts.js, but in my fiddle i am using hightchart.js directly from highchart folder i.e https://code.highcharts.com/highcharts.js.
To confirm this I have used https://code.highcharts.com/highcharts.js in jsfiddle link given by you. Please check: http://jsfiddle.net/35r5k67y/2/

[vcmSwathiRai]

Further digging down the code I got root cause of the issue. Issue is in render function written inside 'H.PlotLineOrBand.prototype = {'. Code below create the issue:

attribs = {
stroke: color,
'stroke-width': options.width
};
if (options.dashStyle) {
attribs.dashstyle = options.dashStyle;
}

This code removes class property from attribs object. This is present in https://code.highcharts.com/highcharts.js

[pawelfus]

Thank you for the demo, however I am not sure if this is a bug, from docs:

In styled mode, the plot lines are styled by the .highcharts-plot-line class in addition to the className option.

It doesn't mention standard Highcharts (non-CSS) version.

The difference between https://code.highcharts.com/highcharts.js and https://code.highcharts.com/js/highcharts.js is that the first one is a JS based branch, and the second one is the styled-mode one. Only the second branch provides an option to add a class.

[vcmSwathiRai]

@pawelfus
Thanks. I am using first branch in my project.

[MaryBartlett]

I've also just bumped into this issue with trying to style a plotLine from a className property. Can you please explain the difference between the highcharts js in the /js directory and at the root of the project?

[pawelfus]

As I said above:

The difference between https://code.highcharts.com/highcharts.js and https://code.highcharts.com/js/highcharts.js is that the first one is a JS based branch, and the second one is the styled-mode one.

And from the styled-mode docs (the URL above):

Highcharts 5 introduces styled mode, a separate branch with a clear separation of concerns. While the functionality is set up in the API options, the styling is set by CSS. In this mode, presentational styles from the API are no longer supported, but are replaced by CSS strokes, stroke-widths, fills etc. The classic mode is still unaltered and available from the same locations on code.highcharts.com.

The files for classic mode are available on root and directly under each version folder on code.highcharts.com.

The JavaScript files for styled mode are available under the /js/ folder on code.highcharts.com and under each version folder. In these files, most presentational code is removed, so without styling it will draw an ugly black-and-white chart if anything.

The default CSS file for styled mode is available as /css/highcharts.css on the root of code.highcharts.com as well as under version folders. This CSS is in turn based on a SCSS file, highcharts.scss. To experiment with this live, see our example with SCSS parsing on Codepen.

[aqumus]

This is fixed as part of Issue 8415