Highcharts Demo

author(s): Torstein Hønsi

by Korah Babu Varghese

HTML

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

<div id='html2'>

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

JavaScript

var t = [
  [1, 2, 3],
  [4, 5],
  [7, 8, 9],
  [7, 8, 9, 8],
  [7]
];

var hello = [];
for (var i = 0; i < t.length; i++) {
  for (var j = 0; j <= i; j++) {
    var temp = t[i][j] ? t[i][j] : 0;
    t[i][j] = t[j][i] ? t[j][i] : 0;
    t[j][i] = temp ? temp : 0;

  }
  hello.push({
    name: i,
    data: t[i]
  });
}
console.log(t)
document.getElementById('html2').innerHTML = JSON.stringify(hello);

Highcharts.chart('container', {
  chart: {
    type: 'column'
  },
  title: {
    text: 'Stacked column chart'
  },
  xAxis: {
    categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
  },
  yAxis: {
    min: 0,
    title: {
      text: 'Total fruit consumption'
    },
    stackLabels: {
      enabled: true,
      style: {
        fontWeight: 'bold',
        color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
      }
    }
  },
  legend: {
    align: 'right',
    x: -30,
    verticalAlign: 'top',
    y: 25,
    floating: true,
    backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white',
    borderColor: '#CCC',
    borderWidth: 1,
    shadow: false
  },
  tooltip: {
    headerFormat: '<b>{point.x}</b><br/>',
    pointFormat: '{series.name}: {point.y}<br/>Total: {point.stackTotal}'
  },
  plotOptions: {
    column: {
      stacking: 'normal',
      dataLabels: {
        enabled: true,
        color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
      }
    }
  },
  series: hello
});