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

Question

I am using ChartJS but I can't figure out how to get rid of the white box in the tooltip. What setting/option will set remove the border/white outline or at least let me set the color?

Thank you!

data_sets.push({
    data: date_list["data_counts"],
    label: date_list["name"],
    fill: true,
    backgroundColor: transparentizeColor,
    borderColor: newColor,
    pointBackgroundColor: newColor,
    pointBorderColor: newColor,
  })

my_chart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: data["date_labels"],
        datasets: data_sets
    },
    options: {
        tooltips: {
            intersect: false,
        },
        elements: {
            point: {
                radius: 0
            }
        },
        legend: {
            display: false
        },
        scales: {
            yAxes: [{
                ticks: {
                    precision: 0,
                    suggestedMax: 3,
                    beginAtZero: true
                }
            }],
            xAxes: [{
                gridLines: {
                    display: false
                }
            }]
        }
    }
}, );

Camisado

Answer 1

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

Gati

A small addition to this solution, if you want to keep same color of the selected point element, you can retrieve it from the context – Pincers

@SIHEMBOUHENNICHE How do I access the active color through the context? I only want to set the border radius. – Vulgarize

Answer 2

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).

Audient

Answer 3

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.

Iconolatry

Answer 4

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,
        };
      }
    }

Anastassia