12

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.

2 Answers 2

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

0
2

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

1
  • 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.
    – Community Bot
    Jun 22 at 0:47

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.