How can I move/shift the y-axis in plotly figures?

[kristada619]

Say I have the following plot:

from plotly.offline import download_plotlyjs, init_notebook_mode, plot, iplot
import plotly.graph_objs as go

trace1 = go.Scatter(x=[1,2,3], y=[4,5,6], marker={'color': 'red', 'symbol': 104, 'size': 10}, 
                    mode="markers+lines",  text=["one","two","three"], name='1st Trace')
data=go.Data([trace1])
layout=go.Layout(xaxis={'title':'x1', 'showline':True}, yaxis={'title':'y1', 'showline':True}, height=380, width=380)
figure1=go.Figure(data=data,layout=layout)
init_notebook_mode(connected=True)
iplot(figure1, show_link=False)

I want to increment the x-ticks by 1, but while doing that the y-axis also moves 1 unit to the right (i.e., the x-axis starts at 2 now instead of 1):

figure1['data'][0]['x'] = (2,3,4)
iplot(figure1)

I want to retain the original axis layout (i.e., I still want the x-axis to start at 1, and not at 2, even though I incremented the x-axis values). I tried adding tickvals and ticktext to the xaxis parameter in layout, but that doesn’t seem to have any effect:

figure1['layout'] = {'xaxis':{'title':'x2', 
                              'tickvals':[0,1,2,3,4,5], 
                              'ticktext':[0,1,2,3,4,5],
                              'showline':True
                             }, 
                     'yaxis':{'title':'y1', 'showline':True},
                     'height':380,
                     'width':380
                    }

iplot(figure1)

I also tried using tickmode='linear' and ticks='outside', but they don’t have any effect either.

How can I achieve this?

[jmmease]

Hi @kristada619,

I don’t think I understand what you want to achieve. Are you saying that you want to specify the x data as [1, 2, 3] but you want the x tick labels to read [2, 3, 4]? If so you could do this by setting tickvals=[1, 2, 3] and ticktext=[2, 3, 4], but that seems a bit misleading.

Can you include an image, even from another library, of what you want the end result to look like?

-Jon

[kristada619]

Hi @jmmease,

I figured out the solution. After modifying the x-tick values, we need to give the x-axis the range of values in the x-axis to display; otherwise, it starts from the smallest x-tick value by default. So, the following is what I needed:

figure1['data'][0]['x'] = (2,3,4)

x_min = 1
x_max = 4.5

figure1['layout']['xaxis'].update(range=[x_min, x_max])
iplot(figure1) 

[bernice.liting]

Hi,

I have 2 questions, one is related to shifting the y-axis but the other is not.

1. I would like to shift the y-axis from the left side of the chart to the middle of the chart. Is that possible?

2. I have 2 sets of horizontal bar charts, one set on the left and the other set on the right. For the bars on the left, I want the textposition to be at the left end of the bar, but the options for textposition are “inside”, “outside”, “auto” and “none”. These options do not allow me to set the textposition to the left side.

Is there any other way to plot the charts so that the textposition and y-axis can be adjusted?

These are my codes:

import plotly 
import plotly.graph_objs as go

x_left=[20,20,20,25,7,5,3]
x_right=[0,7,25,33,20,10,5]

fig2 = go.Figure()
fig2.add_trace(
    go.Bar(
        x=x_left,
        y=["0h", "<1h", "1h", "2h", "3h", "4h", "≥5h"],
        base=[-20, -20, -20, -25, -7, -5, -3],
        orientation='h',
        marker_color='cornflowerblue',
        text=x_left,
        textposition='inside',
    ),
)
fig2.add_trace(
    go.Bar(
        x=x_right,
        y=["0h", "<1h", "1h", "2h", "3h", "4h", "≥5h"],
        orientation='h',
        marker_color='lightblue',
        text=x_right,
        textposition='inside',
    ),
)
    
fig2.update_xaxes(
    showticklabels=False,
) 
fig2.update_layout(
    xaxis = dict(range=(-40,40)),
    plot_bgcolor='white',
    barmode='stack',
    showlegend=False,
)
fig2.show()

This is how my chart looks like:

This is how I want it to look like:

[bernice.liting]

Hi all,

I’ve managed to solve the problem by using annotations to indicate the text and y-axis.

[empet]

Hi @bernice.liting,

To get a barchart similar to that in your posted image, you can define the central white band, as a scatter plot that fills a rectangle, while the inside text, as a scatter plot of mode ‘text’:

import numpy as np
import plotly.graph_objects as go

a = 2
b = 6.5
c = -0.5
xleft = np.array([20,  20, 20 , 25, 7, 5, 3])
xright = [0, 7, 25, 33, 20, 10, 5]
yidx =np.arange(7)
fig = go.Figure()
fig.add_trace(go.Bar(x=-xleft,
                     y=yidx,
                     orientation='h',
                     name='Left',
                     width=1,
                     customdata=xleft,
                     hovertemplate = "%{customdata}"
                    ))

fig.add_trace(go.Bar(x= xright,
                     y= yidx,
                     orientation='h',
                     width=1,
                     name= 'Right',
                     hovertemplate="%{x}"))  
fig.add_scatter(x=[-a, a, a, -a],
                y= [b, b, c, c], fill='toself',
                mode='lines',
                fillcolor='white' , line_color='white',
                showlegend=False,
               )
fig.add_scatter(x= [0 ]*7,
                y=yidx,
                text=['0h', '<1h', '1h', '2h', '3h', '4h', '$\geq5h$'],
                mode='text',
                showlegend=False,
               )
fig.update_layout(barmode='relative', 
                  height=500, 
                  width=800, 
                  yaxis_autorange='reversed',
                  yaxis_visible=False,
                  bargap=0.01)

[bernice.liting]

Hi @empet,

Thank you for sharing your solution! This is really helpful, especially the hovertemplate.