Chartjs-Vanilla js error "cannot set property of undefined" on the chrome console

by

2👍

✅

It looks like you were accessing the data wrong, I will include a link to the documentation. I have modified your snippet below (I don’t have a timer, but I have the code changing). Make sure you call update after changing the value so it will reflect in the HTML.

datasets is an array, so you need to access the index of the dataset you wish to modify. In your case, it is [0] as you only have one dataset.

ChartJs Documentation:
https://www.chartjs.org/docs/latest/developers/api.html

const dataPie = {

    labels: ['Good Packs', 'Bad Packs'],
    datasets: [{
        label: 'My First Dataset',
        data: [0.1, 0.1],
        backgroundColor: ['#00bf90', 'rgb(255, 75, 75)'],
        hoverOffset: 0
    }]
};

const configPie = {
    type: 'pie',
    data: dataPie,
    options: {}
};

const pieChart = new Chart(
    document.getElementById('chart-pie').getContext('2d'),
    configPie
);

pieChart.data.datasets[0].data[0] = 0.5;
pieChart.update('active');
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.7.1/dist/chart.min.js"></script>
<canvas id="chart-pie" width="400" height="400"></canvas>

Leave a comment