Get state of current chart

plotly.js
1

Is there any way to get information about state of given plotly chart? E.g. I have 4 line traces in a chart and the user has selected two of them, I want to fetch this information to know which two traces have been clicked.

2

Just lookup .data and .layout of the graph <div>:

var gd = document.getElementById('graph')

gd.data // => current data
gd.layout // => current layout
3

This gives me the entire data that was initially plotted and not only the one that is being displayed currently. E.g. I have 4 traces and I clicked on 2 traces in legend to display them. Now I want to know which traces are being displayed.

4

Try

gd.data.filter(trace => trace.visible === true)
1 Like
5

for some reason my trace data does not have this .visible property at all. not when queried from the graph

, not in the dcc.Graph data, i cannot find it anywhere.

6

did you find any solution?

7

I’ve seen that the visible property is by default undefined so it doesn’t appear in the fig.layout. Hoewever when hiding the trace once, the .visible property appears, and is either ‘legendonly’ (for hidden) or true for visible. In one of my clientside callbacks I check the visibility like this:

let visible_traces = [];
let invisible_traces = [];
graphDiv.data.forEach((trace, index) => {
    //console.log('\tvisible: ' + trace.visible);
    if (trace.visible == true || trace.visible == undefined) {
        visible_traces.push(index);
    } else {
        invisible_traces.push(index);
    }
});

Hope this helps!