JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.js"></script>
<canvas id="line-chart"></canvas>
<div>
<input type="button" value="Show Set 2" onclick="restoreLayer2()">
<input type="button" value="Hide Set 2" onclick="removeLayer2()">
</div>
<script>
lineChart = new Chart(document.getElementById("line-chart"), {
type: 'line',
data: {
labels: [
'10:00 AM',
'11:00 AM',
'12:00 PM',
'1:00 PM',
'2:00 PM',
'3:00 PM',
'4:00 PM',
'5:00 PM',
'6:00 PM',
'7:00 PM',
'8:00 PM',
'9:00 PM'
],
datasets: [{
label: 'Temperature',
data: [
74,
77,
80,
82,
86,
85,
83,
79,
72,
68,
66,
66
],
}, {
label: 'Humidity',
data: [
44,
44,
45,
45,
45,
46,
46,
46,
45,
44,
44,
44
],
}],
},
options: {
plugins: {
legend: {
display: false
}
}
}
});
function restoreLayer2(){
console.log(lineChart.getDataVisibility(1));
lineChart.setDatasetVisibility(1, true);
//lineChart.toggleDataVisibility(1);
//lineChart.setDatasetVisibility(1, !lineChart.getDataVisibility(1));
lineChart.update();
}
function removeLayer2() {
console.log(lineChart.getDataVisibility(1));
//
lineChart.toggleDataVisibility(1);
lineChart.setDatasetVisibility(1, lineChart.getDataVisibility(1));
...