Chart.js Line graph legend yields error: Uncaught TypeError: Cannot read property '0' of undefined

by

👍:1

Upd.4

I have tasted it on my computed as static html-file. Can you create on your computer index.html and put to it this code?

<html>
    <body>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.js"></script>
        <canvas id="myChart" width="400" height="400"></canvas>
        <script>
        function renderChart(data, labels){
            var ctx = document.getElementById('myChart').getContext('2d');
            var dsets = [];
            var keys = Object.keys(data);
            console.log(data);
            for (var i=0; i<keys.length; i++){
                var dset = {
                    label: keys[i],
                    data: data[keys[i]],
                    borderColor: '#'+(Math.random()*0xFFFFFF<<0).toString(16),
                    borderCapStyle: 'butt',
                }
                dsets.push(dset);
            }

            var myChart = new Chart(ctx, {
                type: 'line',
                data: {
                    labels: labels,
                    datasets: dsets,
                },
                options: {
                    scales: {
                        yAxes: [{
                            ticks: {
                                beginAtZero: true
                            }
                        }]
                    }
                }
            });
        }       

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

        var data = {
            Writer: [10.5, 4, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
            Editor: [16, 0, 7, 0, 0, 0, 0, 0, 0, 0, 0, 0],
            Publisher: [0, 4, 7, 0, 0, 0, 0, 0, 0, 0, 0, 0],
            QualityController: [0, 0, 0, 0, 5, 0, 0, 0, 0, 0, 0, 0],        
        };
        var labels = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];

        renderChart(data, labels);      

        </script>           
    </body>
</html>

Leave a comment