chart.js

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 ?


Solution

  • 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'
    }