JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="impact" style="height: 300px"></div>
JavaScript
// JavaScript Document
$(function () {
Highcharts.setOptions({
colors: ['#67c7f8', '#cc0000', '#8bba00', '#f6bd0f', '#cc33ff', '#cccccc', '#ffff33', '#CCFF99']
});
//** IMPACT REPORT *//
var chart;
// Impact Chart
chart = new Highcharts.Chart({
chart: {
renderTo: 'impact',
type: 'column',
margin: [0, 0, 0, 0],
spacingTop: 0,
spacingBottom: 0,
spacingLeft: 0,
spacingRight: 0,
backgroundColor: null,
events: {
load: function (event) {
console.log(this);
}
}
},
exporting: {
buttons: {
exportButton: {
enabled:false
},
printButton: {
enabled:false
}
}
},
credits: {
enabled: false
},
title: {
text: ''
},
subtitle: {
text: ''
},
xAxis: {
categories: ['Reporting Year']
},
yAxis: {
min: 0,
title: {
text: 'Millions (mm)'
}
},
legend: {
enabled:true,
layout: 'vertical',
backgroundColor: '#FFFFFF',
align: 'left',
verticalAlign: 'top',
x: 50,
y: 30,
floating: true,
shadow: true
},
tooltip: {
formatter: function () {
return '' + this.x + ': ' + this.y + ' mm';
}
},
plotOptions: {
column: {
pointPadding: 0.2,
size: '95%',
borderWidth: 0
},
point: {
events: {
legendItemClick: function () {
return false; // <== returning false will cancel the...