I have this settings

const options = {
  responsive: true,
  plugins: {
    legend: {
      position: 'bottom',
      labels: {
        usePointStyle: true,
        pointStyle: 'circle',
        // fontSize: 2,
        // boxWidth: 6,
        // pointStyleWidth: 10,
        template: {
          maxWidth: 10,
        },
      },
    },
    title: {
      display: false,
    },
  },
}
const data = {
  labels: ['E-commerce', 'Enterprise', 'Yellow', 'Green', 'Purple'],
  datasets: [
    {
      label: '# of Votes',
      data: [12, 19, 3, 5, 3],
      backgroundColor: ['#C07CC3', '#9C3848', '#9DDBAD', '#ADA8B6', '#606EDA'],
      borderWidth: 1,
    },
  ],
}

I get this chart with this settings

I want to make that points smaller but when I uncomment the pointStyleWidth prop it makes width smaller but the height remains the same

Like this

CodePudding user response：

I figured out, I need both boxWidth and boxHeight, and remove the pointStyleWidth