[Chartjs]-Chart.js legend text showing undefined

by

16👍

✅

Try this one 🙂

   Charts.prototype.initBarHorizontal = function () {
    var ctxD = $("#barChartHDark"), chartData = {
    type: 'horizontalBar',
    data: {
        labels: ["Today", "Last week", "Last month", "Last Year"],
        datasets: [{
                label: 'Something1',
                data: [7, 59, 68, 26],
                backgroundColor: this.colors[0],
                hoverBackgroundColor: this.convertHex(this.colors[0], 70),
            },
            {
                label: 'Something2',
                data: [, 23, 44, 30],
                backgroundColor: this.colors[1],
                hoverBackgroundColor: this.convertHex(this.colors[1], 70),
},
            {
                label: 'Something3',
                data: [, 3, -7, 1],
                backgroundColor: this.colors[2],
                hoverBackgroundColor: this.convertHex(this.colors[2], 70),
            }]
    },
    options: {
        barThickness: 1,
        scales: {
            xAxes: [{
                    stacked: true,
                    ticks: {
                        fontColor: this.tickColor
                    },
                    gridLines: {
                        drawOnChartArea: false
                    }
                }],
            yAxes: [{
                    stacked: true,
                    ticks: {
                        fontColor: this.tickColor,
                        min: 0,
                        max: 175,
                        stepSize: 25
                    }
                }]
        },
        labels: ['Current data','Vs last week/month/year','Change'],
        name: ['Current data','Vs last week/month/year','Change'],
        legend: {
            display: true,
            legendText : ['Current','Vs last week/month/year','% Change']
                },     
    }
}, myDarkRadarChart = new Chart(ctxD, chartData), myLightRadarChart = new Chart(ctxL, chartData);
};

for each dataset you have to add:

label: 'Something'

1👍

You can try define the labels from the as defined in the documentation. https://www.chartjs.org/docs/latest/configuration/legend.html#configuration-options . I believe it’s labels (as array of legend label items) and with

{text: "something"}

as a pattern (see https://www.chartjs.org/docs/latest/configuration/legend.html#legend-item-interface).

0👍

options value names must set in "":

options: {
                "legend": {
                    "display": false
                }
            }

See A Full Working Example:

new Chart("myChartsignup", {
    type: "bar",
    data: {
        labels: xValues,
        datasets: [{
            backgroundColor: barColors,
            data: yValues
        }]
    },
    options: {
        "legend": {
            "display": false
        }
    }
});

enter image description here

Leave a comment