Is there any way to change the color of the label on a Plot.ly JavaScript
Question
On the graph in the JSBin link below, which is generated with Plotly ( https://plot.ly/javascript/ ), when you hover over the bar chart 'bars', the values associated with each bar are displayed - however the text color corresponds to the color the bar is set to and is unreadable if a light color.
https://jsbin.com/vubahafasu/edit?html,js,output
So essentially, when hover of the Giraffes Bar items, is it possible to change the color or bgcolor of the hover values of "SF Zoo" that is displayed?
1 answers
solution1
3 ACCPTED 2016-12-02 17:33:00
You can use plotly_hover event, select the rect which shows the text and change its fill color. The class of the rect is hovertext and by using D3's filter method you can select the index for which the modification is applied.
document.getElementById("myDiv").on("plotly_hover", function (data) {
data.points.map(function () {
var hovertext = Plotly.d3.selectAll(".hovertext");
hovertext.filter(function (d, i) {
return i === 0;
}).selectAll("rect").style("fill", "rgb(255, 0, 0)");
});
});
var trace1 = { x: ['giraffes', 'orangutans', 'monkeys'], y: [20, 14, 23], name: 'SF Zoo', type: 'bar', marker: { color: '#e9e9e9' } }; var trace2 = { x: ['giraffes', 'orangutans', 'monkeys'], y: [12, 18, 29], name: 'LA Zoo', type: 'bar' }; var data = [trace1, trace2]; var layout = {barmode: 'group'}; Plotly.newPlot('myDiv', data, layout); document.getElementById('myDiv').on('plotly_hover', function(data){ var infotext = data.points.map(function(d){ var hovertext = Plotly.d3.selectAll(".hovertext"); hovertext.filter(function(d, i) {return i === 0; }).selectAll('rect').style("fill" , "rgb(255, 0, 0)"); }); });
<head> <script src="https://cdn.plot.ly/plotly-latest.min.js"></script> </head> <body> <div id="myDiv" style="width: 480px; height: 400px;"><!-- Plotly chart will be drawn inside this DIV --></div> </body>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.