Highcharts Demo

author(s): Torstein Hønsi

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}],
                enableMouseTracking: false,
                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>';
                  }}
          }, 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
    },
    legend: {
      enabled: false
    },
    plotOptions: {
      series: {
        borderWidth: 0,
      ...