Change color of text in tooltip

plotly.js
1

Hello,

I have a grouped bar chart. On hover, I see the text in the color of each dataset. However, one of my bars is a bright yellow and it is hard to read the hover text when it is set in yellow. Is there a way to keep my bar bright yellow, but change the color for that particular hover?

Thank you!

2

I read that I could use the hover event to try and change the color. I tried this but am still not seeing the changes. Here’s an example of what I did:

var chart = document.getElementById(‘plotly’);
chart.on(‘plotly_hover’, function(data){
document.querySelectorAll(".hovertext text").forEach( function(el) {
el.style.color = “#333333”;
});
});

3

in case this helps someone else, this is what I ended up doing:

var chart = document.getElementById('plotly');
chart.on('plotly_hover', function(data){
	var yellow_label = data.points["0"].fullData.marker;
	yellow_label.color = "#dca303";
});

This allowed me to changed the data label text color

1 Like