JSFiddle - React, Tailwind, and code Playground

by Kesav Telaprolu

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="height: 400px; margin: 0 auto"></div>

JavaScript

$(function() {

  //after resize adjust yAxes sizes
  (function(H) {
    H.wrap(H.Axis.prototype, 'setAxisSize', function(proceed) {
      //setAxisSize: function () {
      var pick = H.pick,
      	mathMax = Math.max,
      	chart = this.chart,
        options = this.options,
        offsetLeft = options.offsetLeft || 0,
        offsetRight = options.offsetRight || 0,
        horiz = this.horiz,
        width = pick(options.width, chart.plotWidth - offsetLeft + offsetRight),
        height = pick(options.height, chart.plotHeight),
        top = pick(options.top, chart.plotTop),
        left = pick(options.left, chart.plotLeft + offsetLeft),
        percentRegex = /%$/;

      // Check for percentage based input values
      if (percentRegex.test(height)) {
        height = parseFloat(height) / 100 * chart.plotHeight;
      }
      if (percentRegex.test(top)) {
        top = parseFloat(top) / 100 * chart.plotHeight + chart.plotTop;
      }
      //*********************************************************new code start
      if (percentRegex.test(width)) {
        width = parseFloat(width) / 100 * (chart.plotWidth - offsetLeft + offsetRight);
      }
      if (percentRegex.test(left)) {
        left = parseFloat(left) / 100 * chart.plotWidth + chart.plotLeft;
      }
      //*********************************************************end new code

      // Expose basic values to use in Series object and navigator
      this.left = left;
      this.top = top;
      this.width = width;
      this.height = height;
      this.bottom = chart.chartHeight - height - top;
      this.right = chart.chartWidth - width - left;

      // Direction agnostic properties
      this.len = mathMax(horiz ? width : height, 0); // mathMax fixes #905
      this.pos = horiz ? left : top; // distance from SVG origin
      //},
    });
  }(Highcharts));


  $('#container').highcharts({
    chart: {
      type: 'column'
    },
    yAxis: [{
      width: '33.33%',
      showLastLabel: false,
 ...