customization bar chart - Javascript highcharts

Javascript examples for highcharts:Bar Chart

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

Description

customization 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.jquery.com/jquery-git.js"></script> 
      <script type="text/javascript">
var chart;/*  w w  w  . ja  v  a2 s .co  m*/
$(document).ready(function() {
    chart = new Highcharts.Chart({
        chart: {
            type: 'bar',
            renderTo: 'container',
            borderWidth: 1,
            marginBottom: 100,
            defaultSeriesType: 'column'
        },
        title: {
            text: 'Agent Id'
        },
        credits: {
            text: 'Make Me Money',
            href: 'http://www.mymcubed.com'
        },
        xAxis: {
            categories: [
                'ritest ',
                'sitest',
                'gitest',
                'papitest',
                'namitest',
                'ritest ',
                'sitest',
                'gitest',
                'papitest',
                'namitest',
                'jhumri',
                'ritest ',
                'sitest',
                'gitest',
                'papitest',
                'namitest',
                'ritest ',
                'sitest',
                'gitest',
                'papitest',
                'namitest',
                'ritest ',
                'sitest',
                'gitest',
                'papitest',
                'namitest',
                'ritest ',
                'sitest',
                'gitest',
                'papitest',
                'namitest',
                'ritest ',
                'sitest',
                'gitest',
                'papitest',
                'namita'
                ]
        },
        yAxis: {
            min: 0,
            max: 10,
            title: {
                text: 'Percent'
            }
        },
        legend: {
            enabled: false
        },
        tooltip: {
            formatter: function() {
                return '' + this.y + '%';
            }
        },
        plotOptions: {
            bar: {
                borderWidth: 0
            }
        },
        series: [{
            name: 'Percentage  wise distribution',
            data: [5.8, 6.0, 7.2, 4.6, 7.2, 9.6, 5.8, 6.0, 7.2, 4.6, 7.2, 9.6, 5.8, 6.0, 7.2, 4.6, 7.2, 9.6, 6.3, 6.7, 6.5, 7.5, 6.1, 7.6, 6.0, 5.6]
            }]
    });
});

      </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