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>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 400px; max-width: 600px; height: 400px; margin: 0 auto"></div>
JavaScript
$(function () {
$('#container').highcharts({
chart: {
polar: true,
type: 'line'
},
title: {
text: 'Budget vs spending',
},
pane: {
size: '80%'
},
xAxis: {
categories: ['Sales', 'Marketing', 'Development', 'Customer Support',
'Information Technology', 'Administration'],
tickmarkPlacement: 'on',
lineWidth: 0
},
yAxis: {
gridLineInterpolation: 'polygon',
lineWidth: 0,
min: 0,
max: 5,
labels: {
enabled: false,
}
},
plotOptions: {
series: {
dataLabels: {
enabled: true
},
events: {
mouseOver: function(event) {
$.each(this.data, function(i, point){
point.dataLabel.show();
});
},
mouseOut: function(event) {
$.each(this.data, function(i, point){
point.dataLabel.hide();
});
}
}
}
},
legend: {
align: 'center',
verticalAlign: 'bottom',
layout: 'vertical'
},
series: [{
name: 'Allocated Budget',
data: [1, 2, 1, 3, 4],
pointPlacement: 'on'
}, {
name: 'Actual Spending',
data: [3, 4, 5, 3, 2],
pointPlacement: 'on'
}]
}, function(chart) {
$.each(chart.series, function(i, series) {
$.each(series.data, function(i, point){
point.dataLabel.hide();
});
});
$('.highcharts-legend-item').hover(function(e) {
...