Legends in Chart.js, shows only one label

Question

Just a warning: I am new to chart.js!

I have a couple of horizontal bar charts and it works fine except one issue that I cannot shake off. I have 5 labels in y-axis but the legend on top of the graph only shows one small rectangle in the color of the first (topmost) bar and even that does not display the label itself, followed by list of labels. I thought it would display each label next to small bar same color as in chart.

Unfortunately, this is an intranet app and I cannot provide a link but here is what I have (data is passed to this function from an ajax call):

function drawRespChart(chartLabels, chartData) {
    var ctx = $("#rtChart");
    console.log("Labels Array: " + chartLabels);
    console.log("Data Array: " + chartData);

    if (chartRespTime)
        chartRespTime.destroy();

    var chart = {
        labels: chartLabels,
        datasets: [
            {
                label: chartLabels,
                backgroundColor: ["#c45850", "#e8c3b9", "#3cba9f", "#8e5ea2", "#3e95cd"],
                data: chartData
            }
        ]
    };

    chartRespTime = new Chart(ctx, {
        type: 'horizontalBar',
        data: chart,
        datalabels: {
            anchor: 'end',
            align: 'start',
        },
        options: {
            title: {
                display: true,
                text: 'IDC Database Response Time (mili-seconds)'
            },
            legend: {
                display: true,
                labels: {
                    fontColor: 'rgb(255, 99, 132)'
                }
            },
            scales: {
                xAxes: [{
                    display: true,
                    scaleLabel: {
                        display: true,
                        labelString: 'Count'
                    },
                    ticks: {
                        major: {
                            fontStyle: 'bold',
                            fontColor: '#FF0000'
                        }
                    }
                }],
                yAxes: [{
                    display: true,
                    scaleLabel: {
                        display: true,
                        labelString: 'Response Time (ms)'
                    }
                }]
            },
            plugins: {
                datalabels: {
                    color: 'white',
                    display: function (context) {
                        return context.dataset.data[context.dataIndex] > 15;
                    },
                    font: {
                        weight: 'bold'
                    },
                    formatter: Math.round
                }
            },
            maintainAspectRatio: true,
            responsive: true,
            showInlineValues: true,
            centeredInllineValues: true,
            tooltipCaretSize: 0
        }
    });
}

This is what I see in console window:

Labels Array: 0-350,350-700,700-1000,1000-1500
Data Array: 5065,32,27,3

What I see as legend is one rectangle, same color as first bar, followed by list of labels.

Answer 1

It seems that charts.js labels only works when you split the datasets.

Leaving an example. https://jsfiddle.net/code4mk/1j62ey38/

datasets: [ {
          label: 'Result',
          fill:false,
          data: aDatasets1,
          backgroundColor: '#E91E63',
          },
         {
          label: 'Result2',
          fill:false,
          data: aDatasets2,
          backgroundColor: '#E91E93',
    }];