Highcharts Demo

author(s): Torstein Hønsi

by Arvind Pal

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="container" style="min-width: 310px; height: 400px;  "></div>

JavaScript

Highcharts.chart('container', {
  chart: {

    /* height: 300,  */
    type: 'column'
  },
  title: {
    text: 'User Inputs column chart'
  },
  xAxis: {
    title: {
      text: 'Score Level',
      y:-10
    },
    categories: ['1', '2', '3', '4', '5']
  },
  yAxis: {
    min: 0,
    tickInterval: 10,
    title: {
      text: 'User Inputs Count',
      x:10
    },
    stackLabels: {
      enabled: true,
      style: {
        fontWeight: 'bold',
        color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
      }
    }
  },
  legend: {

    align: 'center',
    x: 0,
    verticalAlign: 'bottom',
    y: 25,
    floating: true,
    backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white',
    borderColor: '#CCC',
    borderWidth: 1,
    shadow: false,
    labelFormatter: function(e) {
      console.log("this.userOptions.name ====>", this.userOptions.name);
      return '<br><span style="font-weight:normal">' + this.userOptions.name + '</span><br>';

    }
  },
  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: [{
    name: 'Mandory Inputs ps',
    data: [5, 3, 4, 7, 2]
  }, {
    name: 'Number Ps',
    data: [2, 2, 3, 2, 1]
  }, {
    name: 'Freeform Text',
    data: [3, 4, 4, 2, 5]
  }]
});
var a = "apcdeg"