set only last chunk of line as a dotted zone for line chart - Javascript highcharts

Javascript examples for highcharts:Line Chart

  1. HOME
  2. Javascript
  3. highcharts
  4. Line Chart

Description

set only last chunk of line as a dotted zone for line chart

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <title>Highcharts Demo</title> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
   </head> 
   <body> 
      <script src="https://code.highcharts.com/highcharts.js"></script> 
      <div id="container" style="height: 400px; max-width: 800px; margin: 0 auto"></div> 
      <script type="text/javascript">
chart_data = [[1496275200000, 981], [1498867200000, 1089], [1501545600000, 1595], [1504224000000, 1296], [1506816000000, 1678], [1509494400000, 1879], [1512086400000, 2028], [1514764800000, 1885], [1517443200000, 1366], [1519862400000, 1558], [1522540800000, 1636], [1525132800000, 2438], [1527811200000, 2899], [1530403200000, 2521], [1533081600000, 2879], [1535760000000, 1702]]
dottedStartIndex = chart_data[chart_data.length - 2][0];
Highcharts.chart('container', {
    title: {/*from w  w w  . j a  v  a2  s  . c  om*/
        text: 'Zone with dash style'
    },
    subtitle: {
        text: 'Dotted line typically signifies prognosis'
    },
      xAxis: {
        type: 'datetime',
        labels: {
            formatter: function () {
                return Highcharts.dateFormat('%Y-%m', this.value)
            }
        },
        tickInterval: 30 * 24 * 3600 * 1000,
    },
    series: [{
        data: chart_data,
        zoneAxis: 'x',
        zones: [{
            value: dottedStartIndex
        }, {
            dashStyle: 'dot'
        }]
    }]
});

      </script>  
   </body>
</html>

Related Tutorials