11

I've create a line chart with chart.js. I changed the legend symbol form from rects to circles by using: 

legend: {
  display: true,
  labels: {
    usePointStyle: true,
  },
}

I want to change the size of the circles. But according to the documentation this is only possible if I also change the font size:

Label style will match corresponding point style (size is based on fontSize, boxWidth is not used in this case). - https://www.chartjs.org/docs/latest/configuration/legend.html#legend-label-configuration

Does anyone know if there is another option to change the size? Or do I have to use generateLabels().

Here is a codePen to take a look on that.

DarkMikey
  • 383
  • 1
  • 4
  • 24

2 Answers2

25

You can use the boxWidth option to influence the size of the point in the legend:

options: {
  legend: {
    labels: {
      usePointStyle: true,
      boxWidth: 6
    }
  }
}

read the documentation of chartjs about legend

Akhil Pilli
  • 276
  • 5
  • 7
1

Chartjs 4.3.0:

in options.plugins.legend.labels

  • boxHeight alone works for me and sets the image size (circle by default)
  • boxWidth sets the distance to the following label text

chartjs Legend Documentation

LingLing
  • 11
  • 2
  • Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Jun 22 '23 at 00:47