bar chart without coordinate and legend - Javascript highcharts

Javascript examples for highcharts:Bar Chart

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

Description

bar chart without coordinate and legend

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://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
      <script type="text/javascript" src="https://code.highcharts.com/highcharts.js"></script> 
      <script type="text/javascript">
    $(window).load(function(){/* ww w  .  j  a v a2 s  . co m*/
// Initialize the chart when the document loads.
$(document).ready(function () {
    $('#results').highcharts({
        chart: {
            type: 'bar',
            height: 490,
            width: 590,
            marginLeft: 300,
        },
        title: {
            text: ''
        },
        xAxis: [{
            categories: ['Injustice: Gods Among Us ?', 'Tekken Tag Tournament 2 ?', 'Super Smash Bros. Melee ?', 'Persona 4 Arena', 'King of Fighters XIII', 'Dead or Alive 5 Ultimate', 'Street Fighter X Tekken Ver. 2013', 'Soulcalibur V'],
            labels: {
                align: 'left',
                overflow: 'justify',
                reserveSpace: true,
                style: {
                        fontFamily: 'Arial',
                        fontSize: '20px',
                        color: '#333'
                   },
          },
            minPadding: 200,
            maxPadding: 400,
            lineWidth: 0,
            minorGridLineWidth: 0,
            lineColor: 'transparent',
            minorTickLength: 0,
            tickLength: 0
        }],
        yAxis: {
            allowDecimals: false,
            title: {
                text: 'Votes'
            },
            gridLineWidth: 0,
            minorGridLineWidth: 0
        },
        series: [{
            data: [{
                y: 1426,
                color: '#29A329'
            }, {
                y: 823,
                color: '#29A329'
            }, {
                y: 462,
                color: '#29A329'
            }, {
                y: 305,
                color: '#CC0000'
            }, {
                y: 181,
                color: '#CC0000'
            }, {
                y: 148,
                color: '#CC0000'
            }, {
                y: 127,
                color: '#CC0000'
            }, {
                y: 115,
                color: '#CC0000'
            }],
            dataLabels: {
                color: '#FFFFFF',
                enabled: false,
                inside: true
            },
            showInLegend: false,
            name: 'Votes'
        }]
    });
});
    });

      </script> 
   </head> 
   <body> 
      <script src="https://code.highcharts.com/highcharts.js"></script> 
      <script src="https://code.highcharts.com/modules/exporting.js"></script> 
      <div id="results" style="min-width: 500; height: 400px; margin: 20 auto"></div>  
   </body>
</html>

Related Tutorials