add an extra value to a bar chart - Javascript highcharts

Javascript examples for highcharts:Chart Value

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

Description

add an extra value to a 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" src="https://code.highcharts.com/highcharts.js"></script> 
      <script type="text/javascript">
    window.onload=function(){/*from  w w w . j  a  v a 2 s. co  m*/
var tons_index = 0;
Highcharts.chart('container', {
    chart: {
        type: 'bar'
    },
    colors: [
          '#005eb8','#fff','#fff','#fff'
    ],
    title: {
        text: ''
    },
    xAxis: {
        categories: ['PACKAGING PAPERS<br>AND BOARDS', 'CASE MATERIALS', 'OTHER PACKAGING & PAPER','WRAPPINGS']
    },
    yAxis: {
        min: 0,
        max: 100,
        title: {
          text: null,
        },
        labels: {
          enabled: false,
        },
        stackLabels: {
            enabled: true,
            style: {
                color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
            },
            formatter: function () {
                var stack_label = this.axis.series[tons_index].options.tons+ '  Million tones';
                tons_index++;
                return stack_label;
            }
        }
    },
    legend: {
      enabled: false
    },
    tooltip: {
          enabled: false
    },
    plotOptions: {
        bar: {
            stacking: 'normal',
               borderWidth: 0,
            dataLabels: {
                enabled: true,
                formatter: function () {
                   if (this.y > 0) {
                     return this.y+ ' %';
                  }
                }
            }
        }
    },
    responsive: {
      rules: [{
        condition: {
          maxWidth: 500
        },
        chartOptions: {
          chart: {
            inverted: false
          },
          legend: {
            align: 'center',
            verticalAlign: 'bottom',
            layout: 'horizontal'
          }
        }
      }]
    },
    series: [{
        name: 'a',
        data: [49],
        tons : 120
    }, {
        name: 'b',
        data: [0, 29.9],
        tons : 68,
        borderWidth: 2,
        borderColor: '#005eb8'
    }, {
        name: 'c',
        data: [0, 0, 14.4],
        tons : 9.2,
        borderWidth: 2,
        borderColor: '#005eb8'
    }, {
        name: 'd',
        data: [0, 0, 0,4.7],
        tons : 3,
        borderWidth: 2,
        borderColor: '#005eb8'
    }]
});
    }

      </script> 
   </head> 
   <body> 
      <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>  
   </body>
</html>

Related Tutorials