Stacked Bar Horizontal Style

by bizamajig

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>



<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>

JavaScript

$(function () {
    var chart;

    $(document).ready(function() {

        chart = new Highcharts.Chart({

            chart: {

                renderTo: 'container',

                type: 'pie'

            },

            title: {

                text: 'Stacked bar chart'

            },

            xAxis: {

                categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']

            },

            yAxis: {

                min: 0,

                title: {

                    text: 'Total fruit consumption'

                }

   

            },

            legend: {

               align: 'right',
            x: -100,
            verticalAlign: 'top',
            y: 20,
            floating: true,
            backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColorSolid) || 'white',
            borderColor: '#CCC',
            borderWidth: 1,
            shadow: false

            },

            tooltip: {

              formatter: function() {
                return '<b>'+ this.series.name +'</b><br/>'+
                    this.y +'<br/>'+
                    'Total: '+ this.point.stackTotal;
            }

            },


                series: [
               {

                name: 'John',

                data: [5, 3, 4, 7, 2]

            }]

        });

    });

    
});