JSFiddle - React, Tailwind, and code Playground

by core972

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container"></div>

JavaScript

var categories = [
  '48-51', '51-54', '57-60', '60-63',
  '63-66'
],
oppositecategories = [];
Highcharts.chart('container', {
  chart: {
    type: 'bar'
  },
  title: {
    text: 'Headcount and Hires Age Distribution'
  },
  subtitle: {
    text: 'Lorem Ipsum'
  },
  xAxis: [{
    categories: categories,
    reversed: false,
    labels: {
      step: 1
    }
  }, { // mirror axis on right side
    opposite: true,
    reversed: false,
    categories: categories,
    linkedTo: 0,
    labels: {
      step: 1
    }
  }],
  yAxis: [{
      title: {
        text: null
      },
      tickInterval:0.1,
      labels: {
        formatter: function() {
        	console.log(this);
          if(this.value < 0 && this.value % 0.5 === 0){
          	return Math.abs(this.value) + 'K';
          } else if(this.value > 0){
          	return Math.abs(this.value) + 'K';
          } else if (this.value === 0) {
          	return 0;
          }
          return false;
        },
        y: 10
      }
    },
    {
      title: {
        text: null
      },
      /*labels: {
        step: 100,
        y: 100
      }*/
    }
  ],
  plotOptions: {
    series: {
      stacking: 'normal'
    }
  },

  tooltip: {
    formatter: function() {
      return '<b>' + this.series.name + ', age ' + this.point.category + '</b><br/>' +
        'Population: ' + Highcharts.numberFormat(Math.abs(this.point.y * 1000), 0);
    }
  },

  series: [{
    name: 'Current HC',
    data: [-2.132, -1.387, -1.121, -1.479, -1.239]
  }, {
    name: 'Hires(4Q)',
    data: [
      1.17, 1.72, 1.36, 1.03, 1.21
    ]
  }]
});