JSFiddle - React, Tailwind, and code Playground

by Rajesh Danabal

HTML

<script src="https://code.highcharts.com/3.0.1/highcharts.src.js"></script>

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

JavaScript

$(function() {
  $('#container').highcharts({
    chart: {
      type: 'column',
      inverted: true
    },
    title: {
      text: 'Stacked column chart'
    },
    xAxis: {
      categories: ['123456789123456789123456789', '123456789123456789123456789', '123456789123456789123456789', '123456789123456789123456789', '123456789123456789123456789'],
      labels: {
        formatter: function() {
          var ret = this.value,
            len = ret.length;
          console.log("this", this);

          var containerWidth = this.chart.containerWidth;
          console.log("containerWidth", containerWidth);

          var categoriesCount = this.axis.categories.length;

          var labelWidth = containerWidth / categoriesCount;

          console.log("labelWidth", labelWidth);

					var labelLength = Math.ceil(labelWidth / 12);
          
          console.log("labelLength", labelLength);

					var label1 = (this.value.substr(0, labelLength));
					var label2 = (this.value.substr(labelLength, labelLength));
          
          console.log("label", label1+"<br/>"+label2, " --- ");




          if (len > 10) {
            ret = ret.slice(0, 10) + '<br/>' + ret.slice(10, len);
          }

          if (len > 25) {
            ret = ret.slice(0, 25) + '...';
          }

          console.log(ret, len);
          return label1+"<br/>"+label2;
        }
      }
    },
    yAxis: {
      min: 0,
      title: {
        text: 'Total fruit consumption'
      },
      stackLabels: {
        enabled: true,
        style: {
          fontWeight: 'bold',
          color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
        }
      }
    },
    legend: {
      align: 'right',
      x: -30,
      verticalAlign: 'top',
      y: 25,
      floating: true,
      backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white',
      borderColor: '#CCC',
      borderWidth: 1,
      shadow: false
    },
    tooltip: {
      headerFormat:...