Black Lives Matter. Please consider donating to Black Girls Code today.
Learn how to use COVID-19 data in open source Dash apps. Register for the Sept 23rd webinar with IQT!

Update only X-Axis data array

Hi I’m trying make a graph that gives the user options to select different units for the the x axis.
I have my data for the y axis and two sets for the x axis.
The first xaxis data is the default and the second is the same size array except in different units.

I tried to use Plotly.update and update the xaxis, but I can’t seem to get it to work.
I also tried Plotly.restyle and no luck.

I think it might be the way I am implementing the js.
If anyone has any ideas that might work, it would be really helpful. Thank you.

Can you share a code snippet of what you’ve tried so far?

Sure, I put my current project on codepen

When I select the second x axis it does not show the correct xaxis values, and when I try to update it to the default xaxis, the same problem occurs. Thanks for checking it out.

See working version: https://codepen.io/etpinard/pen/YQORPK?editors=0010

All I needed to change was:

var data_update = {
     x: x,
 };

 // to
 var data_update = {
     x: [x],
 };

Plotly.update uses the same update-object logic as restyle. I recommend looking at https://codepen.io/etpinard/pen/EmvbOL for a primer on the topic.

1 Like

Thank you! I’m glad this is finally working!
I’ll definitely look into Plotly.restyle now