JSFiddle - React, Tailwind, and code Playground

by Ryan Brackett

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>

<div id="container1" style="min-width: 300px; height: 300px; margin: 0 auto"></div>

<div id="container2" style="min-width: 300px; height: 500px; margin: 0 auto"></div>

<div id="container3" style="min-width: 300px; height: 300px; margin: 0 auto"></div>

JavaScript

$(function () {
    $('#container1').highcharts({
        xAxis: {
            categories: ["A very long name for a category", "Averylongnamefocategory", "Aategory", "A ong name for a category", "A very long name for a category", "A very long name for a category"],
            labels: {
                enabled: true,
                rotation: -90,
               
                //align: "center"
            }
        },
        series: [{
            type: 'column',
            data: [2,1,2,3,4,3,4,3,4,2,3,4,3]
        }]
    });
    
     $('#container2').highcharts({
 xAxis: {
            categories: ["A very long name for a categoryfor a categoryfor a category", "Averylongnamefocategory", "Aategory", "A ong name for a category", "A very long name for a category", "A very long name for a category"],
            labels: {
                enabled: true,
                rotation: -90,
               
                //align: "center"
            }
        },
        series: [{
            type: 'column',
            data: [2,1,2,3,4,3,4,3,4,2,3,4,3]
        }]
    });
    
    
      $('#container3').highcharts({
 xAxis: {
            categories: ["A very long name for a category", "Averylongnamefocategory", "Aategory", "A ong name for a category", "A very long name for a category", "A very long name for a category"],
            labels: {
                enabled: true,
                rotation: -90,
                style: {
                    textOverflow: 'none'
                },
                //align: "center"
            }
        },
        series: [{
            type: 'column',
            data: [2,1,2,3,4,3,4,3,4,2,3,4,3]
        }]
    });
});