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.

[tevinch]

For Chart.js 4.6.1, the font setting belongs to options.plugins.legend.labels.font and is shared by the canvas legend. An individual LegendItem does not have a supported font property, so adding a nested font in generateLabels does not change the per-label font.

An HTML legend lets you set normal CSS separately for each label, for example:

firstButton.style.font = 'italic 700 20px Arial, sans-serif';
secondButton.style.font = 'normal 400 12px Georgia, serif';

Disable the canvas legend with options.plugins.legend.display = false, and keep line visibility connected to the dataset index:

chart.setDatasetVisibility(index, !chart.isDatasetVisible(index));
chart.update();

Here is a complete two-line example using those APIs. Its native legend buttons support pointer, Space and Enter, update aria-pressed, preserve keyboard focus, and retain visibility/data across chart updates. The browser checks also confirm that the flat and nested per-item font settings are ignored by the current canvas legend. This example is specifically for dataset-based line legends; pie/doughnut item visibility uses a different handler.