Can i extend my secondary axis to the sides of the chart?

📊 Plotly Python
1

I am creating a plot with two y axes. first trace is a bar graph
second trace is a line chart

When the chart is rendered the secondary trace does not touch the sides of the graph as the data starts and stops where it lands.

is it possible to ‘fake’ the secondary y axis to touch the sides?

image
image1230×571 31.3 KB

Here is my code

import plotly.graph_objects as go
import plotly.express as px

# Load the gapminder dataset
gapminder = px.data.gapminder()

# Create a mask for Afghanistan
mask = gapminder["country"] == "Afghanistan"

fig = go.Figure()

# Add a trace for Afghanistan lifeExp data.
fig.add_trace(
    go.Bar(
        x=gapminder[mask]["year"],
        y=gapminder[mask]["lifeExp"],
        name="Life Expectancy",
    )
)

# Add a trace for Afghanistan gdpPercap data, 
fig.add_trace(
    go.Scatter(
         x=gapminder[mask]["year"],
        y=gapminder[mask]["gdpPercap"],
        fill="tozeroy",
        yaxis="y2",
        name="GDP Per Capita",
    )
)

# Update layout to include a secondary y-axis and a title
fig.update_layout(
    title="Life Expectancy vs GDP Per Capita",
    xaxis=dict(
        title="Years",
    ),
    yaxis=dict(
        title="Life Expectancy",
        titlefont=dict(color="rgb(0, 0, 0)"),
        tickfont=dict(color="rgb(148, 103, 189)"),
    ),
    yaxis2=dict(
        title="GDP Per Capita",
        titlefont=dict(color="rgb(0, 0, 0)"),
        tickfont=dict(color="rgb(0, 0, 0)"),
        overlaying="y",
        side="right",

    )
)

fig.show()

is this possible?

2

Hi @twelsh37,

this effect is due to the width of the bars. The width is centered around the data point. I’m not sure how to adapt the graph to your needs.aby you can fix the x-range to the first/last data point. That would probably lead to half bar width’s at the start and beginning.

Adding data points to your line graph is not an option, I guess.

3

Hi @AIMPED,

Thanks for the reply. It got me thinking. I rejigged the code a bit and ‘added in’ duplicate data points for the two years preceding and following the Scatter plot, and this got me to the edges of the chart. It is not an Ideal solution but one that works for my 'demonstration purposes.

The rejigged bit is as follows, which handles the preceding and following years plus /minus 2

# Extract the years and GDP per capita for Afghanistan
years = gapminder[mask]["year"].tolist()
gdp = gapminder[mask]["gdpPercap"].tolist()

# Add a data point at the start and end of the scatter plot
years = [1952 - 2] + years + [2007 + 2]
gdp = [gdp[0]] + gdp + [gdp[-1]]

The full code for the chart is as follows

import plotly.graph_objects as go
import plotly.express as px

# Load the gapminder dataset
gapminder = px.data.gapminder()

# Create a mask for Afghanistan
mask = gapminder["country"] == "Afghanistan"

# Extract the years and GDP per capita for Afghanistan
years = gapminder[mask]["year"].tolist()
gdp = gapminder[mask]["gdpPercap"].tolist()

# Add a data point at the start and end of the scatter plot
years = [1952 - 2] + years + [2007 + 2]
gdp = [gdp[0]] + gdp + [gdp[-1]]

fig = go.Figure()

# Add a trace for Afghanistan lifeExp data, fill down to xaxis
fig.add_trace(
    go.Bar(
        x=gapminder[mask]["year"],
        y=gapminder[mask]["lifeExp"],
        name="Life Expectancy",
    )
)

# Add a trace for Afghanistan gdpPercap data, fill down to xaxis, and plot on secondary y-axis
fig.add_trace(
    go.Scatter(
        x=years,
        y=gdp,
        fill="tozeroy",
        yaxis="y2",
        name="GDP Per Capita",
    )
)

# Update layout to include a secondary y-axis and a title
fig.update_layout(
    title="Life Expectancy vs GDP Per Capita",
    xaxis=dict(
        title="Years",
    ),
    yaxis=dict(
        title="Life Expectancy",
        titlefont=dict(color="rgb(0, 0, 0)"),
        tickfont=dict(color="rgb(148, 103, 189)"),
    ),
    yaxis2=dict(
        title="GDP Per Capita",
        titlefont=dict(color="rgb(0, 0, 0)"),
        tickfont=dict(color="rgb(0, 0, 0)"),
        overlaying="y",
        side="right",
    ),
)

fig.show()

The chart is output as follows, which looks better and will probably pass muster under the unwatchful eyes of a pedantic chart viewer. Those gaps in the first chart were bugging me as I knew I would get questions if I submitted some work like that.

If I could just eradicate that first data point, then I would be golden.

image
image1212×592 31.7 KB

Thanks again Tom