JSFiddle - React, Tailwind, and code Playground
by minagabriel
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: 400px; height: 400px; margin: 0 auto"></div>
JavaScript
$(document).ready(function() {
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'column'
},
title: {
text: 'TC REVIEW RESULT STATS'
},
xAxis: {
categories: ["i" ,"j" , "l"],
},
yAxis: {
min:0
},
legend: {
layout: 'vertical',
backgroundColor: '#FFFFFF',
align: 'left',
verticalAlign: 'top',
x: 50,
y: 35,
floating: true,
shadow: true
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: [ {
name: 'Approved',
data: [125,55,58],
pointStart: 0
//pointInterval
},
{
name: 'Unapproved',
data: [45,85,96],
pointStart: 0
//pointInterval
},
{
name: 'Cancelled',
data: [89,89,63],
pointStart: 0
//pointInterval
},
]
});
});