I want to change the white line inside the tooltip box.

[JangCool]

I'm using chart js version 3.9.1.
Tooltips are defined and displayed separately, and are handled using the callbacks property.

The setting values are as follows.

I want to represent the same color in the box. But the white line offends me. I would like to know how to handle it.

 plugins:{
            tooltip: {
                enabled: true,
                usePointStyle:false,
                cornerRadius: 3,
                boxWidth: 7,
                boxHeight: 7,
                boxPadding:0
                callbacks:{
                    labelColor: function(context) {

                        const dataset = context.dataset;

                        let color = dataset.borderWidth > 0 ? dataset.borderColor : dataset.backgroundColor;

                        return {
                            borderColor: color,
                            backgroundColor: color,
                            borderWidth: 0,
                            borderDash: null,
                            borderRadius: 0,
                        };
                    },
            },

[Udemology]

Hi @JangCool ,

I have been explore this as well. I could not find a solution to directly remove the white border. I wonder where that is coming from.

However I did find a simple workaround. Convert the colorbox into a pointstyle 'rect' and it will remove the white inner border. Perhaps this workaround is an option.

tooltip: {
            usePointStyle: true,
            callbacks: {
              labelPointStyle: (context) => {
                return {
                  pointStyle: 'rect',
                };
              }
            }
          }

[JangCool]

@Udemology Thank you. also If the tooltip content is long, it is cut off on the chart and is not visible. So I decided to handle it in a custom html way.

[Udemology]

Thank you for accepting the answer.

I did eventually found what made the white borders. Changing the color if you only have a single colorbox is easy but I could not find a way to do it for 2 colorboxes.

The upper solution is much better as the lower one I could not get the array to display the matching color per dataset. Even with callback I could not figure it out. I am sure there is a method but probably not worth the time to find out. If you set it transparent it will get the tooltip color. Having a single color makes all border colors the same color.

If you want to explore more below is the 'problem maker'.

tooltip: {
  multiKeyBackground: '#fff' <--- makes it white. 
}