Tooltip backgroundColor depending on chart color ChartJS

Question

I would set the background colour of tooltips depending on graph

Here's how I made

tooltips: {
        yPadding: -2,
        xPadding: 10,
        footerMarginTop: 5,
        titleFontColor: '#FFF',
        displayColors: false,
        backgroundColor: function(tooltipItem: Chart.ChartTooltipItem, chart: Chart) {
            const bgColor = `${chart.config.data.datasets[tooltipItem.datasetIndex].pointBorderColor.toString()}`;
            return bgColor;
        }

But I get the error

Property 'setTransform' is missing in type '(tooltipItem: ChartTooltipItem, chart: Chart) => string' but required in type 'CanvasPattern'. [2322]

I have also to do it in callbacks

callbacks: {
    labelColor: function(tooltipItem: Chart.ChartTooltipItem, chart: Chart) {
        const bgColor = `${chart.config.data.datasets[tooltipItem.datasetIndex].pointBorderColor.toString()}`;
        return {
            backgroundColor: bgColor,
            borderColor: ''
        };
    },
}

but the colour is not getting applicated, I get black colour instead of pointBorderColor colour which is not black. ( I get well a colour code )

score 0 · Answer 1 · answered Mar 01 '19 at 16:09

0

Don't assign Anonymous method to the backgroundColor property. write conditions inside a method and return color hashcode as string and just call that method from backgroundColor property .

For example , the method name is x which is returning the color code. then the code will be backgroundColor: x()

answered Mar 01 '19 at 16:09

Nihar Sarkar

1,187
1
13
26

I made like to say `backgroundColor: this.getTooltipBgcolor(value)` I get error `Cannot find name 'value'.` . I wrote backgoundColor right after tooltip item, not inside callbacks – infodev Mar 04 '19 at 12:34

Tooltip backgroundColor depending on chart color ChartJS

1 Answers1