chart.html
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
const ctx = document.getElementById("myChart")
.getContext("2d");
const config = {
type : 'bar',
data : {
labels : ['A','B','C','D','E','F'],
datasets : [{
label : 'chart1',
data:[23, 96, 76, 34, 35, 89],
backgroundColor : [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
}
}
const myChart = new Chart(ctx, config);
const btn = document.querySelector('#btn');
btn.addEventListener('click', () => {
let data = config.data.datasets[0].data;
console.log(data);
for(let i=0; i<6; i++){
data[i] = Math.floor( Math.random() * 100 + 1);
}
myChart.update();
});
</script>