[Chartjs]-Removing ChartJS 2 border and shadow from point style legend

by

5👍

✅

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.

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)", 
    },

Leave a comment