Comments (14)
For anybody looking to add hover events to the the Plotly legend, here's are some simple events I added to the traceToggle item that highlights the hovered legend item using opacity:
`
traceToggle.on('mouseenter', function() {
var legendItem = g.data()[0][0],
fullData = gd._fullData,
trace = legendItem.trace,
legendgroup = trace.legendgroup,
tracei,
allTraces = [],
i,
traceOpacity = [];
if(trace.visible === true){
for(i = 0; i < fullData.length; i++) {
allTraces.push(i);
traceOpacity.push(
Registry.traceIs(fullData[i], 'notLegendIsolatable') ? 1.0: 0.1
);
}
if(legendgroup === ''){
traceOpacity[trace.index] = 1.0;
} else{
for(i = 0; i < fullData.length; i++) {
tracei = fullData[i];
if(tracei.legendgroup === legendgroup) {
traceOpacity[allTraces.indexOf(i)] = 1.0;
}
}
}
var update = {
opacity: traceOpacity
};
Plotly.restyle(gd,update,allTraces);
}
});
traceToggle.on('mouseleave',function() {
var legendItem = g.data()[0][0],
fullData = gd._fullData,
trace = legendItem.trace,
allTraces = [],
i;
if(trace.visible === true){
var update = {
opacity: 1.0
};
for(i = 0; i < fullData.length; i++){
allTraces.push(i);
}
Plotly.restyle(gd,update,allTraces);
}
});
`
from plotly.js.
The current handler would simply be the default.
or, as in some other cases like plotly_beforeplot, it will still execute the default handler unless you return false
from the custom handler
from plotly.js.
Here is a hacky way to do it. I did "inspect element" on a legend item and found that it has a class legendtoggle
. Using this,
$('.legendtoggle').on('click', function(data)
{
alert("legend clicked");
})
It doesn't say which trace item was clicked. However, if you are truly dedicated, you can climb back up to the legend group tag, then back down to the text
element and grab the data-unformatted
value.
from plotly.js.
Another vote here.
Another use for this would be if you have a plot with a collection of line graphs corresponding to different groups. The user could then hover over the legend to highlight the particular plot similar to the d3pie example above.
from plotly.js.
I really like this idea.
Custom legend item click handlers could be set in the plot config e.g.:
Plotly.plot('graph', [], {}, {
onLegendItemClick: function(data) {
/* do something wilh data */
}
}
The current handler would simply be the default.
from plotly.js.
Thanks for an awesome library. Can I ask what the status is with regards to this?
from plotly.js.
We would like to give a user the ability to select series colors after viewing a plot. Ideally they would interact with the legend to do so. Another vote to resolve this issue :)
from plotly.js.
+1
from plotly.js.
+1
from plotly.js.
+1
from plotly.js.
It seems that there isn't a native event handler for the axis labels but we can workaround this limitation using vanilla Javascript and D3js. Here is what I did under Angular for a bar chart (probably the selector needs to be adapted for other chart types):
import * as d3 from 'd3';
export class AngularCustomComponent {
// contructor and other methods here..
plotlyClickEvents() {
/**
* Distinguish between single and double click
* @see http://bl.ocks.org/ropeladder/83915942ac42f17c087a82001418f2ee
*/
function clickcancel() {
let dispatcher = d3.dispatch('click', 'dblclick');
function cc(selection) {
let down, tolerance = 5, last, wait = null, args;
// euclidean distance
function dist(a, b) {
return Math.sqrt(Math.pow(a[0] - b[0], 2) + Math.pow(a[1] - b[1], 2));
}
selection.on('mousedown', function() {
down = d3.mouse(document.body);
last = +new Date();
args = arguments;
});
selection.on('mouseup', function() {
if (dist(down, d3.mouse(document.body)) > tolerance) {
return;
}
else {
if (wait) {
window.clearTimeout(wait);
wait = null;
dispatcher.apply("dblclick", this, args);
}
else {
wait = window.setTimeout((function() {
return function() {
dispatcher.apply("click", this, args);
wait = null;
};
})(), 300);
}
}
});
};
// Copies a variable number of methods from source to target.
let d3rebind = function(target, source, method) {
let i = 1, n = arguments.length;
while (++i < n) target[method] = d3_rebind(target, source, source[method]);
return target;
};
// Method is assumed to be a standard D3 getter-setter:
// If passed with no arguments, gets the value.
// If passed with arguments, sets the value and returns the target.
function d3_rebind(target, source, method) {
return function() {
let value = method.apply(source, arguments);
return value === source ? target : value;
};
}
return d3rebind(cc, dispatcher, 'on');
}
return clickcancel();
}
onBarChartXAxisClick() {
let self = this;
let item = null;
d3.select("#your-parent-element-identifier").
select('.cartesianlayer')
.select('.xaxislayer-above')
.selectAll('.xtick > *').each(function(e) {
// @see https://hstefanski.wordpress.com/2015/10/25/responding-to-d3-events-in-typescript/
// but `d3.select(d3.event.currentTarget)` does not work in this case.
// To workaround see https://stackoverflow.com/a/40314241
item = d3.select(this);
// @NOTE: the element of the x-axis is a <text> and does not have the
// attribute "pointer-events". Without this attribute is not possibile
// to listen for mouse events, and for that we have to add it.
item.attr('pointer-events', 'all');
const cc = self.plotlyClickEvents();
item.call(cc);
cc.on('click', (d, index) => {
// Do something
});
});
}
}
Hope this helps
from plotly.js.
The click part of this feature request has been merged in #2581
from plotly.js.
Lots of information here. What is a status on making legend items clickable?
from plotly.js.
This issue has been tagged with NEEDS SPON$OR
A community PR for this feature would certainly be welcome, but our experience is deeper features like this are difficult to complete without the Plotly maintainers leading the effort.
Sponsorship range: $25k-$30k
What Sponsorship includes:
- Completion of this feature to the Sponsor's satisfaction, in a manner coherent with the rest of the Plotly.js library and API
- Tests for this feature
- Long-term support (continued support of this feature in the latest version of Plotly.js)
- Documentation at plotly.com/javascript
- Possibility of integrating this feature with Plotly Graphing Libraries (Python, R, F#, Julia, MATLAB, etc)
- Possibility of integrating this feature with Dash
- Feature announcement on community.plotly.com with shout out to Sponsor (or can remain anonymous)
- Gratification of advancing the world's most downloaded, interactive scientific graphing libraries (>50M downloads across supported languages)
Please include the link to this issue when contacting us to discuss.
from plotly.js.
Related Issues (20)
- Mismatch between legend and line colors when using uppercase css colors HOT 1
- Item toggle behavior when using multiple legends HOT 8
- insiderange on multiple overlaid axes edge case
- [Feature Request] Adding a Button to Copy Image to Clipboard HOT 1
- BUG: standoff causes axis title position to break if no tick labels
- Shapes - fill to infinity/-infinity
- Adding a dendrogram to heatmaps
- Smith Chart (scattersmith) pan & zoom functionality HOT 2
- axes range not working. Range is +-1, data is 0->1.6e10 HOT 3
- ScatterGL throws ` TypeError: r[v] is undefined` when using frames HOT 1
- Clicks are sometimes missed with clickmode layout key HOT 4
- Tooltip pointer (triangle) not correctly positioned with hovermode 'x'
- Plotly chart conflict with touchstart / touchmove event to scroll smartphone screen HOT 1
- [BUG] Rangeslider won't reset after zooming out HOT 1
- Inconsistent behavior when providing an array of marker sizes in "markers" mode on scatter3D
- hoverdistance broken in 3D scatter plots; hover radius vs click radius?
- `scattergl` line plots no longer working after upgrading to 2.29.1 HOT 3
- Combining rangemode tozero and tickformat set to "," produces unexpected results
- REOPENING BUG - pie chart hover label hidden
- Hoverlabel overlaps each other
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from plotly.js.