JSFiddle - React, Tailwind, and code Playground
by JoeKuan
HTML
<script type="text/javascript" src="http://code.highcharts.com/highcharts.js"></script>
<script type="text/javascript" src="http://code.highcharts.com/highcharts-more.js"></script>
<body>
<div id="container"></div>
</body>
JavaScript
$(document).ready(function() {
document.title = "Highcharts " + Highcharts.version;
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
defaultSeriesType: 'gauge'
},
title: {
text: "The 'fx' and 'fy' features may not look correct under Chrome and Safari. If so, try with Firefox. It should work"
},
credits: {
enabled: false
},
yAxis: {
min: 0,
max: 2,
allowDecimals: false,
labels: {
rotation: 'auto',
formatter: function() {
switch(this.value) {
case 0:
//return '<span style="font-size:20;color:#CAE6F1">Good</span>';
return 'Good';
case 1:
// return '<span style="font-size:20">Bad</span>';
return 'Bad';
case 2:
return 'Ugly';
}
},
style: {
fontFamily: 'Courgette',
fontSize: 16,
color: '#8C8C8C', //'#CAE6F1'
}
},
lineWidth: 0,
minorTickLength: 0,
tickLength: 0,
offset: 5
},
pane: {
startAngle: -60,
endAngle: 60,
background: [{
//backgroundColor: '#004A97',
backgroundColor: {
radialGradient: {
cx: 0.5,
cy: 0.7,
...