CODEWITHSUNDEEP
chart.js
yoyoma
yoyoma

Reputation: 3536

Chart.js tooltip background color setting

I am trying to change the background color of the tooltip, but can only seem to change the key: https://jsfiddle.net/1ez0Lo8a/ Referring to the black background of the tooltip when you hover over the bar.

tooltips: {
                yAlign: 'bottom',
                callbacks: {
                    labelColor: function(tooltipItem, chart) {
                        return {
                            backgroundColor: 'rgb(255, 0, 0)'
                        }
                    },
                }

Further, as you can see, I've managed to remove the axis - but none of those settings have removed the very bottom horizontal axis. Can anyone advise how to remove that one also ?

Upvotes: 5

Views: 18755

Answers (2)

Nihar Sarkar
Nihar Sarkar

Reputation: 1299

Use backgroundColor property directly under tooltips .

Try this code :

tooltips: {
    yAlign: 'bottom',
    callbacks: {
        labelColor: function(tooltipItem, chart) {
            return {
                backgroundColor: 'rgb(255, 0, 0)'
            }
        },
    },
    backgroundColor: '#227799'
}

Upvotes: 10

Sp Mbt
Sp Mbt

Reputation: 1

tooltips: { backgroundColor: '...'} is works, but for dynamical change of background with depend of element (when argument is function) I had to do patch in 3 places of unpacked code of bundle, version 2.7.3 (it may be in higher versions also).

Upvotes: 0

Related Questions