Create Horizontal Bar Chart - Javascript highcharts

Javascript examples for highcharts:Bar Chart

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

Description

Create Horizontal Bar Chart

Demo Code

ResultView the demo in separate window 

<html lang="en">
   <head></head>
   <body translate="no"> 
      <div id="container"></div> 
      <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> 
      <script src="https://cdnjs.cloudflare.com/ajax/libs/highcharts/6.0.7/highcharts.js"></script> 
      <script>
      var perShapeGradient = {//from   ww w  .j  ava  2s  .c  o m
        x1: 0,
        y1: 0,
        x2: 1,
        y2: 0
    };
var data = [{
      name: 'try1',
      y: 1756,
      fontWeight: 'bold',
    },{
      name: 'try2',
      y: 512,
      fontWeight: 'bold',
    },{
      name: 'try3',
      y: 756,
      fontWeight: 'bold',
    }]
var dataSum = data.reduce((a,x)=>a+x.y,0);
Highcharts.chart('container', {
  chart: {
    type: 'bar',
    backgroundColor: null,
    height: 216
  },
  title: {
    text: ''
  },
  xAxis: {
    type: 'category',
    labels: {
        style: {
            fontWeight: 'bold'
        }
    }
  },
  colors: [{
    linearGradient: perShapeGradient,
    stops: [
      [0, '#c2352b'],
      [1, '#f44336 ']
    ]
  }, {
    linearGradient: perShapeGradient,
    stops: [
      [0, '#1b75bf'],
      [1, '#2196f3']
    ]
  }, {
    linearGradient: perShapeGradient,
    stops: [
      [0, '#cc7a00'],
      [1, '#ff9800']
    ]},
          ],
  yAxis: {
    title: {
      text: ''
    },
  },
  credits: {
      enabled: false
  },
  legend: {
    enabled: false
  },
  plotOptions: {
    series: {
      borderWidth: 0,
      pointPadding: 0.15,
      groupPadding: 0,
      dataLabels: {
        enabled: true,
        formatter:function() {
            var pcnt = (this.y / dataSum) * 100;
            return Highcharts.numberFormat(pcnt) + '%';
        }
      }
    }
  },
  tooltip: {
    headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
    pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}</b><br/>'
  },
  series: [{
        data: data
    },{
        data: data
    }
          ]
});
      //# sourceURL=pen.js
    
      </script>  
   </body>
</html>

Related Tutorials