JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; max-width: 800px; height:200px; margin: 0 auto"></div>
CSS
.highcharts-axis-labels span {
word-wrap:break-word!important;
}
JavaScript
$(function () {
$('#container').highcharts({
chart: {
marginLeft:200,
type: 'bar'
},
title: {
text: 'Historic World Population by Region'
},
subtitle: {
text: 'Source: Wikipedia.org'
},
xAxis: {
categories: ['somsdfsdfsdfsdsdsdfsdfsdfsfsdfsfsdfsdfsdfsdf ', 'Asia', 'Europe', 'Oceania'],
labels: {
useHTML: true,
style: {
// width: '200px'
}
},
title: {
text: null
}
},
yAxis: {
min: 0,
max: 6,
title: {
text: '',
align: 'high'
},
opposite: false,
tickmarkPlacement: 'on',
tickColor: '#989898',
tickWidth: 1,
tickLength: 60,
tickPositions: [0, 1, 2, 3, 4, 5, 6],
gridLineColor: '#EBEBEB',
title: {
text: null,
align: 'high'
},
showFirstLabel: true,
labels: {
useHTML: true,
style: {
color: 'black', padding: '0px', align: 'right', wordWrap: 'break-word'
},
overflow: 'none',
x: 26,
y: -10,
formatter: function () {
var x = this.value;
if (x < 1)
return '<span style="font-size:10px; font-family: arial;">Very<br/>Low</span>';
else if (x < 2)
return '<span style="font-size:10px; font-family: arial;">Low</span>';
else if (x < 3)
return '<span style="font-size:10px;...