javascriptchartschart.jslinechartchart.js2

Chart.js - style legend: smaller circles


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.


Solution

  • 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