Add way to set which traces show up in range slider plot

[Kurairaito]

Hi,

I played with financial charts and candlesticks chart and found that the range slider is somewhat limited.

In my quest to customize it, I found those links : https://github.com/plotly/plotly.js/issues/279 where I saw that a feature I wanted to use was listed but then I found https://plot.ly/javascript/reference/#layout-xaxis-rangeslider and saw this was not yet implemented.

I would like to draw severals informations in one graph : for example : Candles, Volume, 1 or more moving average etc ...

example : https://codepen.io/anon/pen/LzpKZg

You can see that all traces are draw again in the range slider. it's useless, take memory, render the trace in this areas unreadable etc.

The option "showtraces" from https://github.com/plotly/plotly.js/issues/279 seemed to be really useful for this kind of data's. Could it be implemented ?

Best option should be to implement the showtrace option and give an array of the trace to be drawn, second option could be to draw only the first trace, and user arrange his data to put the trace he want in first place.

Also is there a workaround to remove some trace from the range slider ?

Regards.

[robertmartin8]

Any updates on this? Having a bit more control over the display aspects of the rangeslider would be very useful.

[rychoo2]

Hi, I found a workaround to hide extraneous traces with this simple css:

.rangeslider-rangeplot .overplot{
    display:none;
}

In my case this leaves only a first trace on the rangeslider. Regards

[ggoretti]

Hi, I have the same issue as @Kurairaito but I am coding in Python and have no clue on how to use css, so I am not able to implement the workaround suggested by @rychoo2 .

Can anyone help with this?

Cheers

[Abhilash-Chandran]

This is a different approach where I wrote my custom range slider so that I can keep one generic range slider for all the plots in my screen and activate different ones based on user interaction. Hope it helps someone. Following code pen has this custom range slider.

https://codepen.io/abhilas-csc/pen/NWWyXpq?editors=1111

[pavitrakumar78]

This would be a nice addition. The original spec had this (#279) where you can modify the showtraces option. I'm not sure why it was removed though.. :/

Edit: has anyone found any alternative solution for this? the one suggested by rychoo2 does not work anymore. In my case, I only need the first trace to be displayed.

[GendelfLugansk]

@pavitrakumar78 For CSS-based solution, you need to inspect your plot using browser's dev tools and see what classes you can use as a selector in your case. It will depend on what do you need and config of your plot. In my case, for example,

.rangeslider-container .plot .scatterlayer {
    visibility: hidden;
}

does the trick (I needed to hide scatter trace from range slider and leave bars).

This piece of CSS might work to hide all traces except first (works for plot I'm playing with):

.rangeslider-container .plot > .rangeplot:not(:first-child) {
    visibility: hidden;
 }

[pavitrakumar78]

@GendelfLugansk Thanks! I will try this.

[GendelfLugansk]

Another workaround would be to add second xaxis and associate traces you don't want on slider with that axis. Probably performance would be better with this method.

Minimal example:

var trace1 = {
  x: [0, 1, 2, 3, 4, 5],
  y: [1.5, 1, 1.3, 0.7, 0.8, 0.9],
  type: 'scatter',
  xaxis: 'x2' //This moves trace to alternative xaxis which does not have a slider
};

var trace2 = {
  x: [0, 1, 2, 3, 4, 5],
  y: [1, 0.5, 0.7, -1.2, 0.3, 0.4],
  type: 'bar'
};

var data = [trace1, trace2];

var layout = {
  xaxis: {
    rangeslider: {
      visible: true
    },
    autorange: false,
    range: [1, 3]
  },
  xaxis2: {
    matches: 'x', //Important for slider to work properly for all traces
    overlaying: 'x' //Important for hover to work properly for all traces
  },
};

Plotly.newPlot('myDiv', data, layout);

[pavitrakumar78]

@GendelfLugansk I tried both your suggestions.

1. CSS-based solution did not work. I tried manually deleting the elements and removing them via jQuery using the $('.rangeslider-container .plot').find('.rangeplot') selector. My plot has several axes stacked + combination of box and other plots in the main xy axis, so selecting and removing via CSS is unfortunately not a solution that is going to work for me I think.

2. Duplicate xaxis method seems to work, but due to my plot having many axis and methods depending on the primary axis a lot, I need to be careful in adding the second xaxis. I'm fairly confident that I can make this method work to achieve what I want.

--

I think a much easier solution would be just to implement or bring-back the showtraces option that was mentioned in #279. But for now, the dual-xaxis solution by @GendelfLugansk is the only one that works for me.

[jesusgp22]

Another workaround would be to add second xaxis and associate traces you don't want on slider with that axis. Probably performance would be better with this method.

Minimal example:

var trace1 = {
  x: [0, 1, 2, 3, 4, 5],
  y: [1.5, 1, 1.3, 0.7, 0.8, 0.9],
  type: 'scatter',
  xaxis: 'x2' //This moves trace to alternative xaxis which does not have a slider
};

var trace2 = {
  x: [0, 1, 2, 3, 4, 5],
  y: [1, 0.5, 0.7, -1.2, 0.3, 0.4],
  type: 'bar'
};

var data = [trace1, trace2];

var layout = {
  xaxis: {
    rangeslider: {
      visible: true
    },
    autorange: false,
    range: [1, 3]
  },
  xaxis2: {
    matches: 'x', //Important for slider to work properly for all traces
    overlaying: 'x' //Important for hover to work properly for all traces
  },
};

Plotly.newPlot('myDiv', data, layout);

This solution works GREAT I also can notice the performance improvements, only gotcha: if your x axis is type date, make sure axis2 is also type date, also you might want to remove the labels from axis2 since plotly doesn't do it and you get weird text like so:

[jackparmer]

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.

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.

[gvwilson]

Hi - this issue has been sitting for a while, so as part of our effort to tidy up our public repositories I'm going to close it. If it's still a concern, we'd be grateful if you could open a new issue (with a short reproducible example if appropriate) so that we can add it to our stack. Cheers - @gvwilson