Highcharts: Line graph with half solid line and half dotted line?

Question

I'm trying to show a time series line graph in highcharts - to the left of center is historical data, so the line needs to be solid. To the right of center is predicted data, so the line needs to be dotted or dashed. Is this possible?

Thanks!

Answer 1

Yes, you can, using zones. Zones let you apply different styles within the same series of data, and can be applied against both x- and y-axes.

Examples

1. Different colors by y-axis value

$(function() {
  $('#container').highcharts({
    series: [{
      data: [-10, -5, 0, 5, 10, 15, 10, 10, 5, 0, -5],
      zones: [{
        value: 0,
        color: '#f7a35c',
        style: 'dotted',
      }, {
        value: 10,
        color: '#7cb5ec'
      }, {
        color: '#90ed7d'
      }, ]
    }]
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>

<div id="container" style="height: 400px"></div>

2. Different dash styles by x-axis position

$(function() {
  $('#container').highcharts({
    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'
      }]
    }]
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>

<div id="container" style="height: 400px; max-width: 800px; margin: 0 auto"></div>

Answer 2

I don't think you can have two different kind of line style in one series, but you can split the series into two, then specify the x coordinates for the second series to start where the first left off. Then you can set the dashStyle of that line.

series: [{
            name: 'Tokyo',
            data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5]
        }, {
            name: 'New York',
            data: [{x: 5, y: 21.5}, {x: 6, y: 22.0}, {x: 7, y: 24.8}, {x: 8, y: 24.1}, {x: 9, y: 20.1}, {x:10, y: 14.1}, {x:11, y: 13}],
            dashStyle: 'dash'
        }]

Here's a JSFiddle illustrating it: http://jsfiddle.net/mkremer90/zMZEV/1/