How to toggle datasets with a button in Chart.JS 3

Nice and simple solution - thank you.

I understand what you did here but I am trying to do something similar but having variables instead of extra data in the const data. But I can'e get mine to work at all. I think I am missing something.


numbersGraph.addEventListener('click', function() {
xAxis = eventsData.numbers.map(el => el.x)
yAxis = eventsData.numbers.map(el => el.y)
myChart.update();
console.log('clicked')
})

// Chart info

let xAxis = eventsData.cards.map(el => el.x)
let yAxis = eventsData.cards.map(el => el.y)
let lastYValue = yAxis.length -1

let labels = xAxis

const data = {
labels: labels,
datasets: [{
label: 'My First dataset',
backgroundColor: ['rgb(255, 99, 132)', 'blue', 'yellow'],
borderColor: 'teal',
data: yAxis,
borderWidth: 5
}
]
};

const config = {
type: 'line',
data: data,
options: {
scales: {
x: {
title: {
display: true,
text: "Trials"
}
},
y: {
title: {
display: true,
text: eventType[0],
}
}
}
}
};

const myChart = new Chart(
document.getElementById('myChart'),
config
);

When I click the numbers button, the console.log appears but nothing happens with the graph or anything. I thought this could work but for some reason the data is not updating and I have no clue why. The plan is to have all the data as json so I am trying to test it out small first but it is not working. Any help would be great!

Great video, do you know if Chart.JS has a similar command to hide the dataset from legend when not showing? I was hoping myChart.plugins.legend.hide(value) would work, but no luck!