如何在图表的传说中增加字体大小。

Question

我正在尝试在我使用Chart.js的图中增加标签的字体大小。 附带有屏幕截图： 我想增加“标签1,2,3”的字体尺寸。

在我现在正在使用的JavaScript配置下方：

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, 
                },
            },
        },
    },
};

我尝试了 font documnation and logend documentation 但是我什么都没有。 有人有经验吗？ 提前致谢

Answer 1

如文档中所述

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