Chart.js updating data

Question

I want to add to my chart setTimeout function to updated data. Have code listed below but console is saying Uncaught TypeError: Cannot read property 'data' of undefined" how to acces data array? and put my mew values? error is logging at the end of this code. in var ChartLine. Or maybe if you have any other idea how to update dynamically data please share your answer

 var ctx = document.getElementById('chart').getContext("2d");

    var myChart = new Chart(ctx, {
        type: 'line',
        data: {
            labels: ["JAN", "FEB", "MAR", "APR", "MAY", "JUN", "JUL"],
            datasets: [{
                label: "Data",
                borderColor: gradientStroke,
                pointBorderColor: gradientStroke,
                pointBackgroundColor: gradientStroke,
                pointHoverBackgroundColor: gradientStroke,
                pointHoverBorderColor: gradientStroke,
                pointBorderWidth: 5,
                pointHoverRadius: 5,
                pointHoverBorderWidth: 1,
                pointRadius: 3,
                fill: true,
                backgroundColor: gradientFill,
                borderWidth: 2,
                data: [50, 80, 130, 65, 100, 66, 86],
            }]
        },
        options: {
            legend: {
                position: "top"
            },
            scales: {
                yAxes: [{
                    ticks: {
                        fontColor: "rgba(255,255,255,0.5)",
                        fontStyle: "bold",
                        beginAtZero: true,
                        maxTicksLimit: 5,
                        padding: 20
                    },
                    gridLines: {
                        drawTicks: false,
                        display: false
                    }

                }],
                xAxes: [{
                    gridLines: {
                        zeroLineColor: "rgba(255,255,255,0.5)"
                    },
                    ticks: {
                        padding: 20,
                        fontColor: "rgba(255,255,255,0.5)",
                        fontStyle: "bold"
                    }
                }]
            }
        }
    });

   setTimeout(function addData(chart, label, data) {
        chart.data.labels.push(label);
        chart.data.datasets.forEach((dataset) => {
            dataset.data.push([45, 45, 45, 15, 3]);
        });
        chart.update();
    }, 2000);

thanks you for any help

ɢʀᴜɴᴛ ɢʀᴜɴᴛ · Accepted Answer · 2017-09-06T14:12:32

You should be updating the chart data as follows :

setTimeout(function() {
   addData(myChart, [45, 50, 30, 34, 61, 53, 42], 0);
}, 2000);

function addData(chart, data, datasetIndex) {
   chart.data.datasets[datasetIndex].data = data;
   chart.update();
}

Working Example

var gradientStroke = 'rgba(0, 119, 220, 0.6)',
    gradientFill = 'rgba(0, 119, 220, 0.4)';

var ctx = document.getElementById('chart').getContext("2d");

var myChart = new Chart(ctx, {
   type: 'line',
   data: {
      labels: ["JAN", "FEB", "MAR", "APR", "MAY", "JUN", "JUL"],
      datasets: [{
         label: "Data",
         borderColor: gradientStroke,
         pointBorderColor: gradientStroke,
         pointBackgroundColor: gradientStroke,
         pointHoverBackgroundColor: gradientStroke,
         pointHoverBorderColor: gradientStroke,
         pointBorderWidth: 5,
         pointHoverRadius: 5,
         pointHoverBorderWidth: 1,
         pointRadius: 3,
         fill: true,
         backgroundColor: gradientFill,
         borderWidth: 2,
         data: [50, 80, 130, 65, 100, 66, 86],
      }]
   },
   options: {
      responsive: false,
      legend: {
         position: "top"
      },
      scales: {
         yAxes: [{
            ticks: {
               fontColor: "rgba(255,255,255,0.5)",
               fontStyle: "bold",
               beginAtZero: true,
               maxTicksLimit: 5,
               padding: 20
            },
            gridLines: {
               drawTicks: false,
               display: false
            }

         }],
         xAxes: [{
            gridLines: {
               zeroLineColor: "rgba(255,255,255,0.5)"
            },
            ticks: {
               padding: 20,
               fontColor: "rgba(255,255,255,0.5)",
               fontStyle: "bold"
            }
         }]
      }
   }
});


setTimeout(function() {
   addData(myChart, [45, 50, 30, 34, 61, 53, 42], 0);
}, 2000);

function addData(chart, data, datasetIndex) {
   chart.data.datasets[datasetIndex].data = data;
   chart.update();
}

* { background: #111 }

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<canvas id="chart" width="350" height="200"></canvas>

Chart.js updating data

1 Answers