JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/highcharts-more.js"></script>
<div id="targetChart"></div>
JavaScript
$('#targetChart').highcharts({
xAxis: {
categories: ['Day', 'Week', 'Month', 'Qtr', 'Year'],
labels:
{
//enabled: false
}
},
chart: {
type: 'column',
backgroundColor: '#2f3640',
style: {
fontFamily: "inherit"
},
height: 380,
margin: 65,
events: {
load: function() {
}
}
},
legend: {
enabled: false
},
title: {
text: null
},
subtitle: {
text: null
},
plotOptions: {
column: {
borderWidth: 0
}
},
yAxis: {
title: {
text: 'Margin'
}
},
tooltip: {
formatter: function() {
return this.series.name + ' margin: ' + kendo.toString(this.y, 'c2')
}
},
series: [{"name":"Target","color":"#85D6FF","data":[272.73,545.46,4636.41,4636.41,4636.41]},{"name":"Day","data":[{"y":4999.66,"color":"#63D654"}]},{"name":"Week","data":[0,{"y":11440.79,"color":"#63D654"}]},{"name":"Month","data":[0,0,{"y":150740.06,"color":"#63D654"}]},{"name":"Qtr","data":[0,0,0,{"y":150740.06,"color":"#63D654"}]},{"name":"Year","data":[0,0,0,0,{"y":150740.06,"color":"#63D654"}]}]
});