Highcharts Demo

author(s): Torstein Hønsi

by Black Label

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src=https://code.highcharts.com/modules/drilldown.js></script>
<div id="highchart" style="height: 400px"></div>

JavaScript

var data = [{
      name: 'item 1',
      y: 1756,
      fontWeight: 'bold',

    }, {
      name: 'item 2',
      y: 512,
      fontWeight: 'bold',

    }, {
      name: 'item 3',
      y: 756,
      fontWeight: 'bold',

    },
    {
      name: 'item 4',
      y: 956,
      fontWeight: 'bold',

    }
  ]


  var colors = ['#a3cb38', '#ea2027', '#0652dd', '#ffc312'];
  var dataSum = data.reduce((a, x) => a + x.y, 0);
  Highcharts.chart('highchart', {
    chart: {
      type: 'bar',
      backgroundColor: null,
      height: 270,
      events: {
        load: function() {
          this.addSeries({
            data: [{
              x: 0,
              y: 1
            }, {
              x: 1,
              y: 1
            }, {
              x: 2,
              y: 1
            }, {
              x: 3,
              y: 1,
              dataLabels: {
                useHTML: true,
                formatter: function() {
                  var pcnt = (data[this.x].y / dataSum) * 100;
                  return '<span  class="" style="color:' + this.point.color + '">' + Highcharts.numberFormat(pcnt) + '%' + '</span> <span  class="">' + data[this.x].name + ' this i want put under the bar' + '</span>';
                }
              }
            }],
            enableMouseTracking: false
          }, true);
        }
      }
    },
    title: {
      text: ''
    },
    xAxis: {
      type: 'category',
      labels: {
        style: {
          width: '75px',
          'min-width': '75px',
          height: '42px',
          'min-height': '42px',
          align: 'high'
        },
        useHTML: true,
        formatter: function() {
          return '<div class="myToolTip" title="Hello">' + this.value + '</div>';
        },
      }
    },
    colors: colors,
    yAxis: {
      min: 0,
      gridLineWidth: 0,
      title: {
        text: ''
      },
      gridLineWidth: 0,
      labels: {
        enabled: false
      }
    },
    credits: {
      enabled: false
   ...