Display inline block legends

[simplyniceweb]

I have this now:

but i want legends like this:

how to do it? here's the code/configuration:
` function generateRandomNumbers() {
var randomNumbers = [];
for (var i = 0; i < 8; i++) {
var randomNumber = Math.floor(Math.random() * 301); // Generates random number between 0 and 30
randomNumbers.push(randomNumber);
}
return randomNumbers;
}

    // Sample data for the combo chart with time scale
    var data = {
    labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug'],
    datasets: [
        {
            label: 'CooL',
            type: 'bar',
            data: generateRandomNumbers(),
            backgroundColor: '#74A3AB',
            borderRadius: 5
        },
        {
            label: 'CooL - data driven CVRM',
            type: 'bar',
            data: generateRandomNumbers(),
            backgroundColor: '#FFABAB',
            borderRadius: 5
        },
        {
            label: 'CooL - data driven DT2',
            type: 'bar',
            data: generateRandomNumbers(),
            backgroundColor: '#C8C1F4',
            borderRadius: 5
        }
    ]
    };

    // Configuration options
    var options = {
        scales: {
            x: [{
            type: 'time',
            time: {
                unit: 'day',
                displayFormats: {
                day: 'YYYY-MM-DD'
                }
            },
            title: {
                display: true,
                text: 'Date'
            }
            }],
            y: [{
            ticks: {
                beginAtZero: true
            },
            title: {
                display: true,
                text: 'Value'
            }
            }]
        },
        plugins: {
            legend: {
                display: true,
                position: 'top',
                labels: {
                    usePointStyle: true,
                    pointStyle: 'rectRounded',
                }
            }
        }
    };

    // Get the context of the canvas element
    var ctx = document.getElementById('comboChart').getContext('2d');

    // Create the combo chart
    var comboChart = new Chart(ctx, {
    type: 'bar',
    data: data,
    options: options
    });`

[stockiNail]

@simplyniceweb AFAIK the out-of-the-box legend plugin cannot create the legend as you want. I think you could create a HTML legend, externally from canvas. See sample: https://www.chartjs.org/docs/latest/samples/legend/html.html

[simplyniceweb]

that's a shame.