Chartjs-ChartJS – Size of the point doesn't change

by

1👍

✅

To increase the size of the point, you will have to increase the legend’s fontSize value. When you increase the font-size both the label and the point’s size will increase.

When you increase the boxWidth the overall width that the legend icon takes will increase. In the case of the ‘box’ legend icon, the rectangle’s width will increase. But in case of point, all it will do is provide some extra space between the legend icon and its text.

To make the legend point circle fill with their color, you will have to set the backgroundColor property to that color and fill to false. 

  datasets: [{
      label: 'c1',
      data: [0.3, 0.4, 0.5, 0.35, 0.2, 0.5, 0.4, 0.55, 0.6],
      backgroundColor: '#e6194b',
      borderColor: '#e6194b',
      borderWidth: 1,
      fill: false,
      pointBackgroundColor: '#e6194b'
    },
    {
      label: 'c2',
      data: [0.7, 0.5, 0.2, 0.4, 0.6, 0.1, 0.88, 0.35, 0.45],
      backgroundColor: '#3cb44b',
      borderColor: '#3cb44b',
      borderWidth: 1,
      fill: false,
      pointBackgroundColor: '#3cb44b'
    }
  ]

Leave a comment