CODEWITHSUNDEEP
plotly
Ranny
Ranny

Reputation: 315

Plotly double x-axis

As in title. I cant find a way to add second (or even third) set of labels for x-axis. For example I'd like to display distance in kilometers and miles at the same time. Is it possible in Py?

Edit: not sure why this question was closed. I will try to add some more clarification.

import plotly.graph_objects as go

fig = go.Figure()

fig.add_trace(go.Scatter(
    x=[1, 2, 3],
    y=[4, 5, 6],
    name="data"
))

fig.show()

I'm looking to add another labels for x-asis. Labels will be for the same trace. For example I want to see label '1' and below it another label let's say '22'. Expressing same x value in different units, like km-miles, Celsius-Fahrenheit etc.

Mapping would be (random example) 1:22, 2:33, 3:44. With options to add more sets of labels for x-axis.

In general I'm looking for using two of Pandas Data Frame's columns as dual x-axis in Plotly's graph.

EDIT2: Here is a work-around I came up with. It need to be polished, especially how x labels are displayed. Any improvements are still welcome.

import plotly.graph_objects as go

fig = go.Figure()

fig.add_trace(go.Scatter(
    x=[1, 2, 3],
    y=[4, 5, 6],
    name="data1"
))

fig.add_trace(go.Scatter(
    x=[22, 33, 44],
#     y=[4, 5, 6],
    y=['A', 'B', 'C'], # provide any categorical values to hide trace
    name="data2",
    xaxis="x2",
#     visible= 'legendonly', #  False,  #   using this creates problems with sync x-axes
    showlegend = False
))


fig.update_layout(
    xaxis2=dict(
        title="xaxis2 title",
        titlefont=dict(
            color="#ff7f0e"
        ),
        tickfont=dict(
            color="#ff7f0e"
        ),
#         anchor=    'x',  # "free",  # line for testing x-axes sync
        overlaying="x",
        side="top",
        position=1
    )
)


fig.show()

Upvotes: 0

Views: 1114

Answers (1)

Karthik
Karthik

Reputation: 2431

Please check the snippet for Dual x-axes which I created using random data. The miles list its just i used the standard formula 1km = 0.622 Miles ,hence i multiplied km list with 0.622 KM vs M

import plotly.plotly as py
import plotly
from plotly.graph_objs import *

km=[i for i in range(10)]
m=[0.622*i for i in km]
#KM->[0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
#MILES->[0.0, 0.622, 1.244, 1.866, 2.488, 3.11, 3.732, 4.354, 4.976, 5.598]

trace1 = Scatter(
    y=m,
    x=[i for i in range(10)],
    mode='lines',
    xaxis='x1',
    name="M"
)
trace2 = Scatter(
    y=km,
    x=[i for i in range(10)],
    mode='lines',
    xaxis='x2',
    name="kM"
)
layout = Layout(
    yaxis=YAxis(
        title = "y1"
        ),
    xaxis=XAxis(
        title= 'Miles'
    ),
    xaxis2=XAxis(
        title= 'Kilometers',
        side = 'top',
        overlaying='x1'
    ),
)
data = [trace1, trace2]
fig = Figure(data=data, layout=layout)
plotly.offline.plot(fig, filename='M-KM.html')

Refer Dual axes for more details

Upvotes: 1

Related Questions