Highcharts Demo

author(s): Torstein Hønsi

HTML

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

<div id="ChartContainer2"></div>

CSS

#ChartContainer2 {
    height:100%;
    width:100%;
    position:absolute;
}

JavaScript

/*

    Notice the height is NOT set

*/

 $(function ()
    {

        Highcharts.Chart.prototype.is3d = function ()
        {
            return this.options.chart.options3d && this.options.chart.options3d.enabled; // #4280
        };


        $('#ChartContainer2').highcharts({

            chart: {
                type: 'bar',
                options3d: {
                    enabled: true,
                    alpha: 15,
                    beta: 15,
                    viewDistance: 0,
                    depth: 70
                },
                marginTop: 120,
                marginBottom: 120
            },
            title: {
                text: 'Stacked bar chart'
            },
            xAxis: {
                categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
            },
            yAxis: {
                min: 0,
                title: {
                    text: 'Total fruit consumption'
                }
            },
            legend: {
                reversed: true
            },

            plotOptions: {
                series: {
                    stacking: 'normal',
                    pointWidth: 30//width of the column bars irrespective of the chart size
                },
                bar: {
                    depth: 50,
                    height:50,
                    cursor: 'pointer',
                    point: {
                        events: {
                            click: function ()
                            {
                                var drilldown = this.drilldown;
                                if (drilldown)
                                { // drill down
                                    //alert(drilldown.TaskID + ' ' + drilldown.name);
                                    $("#PacingModal").modal('show');
                                }
                            }
                        }
                    },
                    dataLabels: {
                       ...