multiple series with Data Points in column chart - Javascript highcharts

Javascript examples for highcharts:Chart Data

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

Description

multiple series with Data Points in column 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" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
      <script type="text/javascript">
$(function() {/* w  w w. j ava2  s .co m*/
  var series = [{
    "type": "column",
    "id": 154,
    "name": "Drinks",
    "data": [{
      "name": "Jan 2017",
      "y": 34.523809523809526
    }, {
      "name": "Mar 2017",
      "y": 89.3312101910828
    }, {
      "name": "Apr 2017",
      "y": 91.28724002248454
    }, {
      "name": "May 2017",
      "y": 92.56756756756756
    }],
    "visible": true
  }, {
    "type": "column",
    "id": 151,
    "name": "Chocolates",
    "data": [{
      "name": "Jan 2017",
      "y": 55.76421491914449
    }, {
      "name": "Feb 2017",
      "y": 53.731770088647416
    }, {
      "name": "Mar 2017",
      "y": 58.21965317919076
    }, {
      "name": "Apr 2017",
      "y": 72.7780883174958
    }, {
      "name": "May 2017",
      "y": 76.69902912621359
    }],
    "visible": true
  }];
  $('#container').highcharts({
    chart: {
      type: 'spline'
    },
    xAxis: {
      type: 'category',
      categories:['Jan 2017','Feb 2017','Mar 2017','Apr 2017','May 2017']
    },
    yAxis: {
      title: {
        text: 'Score'
      },
      min: 0
    },
    tooltip: {
      pointFormat: '<b>{point.series.name} </b> {point.y:.0f}% ',
                valueDecimals: 2,
                split: false
    },
    series: series
  });
});

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

Related Tutorials