JSFiddle - React, Tailwind, and code Playground
by no1uknow
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; height: 400px; margin: 0 auto"></div>
JavaScript
$(function () {
$('#container').highcharts({
chart: {
height: 600,
type: 'column'
},
title: {
text: '05 - Task Card Failures (Wizard)'
},
xAxis: {
title: {
style: {
fontSize: '1.2em',
fontWeight: 'bold'
}
},
labels: {
style: {
fontSize: '1.2em',
fontWeight: 'bold',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
},
formatter: function() {
var val = String(this.value);
return val;
}
},
categories: ['MT 312-00-02', 'MT 312-00-03', '312-000-05-01', '320-001-01-01E', '320-001-01-01X']
},
yAxis: {
min: 0,
title: {
text: 'Total Task Cards',
style: {
fontSize: '1.2em',
fontWeight: 'bold'
}
},
stackLabels: {
enabled: true,
style: {
fontSize: '1.2em',
fontWeight: 'bold',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
}
}
},
legend: {
// align: 'right',
// x: -70,
// verticalAlign: 'top',
// y: 20,
// floating: true,
padding: 12,
style: {
fontSize: '1.2em'
},
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColorSolid)...