Plotly graphs two yaxis

Question

does anyone knows why this happens? Seens that my frist and my last point are connected …

Plot img

the code:

df = pd.read_csv(‘data.csv’, index_col=0, parse_dates=True)

def plot_var_prev(dff):

    fig = make_subplots(specs=[[{"secondary_y": True}]])
    fig.add_trace(
        go.Scatter(x=dff.index, 
                y=dff['mag_vento'].values,
                name="Magnitude"),
                secondary_y=False,
    )

    fig.add_trace(
        go.Scatter(x=dff.index, 
                y=dff['direcao_vento'].values, 
                name="Direção"),
                secondary_y=True,
    )

    fig.update_xaxes(title_text="<b>Data</b>")
    fig.update_layout(hovermode="x", hoverlabel=dict(font_size=16, font_family="Poppins"))
    fig.update_layout(plot_bgcolor='rgba(0, 0, 0, 0)', paper_bgcolor='rgba(0, 0, 0, 0)',)
    fig.update_layout(
            legend=dict(orientation="v"),
            yaxis=dict(
                title=dict(text='<b>Magnitude do vento [m/s]</b>'),
                side="left",
                type='linear'
            ),
            yaxis2=dict(
                title=dict(text="<b>Direção do vento [°]</b>"),
                side="right",
                type='linear',
                overlaying="y",
                tickmode="sync",
                rangemode='tozero'
            ),
        )
    
    return fig

the data:

https://raw.githubusercontent.com/josepaulo1233/plotly-wind-graphs/main/data.csv

I trying not use some parameters but nothing is happen

Please clarify your specific problem or provide additional details to highlight exactly what you need. As it's currently written, it's hard to tell exactly what you're asking. — Community, Jul 19 '23 at 16:21

score 0 · Answer 1 · answered Jul 19 '23 at 16:52

I think your index might not be completely sorted so some points are connected out of order in time. You can try sorting the index of dff before creating traces inside your plot_var_prev function:

import pandas as pd
import plotly.graph_objects as go
from plotly.subplots import make_subplots

df = pd.read_csv('https://raw.githubusercontent.com/josepaulo1233/plotly-wind-graphs/main/data.csv', index_col=0, parse_dates=True)

def plot_var_prev(dff):

    fig = make_subplots(specs=[[{"secondary_y": True}]])
    dff = dff.sort_index() ## ⭠ sort by index
    fig.add_trace(
        go.Scatter(x=dff.index, 
                y=dff['mag_vento'].values,
                name="Magnitude"),
                secondary_y=False,
    )

    fig.add_trace(
        go.Scatter(x=dff.index, 
                y=dff['direcao_vento'].values, 
                name="Direção"),
                secondary_y=True,
    )

    fig.update_xaxes(title_text="<b>Data</b>")
    fig.update_layout(hovermode="x", hoverlabel=dict(font_size=16, font_family="Poppins"))
    fig.update_layout(plot_bgcolor='rgba(0, 0, 0, 0)', paper_bgcolor='rgba(0, 0, 0, 0)',)
    fig.update_layout(
            legend=dict(orientation="v"),
            yaxis=dict(
                title=dict(text='<b>Magnitude do vento [m/s]</b>'),
                side="left",
                type='linear'
            ),
            yaxis2=dict(
                title=dict(text="<b>Direção do vento [°]</b>"),
                side="right",
                type='linear',
                overlaying="y",
                tickmode="sync",
                rangemode='tozero'
            ),
        )
    
    return fig

fig = plot_var_prev(df)
fig.show()

@josepauloOliveira glad to hear my answer helped! when you have a chance, please consider [accepting the answer](https://stackoverflow.com/help/someone-answers#:~:text=To%20mark%20an%20answer%20as,the%20answer%2C%20at%20any%20time.) — Derek O, Jul 19 '23 at 18:02

score -1 · Answer 2 · answered Jul 19 '23 at 16:10

You can simply achieve that with matplotlib.axes.Axes.twinx. Here's a simple example of plotting a sine wave and a consine wave sharing the same x-axis but having different y-axis scales.

import numpy as np
from matplotlib import pyplot as plt

def main():
    x_axis = np.linspace(0, 2 * np.pi, 50)
    sine = np.sin(x_axis)
    cosine = np.cos(x_axis)

    fig, ax = plt.subplots() 
    # twinx is a method of Axes class
    # use the plt.subplots method to create an axe object so you can call the twinx method on it

    ax.plot(x_axis, sine)
    ax.set_ylabel("Sine wave")
    ax_twin = ax.twinx()

    ax_twin.plot(x_axis, cosine * 420)
    ax_twin.set_ylabel("Cosine wave")
    plt.show()

if __name__ == "__main__":
    main()

And here's the result:

OP specifically asked about plotly, which is a completely different library. if you look at OP's code, they are specifically making use of interactive features in plotly like the hovermode, and matplotlib doesn't support this feature among many other interactive features. a matplotlib solution would remove all interactivity, and making a matplotlib chart interactive like plotly is so much work that it doesn't really make sense — Derek O, Jul 19 '23 at 16:40

Plotly graphs two yaxis

2 Answers2