line display in Combination bar chart - Javascript highcharts

Javascript examples for highcharts:Line Chart

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

Description

line display in Combination bar chart

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript">
    window.onload=function(){/*  www  . j  a  va  2s  .c  om*/
Highcharts.chart('container', {
    title: {
        text: 'Combination chart'
    },
    xAxis: {
        categories: ['2014', '2015', '2016', 'Results']
    },
    series: [{
        type: 'column',
        name: 'Project 1',
        data: [10, 4, 1]
    }, {
        type: 'column',
        name: 'Project 2',
        data: [5, 4, 5]
    }, {
        type: 'column',
        name: 'Project 3',
        data: [2,8, 3]
    },{
      dashStyle: 'dash',
      lineWidth: 2,
      shadow: false,
      zIndex: 2,
      color: '#000e3e',
      data: [[-0.2, 10], [3,5]],
       name: 'Line for Project 1 - Results'
    },{
      dashStyle: 'dash',
      lineWidth: 2,
      shadow: false,
      zIndex: 2,
      color: '#000e3e',
      data: [[0, 5], [3,3]],
       name: 'Line for Project 2 - Results'
    },{
      dashStyle: 'dash',
      lineWidth: 2,
      shadow: false,
      zIndex: 2,
      color: '#000e3e',
      data: [[0.2, 2], [3,0]],
       name: 'Line for Project 3 - Results'
    }]
});
    }

      </script> 
   </head> 
   <body> 
      <script src="https://code.highcharts.com/highcharts.js"></script> 
      <script src="https://code.highcharts.com/modules/series-label.js"></script> 
      <script src="https://code.highcharts.com/modules/exporting.js"></script> 
      <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>  
   </body>
</html>

Related Tutorials