Compare the series data with each other and show percentage in area chart - Javascript highcharts

Javascript examples for highcharts:Chart Series

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

Description

Compare the series data with each other and show percentage in area chart

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <style id="compiled-css" type="text/css">

#container {/*  ww w . j  a  v  a2s  .c om*/
   min-width: 310px;
   max-width: 800px;
   margin: 0 auto
}


      </style> 
      <script type="text/javascript">
    window.onload=function(){
    Highcharts.chart('container', {
      chart: {
        type: 'area'
      },
      xAxis: {
        categories: ['A', 'B', 'C', 'D', 'E', ]
      },
      yAxis: {
        min: 0,
        allowDecimals: false,
        title: {
          text: ' Count'
        },
      },
      plotOptions: {
        column: {
          pointPadding: 0.2,
          borderWidth: 0,
          stacking: 'normal',
          dataLabels: {
            enabled: true,
          },
        },
        series: {
          cursor: 'pointer',
        }
      },
      series: [{
        name: 'Total value',
        data: [50, 100, 50, 100, 50, ]
      }, {
        name: 'Value 1',
        data: [5, 20, 10, 62, 31, ],
        tooltip: {
          headerFormat: '<b>{point.x}</b>  ',
          pointFormat: '{series.name}:  {point.y}<br> ({point.percentage:.1f}%)',
          pointFormatter: function() {
            return this.series.name + ": " + this.y + "<br/>(" + this.y * 100 / this.series.chart.series[0].data[this.x].y + "%)"
          }
        }
      }]
    });
    }

      </script> 
   </head> 
   <body> 
      <script src="https://code.highcharts.com/highcharts.js"></script> 
      <script src="https://code.highcharts.com/modules/sunburst.js"></script> 
      <script src="https://code.highcharts.com/modules/exporting.js"></script> 
      <div id="container"></div>  
   </body>
</html>

Related Tutorials