I am trying to increase labels' font size in the legend of a plot that I have done with chart.js. Attached there is a screenshot: I want to increase the font size of "Label 1,2,3".

Below the javascript configuration that I am using right now:

var data = {
    labels: x_axis_labels,
    datasets: [
        {
            label: 'Label 1',
            data: data_1,
            borderColor: 'rgb(46,138,207)',
            backgroundColor: 'rgb(46,138,207)',
            yAxisID: 'y',
        },
        {
            label: 'Label 2',
            data: data_2,
            borderColor: 'rgb(214,224,52)',
            backgroundColor: 'rgb(214,224,52)',
            yAxisID: 'y1',
        },
        {
            data: data_3,
            label:'Label 3',
            borderColor: 'rgb(244,67,54)',
            backgroundColor: 'rgb(244,67,54)',
            yAxisID: 'y1',
            pointStyle:'dash',
            borderDash: [20, 30],
            pointBackgroundColor: "transparent",
        },
    ]
};

const config = {
    type: 'line',
    data: data,
    options: {
        
        responsive: true,
        interaction: {
            mode: 'index',
            intersect: false,
        },
        stacked: false,
        plugins: {

            title: {
                display: true,
              
            }
        },
        scales: {

            x:{
                title:{
                    display: true,
                    text: 'X axis name',
                    font: {size:30},
                },
                ticks: {
                    font: {
                        size: 20,
                    }
                }
            },
            y: {
                title:{
                    display: true,
                    text: 'First y axis name',
                    font: {size:30}
                },
                type: 'linear',
                display: true,
                position: 'left',
                ticks: {
                    font: {
                        size: 24,
                    }
                }
            },
            y1: {
                title:{

                    display: true,
                    text: 'Second Y axis name',
                    font: {size:30}
                },
                type: 'linear',
                display: true,
                position: 'right',
                ticks:{
                    font:{
                        size:24,
                    }
                },
                // grid line settings
                grid: {
                    drawOnChartArea: false, 
                },
            },
        },
    },
};

I have tried Font Documnetation and Legend Documentation but I got nothing. Someone had experience in this? Thanks in advance

CodePudding user response：

As described in the docs you can set the size in the options.plugins.legend.labels.font.size namespace

options: {
  plugins: {
    legend: {
      labels: {
        font: {
          size: 20
        }
      }
    }
  }
}