Chartjs-Chart.js legend is undefined

by

0👍

✅

If your data.csv contains this type of value:

Year,Month,Country,Amount,Production
2019,6,Germany,139,level1
2019,4,Germany,111,level2
2019,2,Germany,70,level3
2019,5,Germany,69,level4
2019,6,Germany,67,level5
2019,3,Germany,65,level6
2019,1,Germany,61,level7
2019,1,Germany,39,level8
2019,1,Italy,1966,level9
2019,5,Italy,489,level10
2019,1,Italy,262,level11

then you should try this code. I think it will work.

<head>
    <meta charset="utf-8" />
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
</head>

<body>
    <canvas id="barchart" width="100%" height="40%"></canvas>
    <script>
        d3.csv("data.csv").then(makechart);

        function getRandomColorHex() {
            var hex = "0123456789ABCDEF",
                color = "#";
            for (var i = 1; i <= 6; i++) {
                color += hex[Math.floor(Math.random() * 16)];
            }
            return color;
        }

        function makechart(delivery) {
            var prd = [],
                amt = [],
                alldata = {};
            alldata['datasets'] = [];
            alldata['labels'] = ["labels"];
            delivery.forEach(element => {
                prd.push(element.Production);
                amt.push(element.Amount);

                var sample = {};
                sample['data'] = [element.Amount];
                sample['backgroundColor'] = getRandomColorHex();
                sample['label'] = element.Production;
                alldata['datasets'].push(sample);
            });

            //console.log(alldata['datasets'][0]['backgroundColor']);
            Chart.plugins.register({
                beforeDraw: function (c) {
                    var legends = c.legend.legendItems;
                    //console.log(legends);

                    legends.forEach(function (e,ind) {
                        e.fillStyle = alldata['datasets'][ind]['backgroundColor'];
                    });
                }
            });
            var barchart = new Chart('barchart', {
                type: 'bar', //alldata,
                data:alldata,
                //  {
                //     labels: prd,
                //     datasets: [{
                //         backgroundColor: getRandomColorHex(),
                //         data: amt,
                //         label: 'level1',
                //         fillStyle: '#07C'
                //     }]
                // },

                options: {
                    responsive: true,
                    legend: {
                        position: 'left',
                        fillStyle: getRandomColorHex()
                    },


                    title: {
                        display: true,
                        text: 'Example chart'
                    }
                }
            });
        }
    </script>

</body>

</html>

Leave a comment