How to have a solid as well as dashed line in line chart highcharts

Question

I am using line chart(highcharts) for my reactjs project and the requirement is data after 2015, line should be shown as dashed line and data before 2015 line should shown as solid line(no dashed). Is there any way out how to achieve this? I have check the highchart documentation there is property called as className inside series->data, but cannot understand how to do it? can anyone help me please?

Answer 1

Example you have 2 series. One series is data after 2015 at first index and data before 2015 at second index. And you need to add "dashStyle" is supported by highcharts. The below example code will help you:

series: [
{
    data: [1, 3, 2, 4, 5, 4, 6, 2, 3, 5, 6],
    dashStyle: 'longdash'
},
{
    data: [6, 7, 8, 9, 10, 11, 6, 2, 24, 5, 9],
    dashStyle: 'solid' // or none dashStyle for 'solid' type
}
]

Answer 2

You can use the zones feature to reach wanted effect.

Demo: https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/series/color-zones-dashstyle-dot/

series: [{
    data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
    zoneAxis: 'x',
    zones: [{
        value: 8
    }, {
        dashStyle: 'dot'
    }]
}]

API: https://api.highcharts.com/highcharts/series.line.zones.value