Search code examples
javascriptchartschart.jspapaparse

Chart.js - Draw bar chart with multiple labels


I am trying to draw a bar chart with chart.js that uses multiple labels so that I can manipulate them. I have managed to do it with a line chart and tried extending what I did there with no luck. I am getting this error. what could be causing it?

"Uncaught TypeError: Object.defineProperty called on non-object".

The issue is somewhere in the data: {} because when I had data as a simple 2 index array it was working fine.

edit: when stepping through dataset = null;

        var com_passed = rows[rows.length-2]["# Common Passed"];
        var com_failed = rows[rows.length-2]["# Common Failed"];
        var ctx = document.getElementById("common_chart");
        ctx.height = 50;

        var historicalChart = new Chart(ctx, {
            type: 'bar',
            data: {
                labels: ["Passed", "Failed"],
                datasets: [
                { 
                    data: com_passed,
                    label: "Passed",
                    fillColor: "red"
                },
                { 
                    data: com_failed,
                    label: "Failed",
                    fillColor: "green"                      
                }
                    ]
            },
                options: {
                    scales: {
                        yAxes: [{
                            ticks: {
                            beginAtZero:true,
                            responsive: false,
                            maintainAspectRatio: true
                            }
                        }]
                    }
                }
        });

Solution

  • for those having a similar issue. I needed to make the data com_passed and com_failed as an array instead of an integer like so.

        var com_passed = rows[rows.length-2]["# Common Passed"];
        var com_failed = rows[rows.length-2]["# Common Failed"];
        var ctx = document.getElementById("common_chart");
        ctx.height = 50;
    
        var historicalChart = new Chart(ctx, {
            type: 'bar',
            data: {
                labels: ["Passed", "Failed"],
                datasets: [
                { 
                    data: [com_passed],
                    label: "Passed",
                    fillColor: "red"
                },
                { 
                    data: [com_failed],
                    label: "Failed",
                    fillColor: "green"                      
                }
                    ]
            },
                options: {
                    scales: {
                        yAxes: [{
                            ticks: {
                            beginAtZero:true,
                            responsive: false,
                            maintainAspectRatio: true
                            }
                        }]
                    }
                }
        });