JSFiddle - React, Tailwind, and code Playground
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>
<button id="btn">Show/Hide</button>
JavaScript
$(function () {
var chart;
$(document).ready(function () {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'line'
},
title: {
text: 'Monthly Average Temperature'
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
useHTML: true,
formatter: function () {
return '<div class="datalabel">' + this.y + '</div>';
}
}
}
},
series: [{
data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
}]
}, function (chart) {
$('#btn').toggle(function () {
$('.datalabel').hide();
}, function () {
$('.datalabel').show();
});
});
});
});