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; max-width: 800px; height: 400px; margin: 0 auto"></div>

JavaScript

Highcharts.chart('container', {
  chart: {
    type: 'column'
  },
  title: {
    text: ' '
  },
  xAxis: {
    categories: ['skills', "DM Actions", "Community", ],
    title: {
      text: "<b>Event Category</b>"
    }
  },
  yAxis: {
    gridLineWidth: 0,
    min: 0,
    title: {
      text: '<b>Total User<b>',
      /* align: 'high' */
    },
    labels: {
      format: ' '
    },
  },
  tooltip: {
    valueSuffix: ''
  },
  plotOptions: {
    column: {
      dataLabels: {
        enabled: true
      }
    }
  },
  tooltip: {
    headerFormat: '<b>{series.name}</b><br><b>{point.x}: </b>{point.y}<br>',
    pointFormatter: function() {

      return ``
    }
  },
  legend: {
    enabled: false
  },
  credits: {
    enabled: false
  },
  series: [{
    name: "Event Category",
    data: [{
      y: 1107,
      color: "red"
    }, {
      y: 3121,
      color: "blue"
    }, {
      y: 2398,
      color: "green"
    }]
  }]
});