JSFiddle - React, Tailwind, and code Playground

by Geo George

HTML

<script src="http://github.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<div id="container" ></div>

CSS

@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed:300,400,700&display=swap');

JavaScript

$(function() {
		var chartcategories= [
    'Writing clearly and effectively',
    'Solving numerical problems',
    'Speaking clearly and effectively',
    'Breaking down information into basic elements',
    'Using computer technology',
    'Working well with others',
    'Acquiring new skills or knowledge on your own',
    'Think analytically and logically',
    ' Creativity',
     'Be an effective a leader',
     'Technical knowledge of major field of study',
      'Risk-taking',
      'Synthesize and integrate ideas and information',
       'Understanding of the problems facing my community'];
       
       var chartcategoriesa= [
    'aaa',
    'Solving numerical problems',
    'Speaking clearly and effectively',
    'Breaking down information into basic elements',
    'Using computer technology',
    'Working well with others',
    'Acquiring new skills or knowledge on your own',
    'Think analytically and logically',
    ' Creativity',
     'Be an effective a leader',
     'Technical knowledge of major field of study',
      'Risk-taking',
      'Synthesize and integrate ideas and information',
       'Understanding of the problems facing my community'];
    
    
  var c=$('#container').highcharts({
    chart: {
      type: 'column'
    },
    exporting: {
      allowHTML: true
    },
    xAxis: {
    categories: chartcategories ,
      type: 'category',
      labels: {
                useHTML:true,//set to true
                style:{
                    width:'50px',
                    whiteSpace:'normal'//set to normal
                },
                step: 1,
                formatter: function () {//use formatter
                    return '<span style="font-size:14px;font-family: Roboto Condensed;width:50px;font-family: Roboto Condensed;display:inline-block;word-wrap: break-word;word-break: break-all;width:50px;white-space: normal;overflow:hidden;">' + this.value + '</span>';
                }
            },

    },
        series: [{
        ...