JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://github.com/highslide-software/highcharts.com/raw/resizing/js/highcharts.src.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 400px"></div>
JavaScript
$(function () {
$('#container').highcharts({
chart: {
type: 'column'
},
xAxis: {
categories: ['Total', 'Male', 'Female']
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
formatter: function() {
return this.y + "%";
}
}
},
bar: {
dataLabels: {
enabled: true
}
},
column: {
dataLabels: {
enabled: true
}
}
},
legend: {
layout: 'vertical',
borderWidth: 1,
backgroundColor: '#FFFFFF'
},
series: [
{
name: 'Yes',
data: [-53, -47, -49]},
{
name: 'No',
data: [-51, -46, -54]},
{
name: 'Not Sure',
data: [-37, -42, -41]}
]
});
});