Is there a way to toggle the visibility of specific year columns in a chart using checkboxes? I've tried using the .hide() method but it doesn't seem to work for individual data points within the series. For example, I want to hide the 2018 column when unchecking the corresponding checkbox.
function createChart(DamageCount18, DamageCount19, DamageCount20, DamageCount21) {
console.log('DOM fully loaded and parsed');
const barchart = Highcharts.chart('barchart', {
chart: {
type: 'column'
},
title: {
text: 'Member DATA'
},
xAxis: {
categories: ['2018', '2019', '2020', '2021']
},
yAxis: {
title: {
text: 'Damages'
}
},
series: [{
data: [400, 150, 455, 300]
}]
});
radioButtons(barchart);
}
createChart();
function radioButtons(chart, barchart) {
document.getElementById('2018').addEventListener('click', e => {
let barSeries = barchart.series[0].options.data[0]
console.log(barSeries)
barSeries.hide();
})
} #container {
width: 100%;
height: 400px;
}
#barchart {
width: 100%;
height: 400px;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<link rel="stylesheet" href="index.css">
<title>First Highchart</title>
</head>
<body>
<div id='barchart'></div>
<input type="checkbox" id="2018" name="2018" value="2018" checked>
<label for="2018">2018</label><br>
<input type="checkbox" id="2019" name="2019" value="2019" checked>
<label for="2019">2019</label><br>
<input type="checkbox" id="2020" name="2020" value="2020" checked>
<label for="2020">2020</label><br>
<input type="checkbox" id="2021" name="2021" value="2021" checked>
<label for="2021">2021</label><br>
<script src="index.js"></script>
</body>
</html>The issue I'm running into is that .hide() doesn't seem to work for individual data points within the series.