Black Lives Matter. Please consider donating to Black Girls Code today.

Interactive 'select all' on rangeselector date

I have been following the tutorial on producing interactive dashes ( I have successfully got the dash to display the selected data on a secondary graph, but what I am hoping to do is have this secondary graph display data relevant to the dates selected on the primary graph as selected by the rangeselector argument. Is this possible? Thanks!

Thanks for writing in. You can pretty easily do this with relayoutData. While there is no function that will automatically only select data that’s visible, you could use the output of relayoutData to filter data for a secondary graph.

relayoutData looks like this when it comes in:

  "xaxis.range[1]": 2.9200060016541145, 
  "yaxis.range[0]": 1.25, 
  "xaxis.range[0]": 2.2042721530568183, 
  "yaxis.range[1]": 5.951754385964913

that comes in as one argument in your callback, so you can just filter by the axis range in question.

One more thing to keep in mind when using relayoutData: You can disable filtering in a single axis if you wish. This is useful if you want users to use a graph like a range selector (filtering in the x axis) but you don’t want them to zoom in on the yaxis. To do this, just set layout.xaxis.fixedrange to True.

1 Like