Highcharts Demo

author(s): Torstein Hønsi

by Mahfuz Ahmed

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-3d.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="height: 400px"></div>

CSS

#container {
    height: 400px; 
    min-width: 310px; 
    max-width: 800px;
    margin: 0 auto;
}

JavaScript

$(function () {
    $('#container').highcharts({
        chart: {
            type: 'column',
            options3d: {
                enabled: true,
                alpha: 10,
                beta: 5,
                viewDistance: 15,
                depth: 20
            }
        },

        title: {
            text: 'Incoming and outgoing call duration for top 10 partenrs'
        },

        xAxis: {
            categories: ['Roots', 'Bangla Tel', 'Mir Telecome', 'Tele-Exchange', 'Paradise']
        },

        yAxis: {
            allowDecimals: false,
            min: 0,
            title: {
                text: 'Call Duration'
            }
        },

        tooltip: {
            headerFormat: '<b>{point.key}</b><br>',
            pointFormat: '<span style="color:{series.color}">\u25CF</span> {series.name}: {point.y}'
        },

        plotOptions: {
            column: {
                stacking: 'normal',
                depth: 40
            }
        },

        series: [{
            name: 'Incoming',
            data: [66665, 36666, 6664, 7666, 26666],
            stack: 'Incoming',
            color: 'green' 
        }, {
            name: 'Outgoing',
            data: [45666, 66660, 66664, 46666, 36666],
            stack: 'Outgoing',
            color: 'red' 
        }]
    });
});