Multi-Level X-Axis in Charts

📊 Plotly Python
1

Hello all,

I’m working on a data visualization project requiring 3-5 levels on the x-axis of a chart. My attempts and examples I’ve seen so far only support 2 levels. I’ve seen similar complexity in Excel pivot charts and believe it’s achievable.

Can anyone guide me on how to extend this beyond 2 levels/categories? Any tips, code examples, or pointers to relevant libraries/plugins would be greatly appreciated.

Thank you in advance!

1 Like
2

have you found any solution for this?

3

Multiple xaxis are possible with plotly. See this example on codepen to get an idea.

Basically you just need to define the xaxis in the layout and reference it from the data. I’ve created a minimal example in python:

import plotly.graph_objects as go

x = ['2000-01', '2000-02', '2000-03', '2000-04', '2000-05', '2000-06', '2000-07', '2000-08', '2000-09', '2000-10', '2000-11', '2000-12'];
x2 = ['2001-01', '2001-02', '2001-03', '2001-04', '2001-05', '2001-06', '2001-07', '2001-08', '2001-09', '2001-10', '2001-11', '2001-12'];
x3 = ['2002-01', '2002-02', '2002-03', '2002-04', '2002-05', '2002-06', '2002-07', '2002-08', '2002-09', '2002-10', '2002-11', '2002-12'];
y = [36.5, 26.6, 43.6, 52.3, 71.5, 81.4, 80.5, 82.2, 76, 67.3, 46.1, 35];
y2 = [37.5, 25.6, 40.6, 50.3, 61.5, 75.4, 80.5, 81.2, 79, 62.3, 42.1, 32];
y3 = [27.5, 15.6, 20.6, 32.3, 21.5, 35.4, 32.5, 61.2, 69, 52.3, 32.1, 12];

data = [
  dict(x=x, y=y, type='scatter'),
  dict(x=x2, y=y2, type='scatter'),
  dict(x=x3, y=y3, type='scatter'),
];

fig = go.Figure()
fig.add_trace(go.Scatter(x=x, y=y, name="data1"))
fig.add_trace(go.Scatter(x=x2, y=y2, name="data2", xaxis="x2"))
fig.add_trace(go.Scatter(x=x3, y=y3, name="data3", xaxis="x3"))

fig.update_layout(
    xaxis2=dict(
        side="top",
        overlaying="x",
        position=0.95),
    xaxis3=dict(
        side="top",
        overlaying="x",
        position=1)
    )

fig.show()

The problem is, that shift and autoshift are currently not imlemented for the xaxis. Thus, you have to play around with position, anchor, overlaying, paddings and the like to get the chart looking good.

hth,
martin