JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://github.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
JavaScript
$(function () {
var o = {
"colors": [
"#00AEEF"],
"credits": {
"enabled": false
},
"chart": {
"type": "bar",
"renderTo": "container"
},
"tooltip": {},
"plotOptions": {
"column": {
"pointPadding": 0.2,
"borderWidth": 0
},
"series": {
"borderWidth": 0,
"dataLabels": {
"enabled": true,
"format": "{point.y:.1f}%"
}
}
},
"series": [{
"showInLegend": false,
"data": [
[
"this is a pretty long label <br/>that will most likely cause the next<br/> row not to appear",
70],
[
"this is a pretty long label <br/>that will most likely cause the next<br/> row not to appear",
62.5],
[
"this is a pretty long label <br/>that will most likely cause the next<br/> row not to appear",
41.25],
[
"this is a pretty long label <br/>that will most likely cause the next<br/> row not to appear",
26.25],
[
"this is a pretty long label <br/>that will most likely cause the next<br/> row not to appear",
18.75],
[
"this is a pretty long label <br/>that will most likely cause the next<br/> row not to appear",
11.25],
[
"this is a pretty long label <br/>that will most likely cause the next<br/> row not to appear",
7.5],
[
"this is a pretty long label <br/>that will most likely cause the next<br/> row not to appear",
3.75],
...