show a percentage of the value on column chart - Javascript highcharts

Javascript examples for highcharts:Column Chart

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

Description

show a percentage of the value on 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="https://code.jquery.com/jquery-1.9.1.js"></script> 
      <script type="text/javascript">
    $(window).load(function(){//  ww  w  .  ja v a2s . c o m
$(function () {
    $('#container').highcharts({
        chart: {
            type: 'column'
        },
        title: {
            text: 'Title'
        },
        subtitle: {
            text: 'Sub Title'
        },
        xAxis: {
            categories: [
                'January',
                'February',
                'March',
                'April',
                'May',
                'June',
                'July',
                'August',
                'September',
                'October',
                'November',
                'December',
                'Total'
            ]
        },
        yAxis: {
            min: 0,
            title: {
                text: 'Description'
            }
        },
        tooltip: {
            formatter: function () {
                var s = '<span style="font-size:10px">'+this.x+'</span><br/';
                var dataSum = parseInt(this.points[0].y) + parseInt(this.points[1].y);
                $.each(this.points, function() {
                    var pcnt = (this.y / dataSum) * 100;
                    s += '<span style="color:red">'+this.series.name+': </span>' + '<span style="padding:0"><b>'+this.point.y+' times</b> ('+Highcharts.numberFormat(pcnt)+'%)</span><br/>'
                });
                return s;
            },
            shared: true
        },
        plotOptions: {
             column: {
                dataLabels: {
                    enabled: true,
                    allowOverlap: true,
                    color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'black',
                    style: {
                        fontSize: '11px'
                    }
                },
                enableMouseTracking: true
            }
        },
        series: [{
            name: 'Yes',
            data: [5, 15, 25, 35, 45, 55, 65, 75, 85, 95, 105, 115,720]
        }, {
            name: 'No',
            data: [10, 20, 30, 40, 50, 60, 65, 70, 75, 80, 90, 100,550]
        }]
    });
});
    });

      </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: 310px; height: 550px; margin: 0 auto"></div>  
   </body>
</html>

Related Tutorials