Highcharts: change line options mid-way through a line

Question

I'm looking for a way to change the appearance of a segment of a line in Highcharts. I have concrete data and forecast data within the same series. I need to visually differentiate the part of the line that shows the forecast data.

I have found that I can turn off the marker for the forecast data points. This seems a little too subtle. I'd like something that stands out better.

I have considered using a custom graphic for the marker symbol. I don't think that would give a clear indication that the data is conjecture. A dashed line or a lighter color line (partial transparency) would better communicate the situation.

In the sample code below, the last three points are forecast data. I would like the line between them (from Sep to Dec) to look different than the line between the first nine points. JS Fiddle here.

$(function () {
    $('#container').highcharts({
        chart: {
            type: 'line'
        },

        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },

        series: [{
            data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4,
                {
                    y: 194.1,
                    color: '#BF0B23',
                    marker: {enabled: false}
                },
                {
                    y: 95.6,
                    color: '#BF0B23',
                    marker: {enabled: false}
                },
                {
                    y: 54.4,
                    color: '#BF0B23',
                    marker: {enabled: false}
                }]
        }]
    });
});

How can I change the color/transparency of one segment of the plot line?

How can I change the dashStyle for one segment of the plot line?

Answer 1

This fiddle answers this: http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/series/color-zones-dashstyle-dot

Highcharts.chart('container', {
title: {
    text: 'Zone with dash style'
},
subtitle: {
    text: 'Dotted line typically signifies prognosis'
},
xAxis: {
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
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'
    }]
}]

});

Answer 2

So the official word is I need to separate the series into actual and forecast. Here's the configuration I'm using in case anyone is interested.

$(function () {
    $('#container').highcharts({
        chart: {
            type: 'line'
        },

        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },

        series: [{
            data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4]
        }, {
            showInLegend: false,
            name: 'Series 1',
            color: 'rgba(90,155,212,0.5)',
            dashStyle: 'Dash',
            pointStart: 8,
            zIndex: -100,
            linkedTo: ':previous',
            marker: {
                enabled: false
            },
            data: [216.4, 194.1, 95.6, 54.4]
        }]
    });
});

Notice that the first point in the forecast is the same value as the last point in the actuals. This makes the lines continuous.

In the options, 'name' is the same name as the original series so that tooltips show it correctly, 'color' is the same as the original series with 50% transparency, 'pointStart' is the index to the starting point (category name will not work here), 'zIndex' tucks the first point under the previous line marker and 'linkedTo' makes the forecast disappear when the actuals are hidden (by clicking the name in legend).