[Chartjs]-How to get rid of the white square outline or border in the tooltip for chartjs?

There’s indeed no option for this, but you can workaround it.

The color of the white outline is controlled by the multiKeyBackground tooltip option. By setting this to be fully transparent (#00000000 or rgba(0, 0, 0, 0)), and disabling the border on the dataset, it’ll at least look better (though still not perfect).

As of this writing (Chart.js 3.9.1), control over the display properties of the tooltip legend items can be done using tooltip callbacks. There are a few examples in the docs.

tooltip: {
  intersect: false,
  mode: 'index',
  callbacks:{
    labelColor: function(context) {
      return {
        borderColor: 'rgba(0, 150, 0)',
        backgroundColor: 'rgba(0, 150, 0)',
        borderWidth: 3,
        borderRadius: 2,
      }
    },
  }
},

For example, like the legend item Current is here:

Callbacks are an extremely powerful way to customize charts in Charts.js

I remember I once had this problem as well, but I can’t remember an answer, neither I found one after I searched for it…

The only solution I have is using an custom tooltip.

You can alter this JSFiddle I found. They use a circle with border-radius: 5px in the css-class .chartjs-tooltip-key. Remove this line and you have a rectangle.

Either take the whole custom tooltip or use the parts you need.

As DaveL17 already mentioned, the label color callback is what you’re after.

To not display the default border, you can choose to make the borderColor transparent, like so:

    callbacks: {    
      labelColor: function (context) {
        return {
         borderColor: "rgba(0,0,0,0)",
         backgroundColor: context.yourBorderColor,
         borderWidth: 0,
        };
      }
    }