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'
    }]
  });
});