Removing ChartJS 2 border and shadow from point style legend

Question

I am using the following option to get point style legend with ChartJS 2:

options: {
    legend: {
        labels: {
            usePointStyle: true
        }
    }
}

However, as displayed in the next image, each dot includes a border and a shadow:

ChartJS 2.7.2 is used.

Is there an option to control the border and the drop shadow? How can I remove them?

score 5 · Accepted Answer · answered May 08 '18 at 12:40

After looking at the implementation, I noticed the border and shadow are controlled by the borderWidth property defined per dataset. Here is an example to remove the border and the shadow.

const dataset = [
    {
        borderWidth: 0,
        data: ...,
        label: ...,
        backgroundColor: ...,
        hoverBackgroundColor: ...,
    }
];

Note that the point diameter is linked to the label font size.

score 1 · Answer 2 · answered Dec 01 '20 at 07:52

1

As the borderWidth: 0 alone doesn't seem to work, a workaround is to set the borderColor with 0 opacity:

  datasets: [
    {
      data: defaultData,
      backgroundColor: colors,
      borderWidth: 0,
      borderColor: "rgba(0,0,0,0)", 
    },

answered Dec 01 '20 at 07:52

Ben Anton

31
2

Removing ChartJS 2 border and shadow from point style legend

2 Answers2