vanilla js error “cannot set property of undefined” on the chrome console

Hey I’m new to chartjs and js in general and keep getting the error “”cannot set property of undefined” on the chrome console

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'),
    configPie
);

then in a timed loop I’m calling this and getting the error “cannot set property of undefined” when trying to do the below operation (I’m not setting the value in html and it is only set when building the pie-chart at the top).

pieChart.data.datasets.data[0] = 0.5;

like I said I’m very new to js so if anyone can help that would be great!

Answer

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>