JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="results" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
JavaScript
// Initialize the chart when the document loads.
$(document).ready(function () {
$('#results').highcharts({
chart: {
type: 'bar'
},
title: {
text: ''
},
xAxis: [{
categories: ['Injustice: Gods Among Us ★', 'Tekken Tag Tournament 2 ★', 'Super Smash Bros. Melee ★', 'Persona 4 Arena', 'King of Fighters XIII', 'Dead or Alive 5 Ultimate', 'Street Fighter X Tekken Ver. 2013', 'Soulcalibur V'],
}],
yAxis: {
allowDecimals: false,
title: {
text: 'Votes'
}
},
series: [{
data: [{
y: 1426,
color: '#29A329'
}, {
y: 823,
color: '#29A329'
}, {
y: 462,
color: '#29A329'
}, {
y: 305,
color: '#CC0000'
}, {
y: 181,
color: '#CC0000'
}, {
y: 148,
color: '#CC0000'
}, {
y: 127,
color: '#CC0000'
}, {
y: 115,
color: '#CC0000'
}],
dataLabels: {
color: '#FFFFFF',
enabled: true,
inside: true
},
showInLegend: false,
name: 'Votes'
}]
});
});