score:4

Accepted answer

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'
    }]
}]

});

score:0

In case when you need to have i.e dashed or other colour or part serie, you need to have serpated serie for each style / color.

score:4

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).


Related Query

More Query from same tag