sizing bars in a Grouped and stacked bar charts - Javascript highcharts

Javascript examples for highcharts:Stack Chart

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

Description

sizing bars in a Grouped and stacked 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="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
      <script type="text/javascript">
$(function () {/*from  ww w. j a va  2  s .c  o  m*/
    $('#container').highcharts({
        chart: {
            type: 'bar'
        },
        plotOptions: {
            series: {
                //grouping: false,
                stacking: 'normal',
                pointPadding: 0.2,
                allowPointSelect: true,
                states: {
                    select: {
                        color: null,
                        borderWidth: 5,
                        borderColor: 'Blue'
                    }
                }
            }
        },
        title: {
            text: 'Aggregate count of Happiness infusions by Manufacture'
        },
        xAxis: {
            categories: ['Toyota', 'Honda'] //['Prius', 'Corolla', 'Civic', 'Accord']
        },
        yAxis: {
            min: 0,
            stackLabels: {
                style: {
                    color: 'black'
                },
                enabled: true,
                formatter: function () {
                    return this.stack;
                }
            }
        },
        legend: {
            //enabled: false
        },
        credits: {
            enabled: false
        },
        series: [{
            name: 'Happy',
            id: 'Happy',
            stack: 'Corolla',
            color: 'blue',
            data: [20, 30],
        }, {
            id: 'Unhappy',
            name: 'Unhappy',
            stack: 'Corolla',
            color: 'black',
            data: [10, 30],
        }, {
            linkedTo: 'Happy',
            stack: 'Prius',
            color: 'blue',
            data: [30, 30],
        }, {
            linkedTo: 'Unhappy',
            stack: 'Prius',
            data: [30, 30],
            color: 'black',
        }, {
            linkedTo: 'Happy',
            stack: 'Highlander',
            color: 'black',
            data: [30],
        }]
    });
});

      </script> 
   </head> 
   <body> 
      <div id="container" style="height: 400px"></div> 
      <script src="http://github.highcharts.com/highcharts.js"></script>  
   </body>
</html>

Related Tutorials