create three bar charts - Javascript highcharts

Javascript examples for highcharts:Bar Chart

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

Description

create three bar charts

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <title>Highcharts Demo</title> 
      <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">
$(function () {//from   ww w. jav  a2s .  c  om
     $('#containerAll').highcharts({
        chart:{
            type: 'bar'
        },
        series: [
            {
            name: 'Male',
            data: [{"name":"58.1%","y":0.581}, {"name":"18.1%","y":0.181}]
        },
            {
                name: 'Female',
                data: [{"name":"58.5%","y":0.585}, {"name":"28.5%","y":0.285}]
            }
        ],
        xAxis: {
            categories: ['Short Name', 'Much Longer Location Name'],
             labels: {
                style: {
                    width: '100px',
                    'min-width': '100px'
                },
                useHTML : true
            }
        }
    });
    $('#container1').highcharts({
        chart:{
            type: 'bar'
        },
        series: [
            {
            name: 'Male',
            data: [{"name":"58.1%","y":0.581}]
        },
            {
                name: 'Female',
                data: [{"name":"58.5%","y":0.585}]
            }
        ],
        xAxis: {
            categories: ['Short Name'],
            labels: {
                style: {
                    width: '100px',
                    'min-width': '100px'
                },
                useHTML : true
            }
        }
    });
     $('#container2').highcharts({
        chart:{
            type: 'bar'
        },
        series: [
            {
            name: 'Male',
            data: [{"name":"18.1%","y":0.181}]
        },
            {
                name: 'Female',
                data: [{"name":"28.5%","y":0.285}]
            }
        ],
        xAxis: {
            categories: ['Much Longer Location Name'],
            labels: {
                align: 'right',
                style: {
                    width: '100px',
                    'min-width': '100px'
                },
                useHTML : true
            }
        }
    });
});

      </script> 
   </head> 
   <body> 
      <script src="https://code.highcharts.com/highcharts.js"></script> 
      <div id="containerAll" style="height: 400px"></div> 
      <div id="container1" style="height: 400px"></div> 
      <div id="container2" style="height: 400px"></div>  
   </body>
</html>

Related Tutorials