I’m using vue-chartjs to display a line chart, and right now I’m customizing the appearance. I’m finding that certain attributes to style the Tooltip are not working. I’m currently trying the following approach to select a background color based on the value of the data. I’ve copied the code straight from the Chart.js documentation and put in my ternary operator to select a background color.

const options = {
        elements: {
          line: {
            borderColor: '#15c63c',
            borderCapStyle: 'round',
          },
        },
        scales: {
          y: {
            suggestedMin: 0,
            grid: {
              display: false,
              color: 'rgba(150,150,150,.3)',
            },
          },
          x: {
            grid: {
              color: 'rgba(150,150,150,0.1)',
            },
          },
        },
        responsive: true,
        plugins: {
          legend: {
            display: false,
          },
          title: {
            display: true,
            text: 'April 2024',
          },
          tooltip: {
            backgroundColor: 'rgba(225,225,225,0.75)',
            displayColors: false,
            padding: 12,
            titleAlign: 'center',
            caretPadding: 4,
            callbacks: {
              label: function (context) {
                let label = context.dataset.label || ''

                if (context.parsed.y !== null && context.parsed.y >= 0) {
                  const suffix = context.parsed.y === 1 ? '' : 's'
                  label += '+' + context.parsed.y + ' unit' + suffix
                }

                return label
              },
              labelColor: function(context) {
                let backgroundColor = context.parsed.y >= 0 ? 'rgba(21,198,60,0.7)' : 'rgba(204,0,0,0.7)'
                return {
                  borderColor: 'rgb(255,253,250)',
                  backgroundColor: backgroundColor,
                  borderWidth: 2,
                  borderDash: [2, 2],
                  borderRadius: 8,
                }
              },
              labelTextColor: function () {
                return 'rgb(255,253,250)'
              },
            },
          },
        },
        maintainAspectRatio: false,
      }

If I remove the options.plugins.tooltip.backgroundColor, then the tooltip uses the default values. The ‘labelTextColor’ callback works as intended. I’ve also noticed that no matter what I do, I can’t change the borderColor of the tooltip. I’ve tried options.plugins.tooltip.borderColor = 'rgb(255,253,250)' but that doesn’t work either.

I’ve also done console.log(context.parsed.y) within the labelColor callback and confirmed that the rgb values are showing up in the console.

I’ve tried looking on SO, as well as the GH but everything I’ve found seems to be from 4 or 6 years ago and is no longer relevant.