# Change a specific trace data with button

**URL:** <https://community.plotly.com/t/change-a-specific-trace-data-with-button/71050>\
**Category:** 📊 Plotly Python\
**Created:** [December 21, 2022, 1:37pm UTC](https://community.plotly.com/t/change-a-specific-trace-data-with-button/71050 "2022-12-21T13:37:39Z")\
**Posts on this page:** 18\
**Page:** 1

<div class="post-metadata">

**Author:** ![Bijan](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/bijan/32/22061_2.png) [@Bijan](https://community.plotly.com/u/Bijan)\
**Post date:** [December 21, 2022, 1:37pm UTC](https://community.plotly.com/t/change-a-specific-trace-data-with-button/71050/1 "2022-12-21T13:37:39Z")

</div>

Hi there,

Let me know how I can change a specific trace using buttons? look at the following code:

```auto
import plotly.graph_objs as go
import random as rnd

num_steps = 3

fig=go.Figure()
fig.add_scatter(y=[0, 0, 0], line={'color': 'red'},name='firsttrace')
fig.add_scatter(y=[3, 3, 3], line={'color': 'blue'},name='Secondttrace')
fig.add_scatter(y=[2, 2, 2], line={'color': 'purple'},name='Thirdtrace')
fig.add_scatter(y=[1, 1, 1], line={'color': 'gray'},name='Forthtrace')

buttons = []
for i in range(num_steps):
    
    button = dict(method='restyle', args=[{'y': [[rnd.randint(1,3) for i in range(3)],[rnd.randint(1,3) for i in range(3)]],
                                            'line':[{'color': 'black'},{'color': 'green'}]}], label=i)
    
    # Add button to buttons list
    buttons.append(button)

fig.layout.updatemenus = [{'buttons': buttons}]
fig.show()

```

in the above sample, I want to change data and color of traces with name ‘Secondttrace’ and ‘Forthtrace’ and let the other traces remain as they are. Maybe there is a way using selector, but I don’t know.

Thanks, in advanced.

---

<div class="post-metadata">

**Author:** ![AIMPED](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/aimped/32/21758_2.png) [@AIMPED](https://community.plotly.com/u/AIMPED)\
**Post date:** [December 21, 2022, 1:41pm UTC](https://community.plotly.com/t/change-a-specific-trace-data-with-button/71050/2 "2022-12-21T13:41:59Z")

</div>

Hi, does this help?

> **[Creating](https://plotly.com/python/creating-and-updating-figures/)**
>
> Over 28 examples of Creating and Updating Figures including changing color, size, log axes, and more in Python.

Go to this example:

`Magic underscore notation can be used in the selector to match nested properties. Here is an example of updating the color of all traces that were formally colored `“MediumPurple”`

---

<div class="post-metadata">

**Author:** ![Bijan](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/bijan/32/22061_2.png) [@Bijan](https://community.plotly.com/u/Bijan)\
**Post date:** [December 21, 2022, 2:09pm UTC](https://community.plotly.com/t/change-a-specific-trace-data-with-button/71050/3 "2022-12-21T14:09:59Z")

</div>

Dear @AIMPED  
Thanks for your contribution but it was not helpful unfortunately. I need to change one of the figure traces by clicking on a button.

---

<div class="post-metadata">

**Author:** ![AIMPED](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/aimped/32/21758_2.png) [@AIMPED](https://community.plotly.com/u/AIMPED)\
**Post date:** [December 21, 2022, 3:44pm UTC](https://community.plotly.com/t/change-a-specific-trace-data-with-button/71050/4 "2022-12-21T15:44:55Z")

</div>

While this does not answer your question, at least I figured out (for myself) how to change each trace independently.

```python
import plotly.graph_objs as go

fig=go.Figure()
fig.add_scatter(y=[1, 1, 1], line={'color': 'red'},name='firsttrace')
fig.add_scatter(y=[2, 2, 2], line={'color': 'blue'},name='Secondttrace')
fig.add_scatter(y=[3, 3, 3], line={'color': 'purple'},name='Thirdtrace')
fig.add_scatter(y=[4, 4, 4], line={'color': 'gray'},name='Forthtrace')

button = [dict(
    method='update',  
    args=[
        {
            'mode':[
                'markers+lines', 
                'markers+lines', 
                'markers+lines', 
                'markers+lines'
            ],
            'marker':[
                {'color': ['pink', 'red', 'green'], 'size':[6,15,23], 'line':{'color':'black'}},
                {'color': ['orange', 'blue', 'black'], 'size':[23,11,8], 'line':{'color':'black'}},
                {'color': ['red', 'white', 'gray'], 'size':[1,15,30], 'line':{'color':'black'}},
                {'color': ['green', 'purple', 'magenta'], 'size':[23,11,8], 'line':{'color':'black'}},

            ],
            'line':[
                {'color':'crimson'},
                {'color':'blue', 'width':8},
                {'color':'green'},
                {'color':'white'},
            ]
        },
    ],
    label='button'
)]
    

fig.layout.updatemenus = [{'buttons': button}]
fig.show()

```

---

<div class="post-metadata">

**Author:** ![Bijan](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/bijan/32/22061_2.png) [@Bijan](https://community.plotly.com/u/Bijan)\
**Post date:** [December 21, 2022, 9:10pm UTC](https://community.plotly.com/t/change-a-specific-trace-data-with-button/71050/5 "2022-12-21T21:10:33Z")

</div>

Happy to hear that.

I hope someone also solve mine.

---

<div class="post-metadata">

**Author:** ![AIMPED](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/aimped/32/21758_2.png) [@AIMPED](https://community.plotly.com/u/AIMPED)\
**Post date:** [December 21, 2022, 9:12pm UTC](https://community.plotly.com/t/change-a-specific-trace-data-with-button/71050/6 "2022-12-21T21:12:09Z")

</div>

Hey @Bijan, I actually thought, you could solve yours with my code 🤔

---

<div class="post-metadata">

**Author:** ![AIMPED](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/aimped/32/21758_2.png) [@AIMPED](https://community.plotly.com/u/AIMPED)\
**Post date:** [December 21, 2022, 10:36pm UTC](https://community.plotly.com/t/change-a-specific-trace-data-with-button/71050/7 "2022-12-21T22:36:56Z")

</div>

I found some time to prototype something. Obviously it’s not an universal approach, but maybe a starting point.  
Exemplarily the line color of two traces are changed.

Basically I follow four steps:

- find the trace to be changed (by name)
- inspect current traces in figure
- update traces
- create button

```python
def create(figure, name_list, change_dict_list):
    info = len([*figure.select_traces()])
    indices = [idx for idx, trace in enumerate(fig.select_traces()) if trace.name in name_list]
    
    # analyze change_dict_list
    new_colors = []
    for d in change_dict_list:
        new_colors.append(d.get('line').get('color'))
    
    # analyze traces
    existing_colors = []
    for trace in figure.select_traces():
        existing_colors.append(trace.line.color)
    
    # substitute colors
    for idx, new_color in zip(indices, new_colors):
        existing_colors[idx] = new_color
        
    # prepare output
    return {'line': [{'color': color} for color in existing_colors]}

```

usage:

```python
import plotly.graph_objs as go

# base figure
fig=go.Figure()
fig.add_scatter(y=[1, 1, 1], line={'color': 'blue'},name='Firsttrace')
fig.add_scatter(y=[2, 2, 2], line={'color': 'blue'},name='Secondtrace')
fig.add_scatter(y=[3, 3, 3], line={'color': 'blue'},name='Thirdtrace')
fig.add_scatter(y=[4, 4, 4], line={'color': 'blue'},name='Forthtrace')

button = [dict(
    method='update',  
    args=[
        create(fig, ['Secondtrace', 'Forthtrace'], [{'line':{'color':'yellow'}}, {'line':{'color':'red'}}])
    ],
    label='button'
)]
    
fig.layout.updatemenus = [{'buttons': button}]
fig.show()

```

![btn](https://us1.discourse-cdn.com/flex024/uploads/plot/original/3X/7/e/7e6a3a012fdd437affeb749a5a3bdaf3df0bf8b6.gif)

---

<div class="post-metadata">

**Author:** ![Bijan](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/bijan/32/22061_2.png) [@Bijan](https://community.plotly.com/u/Bijan)\
**Post date:** [December 22, 2022, 6:26am UTC](https://community.plotly.com/t/change-a-specific-trace-data-with-button/71050/8 "2022-12-22T06:26:27Z")

</div>

Dear @AIMPED, Really thanks for the time you put for providing above code. What I need exactly was `fig.select_traces()` and it was completely helpful.

---

<div class="post-metadata">

**Author:** ![empet](https://avatars.discourse-cdn.com/v4/letter/e/977dab/32.png) [@empet](https://community.plotly.com/u/empet)\
**Post date:** [December 22, 2022, 9:28am UTC](https://community.plotly.com/t/change-a-specific-trace-data-with-button/71050/9 "2022-12-22T09:28:47Z")

</div>

During the first lockdown in 2020 a lot of questions on different button actions have been addressed. Then I posted  
these notebooks to explain how the buttons are connected to trace or layout restyling:  
[b'Restyling a Plotly figure, via a dropdow | empet | Plotly'](https://chart-studio.plotly.com/~empet/15607) (see also the links posted in this notebook)  
[b'Restyle subplots simultaneouslyhttps | empet | Plotly'](https://chart-studio.plotly.com/~empet/15576)  
[b'Updatemenus: set secondary yaxis invisib | empet | Plotly'](https://chart-studio.plotly.com/~empet/15494)  
[b'Distplot with updatemenus | empet | Plotly'](https://chart-studio.plotly.com/~empet/15508)

---

<div class="post-metadata">

**Author:** ![Bijan](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/bijan/32/22061_2.png) [@Bijan](https://community.plotly.com/u/Bijan)\
**Post date:** [December 22, 2022, 10:04am UTC](https://community.plotly.com/t/change-a-specific-trace-data-with-button/71050/10 "2022-12-22T10:04:06Z")

</div>

Dear @empet

Like always, great data. Thanks.

Just a question. Imagine I have two fig objects like `fig1` and `fig2` that all of their data and layout are different. Is it possible to add a drop button that by clicking on first item `fig1` be shown and by clicking on the second item the `fig2` be shown?

---

<div class="post-metadata">

**Author:** ![empet](https://avatars.discourse-cdn.com/v4/letter/e/977dab/32.png) [@empet](https://community.plotly.com/u/empet)\
**Post date:** [December 22, 2022, 10:13am UTC](https://community.plotly.com/t/change-a-specific-trace-data-with-button/71050/11 "2022-12-22T10:13:21Z")

</div>

@Bijan Could you give your code for the two traces and explain whether they are plotted in two subplots or in the same plot window, but displayed alternatively?

---

<div class="post-metadata">

**Author:** ![Bijan](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/bijan/32/22061_2.png) [@Bijan](https://community.plotly.com/u/Bijan)\
**Post date:** [December 22, 2022, 10:22am UTC](https://community.plotly.com/t/change-a-specific-trace-data-with-button/71050/12 "2022-12-22T10:22:01Z")

</div>

in same plot window alternatively

---

<div class="post-metadata">

**Author:** ![empet](https://avatars.discourse-cdn.com/v4/letter/e/977dab/32.png) [@empet](https://community.plotly.com/u/empet)\
**Post date:** [December 22, 2022, 12:58pm UTC](https://community.plotly.com/t/change-a-specific-trace-data-with-button/71050/13 "2022-12-22T12:58:04Z")

</div>

@Bijan If you download, read, and run the examples in the notebooks I pointed out, above, you’ll find out how to displays two traces alternatively.

---

<div class="post-metadata">

**Author:** ![Bijan](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/bijan/32/22061_2.png) [@Bijan](https://community.plotly.com/u/Bijan)\
**Post date:** [December 22, 2022, 1:41pm UTC](https://community.plotly.com/t/change-a-specific-trace-data-with-button/71050/14 "2022-12-22T13:41:35Z")

</div>

Sorry dear @empet I think I explained the problem bad. My problem arose when I have two different figures that eachone has various and different traces and different layouts.

I’m thinking that maybe there is a way that by click button, each figure be shown on same window alternatively without using args and defining traces inside args. If there be a way that directly refer to each figure by clicking the button.

---

<div class="post-metadata">

**Author:** ![empet](https://avatars.discourse-cdn.com/v4/letter/e/977dab/32.png) [@empet](https://community.plotly.com/u/empet)\
**Post date:** [December 22, 2022, 7:04pm UTC](https://community.plotly.com/t/change-a-specific-trace-data-with-button/71050/15 "2022-12-22T19:04:43Z")

</div>

@Bijan  
I don’t think to be able to find a workaround to display alternatively two different figures, with distinct traces and layout, because the button definition is inserted, via `updatemenus` in `fig.layout`.

---

<div class="post-metadata">

**Author:** ![Bijan](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/bijan/32/22061_2.png) [@Bijan](https://community.plotly.com/u/Bijan)\
**Post date:** [December 22, 2022, 7:23pm UTC](https://community.plotly.com/t/change-a-specific-trace-data-with-button/71050/16 "2022-12-22T19:23:42Z")

</div>

Really thanks dear @empet. You always guide me generously and show me the correct way.

I think this issue maybe is an important issue that Plotly should have this feature in while analyzing data I think we need sometimes to switch from a figure to another figure (With completely various traces and layout and type and …) for many purposes. maybe Plotly managers like dear @adamschroeder if knows this provide this feature for Plotly in future.

Again thanks.

---

<div class="post-metadata">

**Author:** ![adamschroeder](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/adamschroeder/32/17280_2.png) [@adamschroeder](https://community.plotly.com/u/adamschroeder)\
**Post date:** [December 22, 2022, 8:57pm UTC](https://community.plotly.com/t/change-a-specific-trace-data-with-button/71050/17 "2022-12-22T20:57:13Z")

</div>

hi @Bijan  
There are a few priority features we are planning to work on for 2023, but it doesn’t hurt to add this feature request if you’d like.  
You can [create a feature request in our repo](https://github.com/plotly/plotly.py/issues). Our engineers will take see if it’s even possible.

---

<div class="post-metadata">

**Author:** ![Bijan](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/bijan/32/22061_2.png) [@Bijan](https://community.plotly.com/u/Bijan)\
**Post date:** [December 23, 2022, 6:05am UTC](https://community.plotly.com/t/change-a-specific-trace-data-with-button/71050/18 "2022-12-23T06:05:10Z")

</div>

Hi @adamschroeder  
Thanks for guidance and just now I create a request.