Chart.js : legend label with several curves

[aragorn83-ux]

Hello everyone !
I want to create a graph containing two 'line' type curves.
My difficulty is that I want to be able to use a different font for the legend label of the first curve than for the second curve.
The result is that I get both curves correctly, but the font is the same for both labels. The code only works for the text color, but it doesn't change the size, style, or weight.
What is wrong in this code ?

Thanks in advance for your help.

Here is the code I'm using :

const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
        datasets: [
            {
                label: 'Number 1',
                data: [10, 20, 30, 40, 50, 60],
                borderColor: 'red',
                fill: false
            },
            {
                label: 'Number 2',
                data: [60, 50, 40, 30, 20, 10],
                borderColor: 'black',
                fill: false
            }
        ]
    },
    options: {
        plugins: {
            legend: {
                labels: {
                    generateLabels: function(chart) {
                        const datasets = chart.data.datasets;
                        return datasets.map((dataset, i) => {
                             return {
                                text: dataset.label,
                                fillStyle: dataset.borderColor,
                                strokeStyle: dataset.borderColor,
								fontFamily: (i === 0) ? 'Arial' : 'sans-serif',
                                fontColor: (i === 0) ? 'red' : 'green',   // this is the only working item !
								fontStyle: (i === 0) ? 'italic' : 'normal',
								fontWeight: (i === 0) ? 'bold' : 'normal',
								fontSize: (i === 0) ? 20 : 12,
                                datasetIndex: i
                            };
                        });
                    }
                }
            }
        }
    }
});

[manimovassagh]

The generateLabels callback returns LegendItem objects, and in Chart.js v3/v4 the font properties on a LegendItem are grouped under a single font object — not flat properties like fontSize, fontStyle, etc.

Replace your flat font props with a font object:

generateLabels: function(chart) {
    const datasets = chart.data.datasets;
    return datasets.map((dataset, i) => {
        return {
            text: dataset.label,
            fillStyle: dataset.borderColor,
            strokeStyle: dataset.borderColor,
            fontColor: (i === 0) ? "red" : "green",
            font: {
                family: (i === 0) ? "Arial" : "sans-serif",
                style: (i === 0) ? "italic" : "normal",
                weight: (i === 0) ? "bold" : "normal",
                size: (i === 0) ? 20 : 12
            },
            datasetIndex: i
        };
    });
}

The reason fontColor works as a flat property is that it is explicitly handled in the legend plugin drawing code. But size/style/weight/family are read from the font sub-object. This is consistent with how Chart.js v3+ handles fonts everywhere else in the config (e.g., options.plugins.title.font, scale tick fonts, etc.).

See the LegendItem interface in the docs for the full list of supported properties.