Enforcing Incoming X-Axis Data to map with Static X-Axis - Plotly

Question

I am trying to plot a multi-axes line graph in Plotly and my data is based on the percentage (y-axis) v/s date (x-axis).

X and Y-axis coming from the database via pandas

Now since Plotly doesn't understand the order of string date in the x-axis it adjusted it automatically.

I am looking for something where my x-axis remains static for dates and in order and graph plots on top of that mapping based on their dates matching parameter.

static_x_axis = ['02-11-2021', '03-11-2021', '04-11-2021', '05-11-2021', '06-11-2021', '07-11-2021', '08-11-2021', '09-11-2021', '10-11-2021', '11-11-2021', '12-11-2021', '13-11-2021', '14-11-2021', '15-11-2021', '16-11-2021', '17-11-2021', '18-11-2021', '19-11-2021', '20-11-2021', '21-11-2021', '22-11-2021', '23-11-2021']

and the above list determines the x-axis mapping.

I tried using range but seems that does not support static mapping or either map all graphs from the 0th point.

Overall I am looking for a way that either follows a static date range or either does not break the current order of dates like what happened in the above graph.

Thanks in advance for your help.

Answer 1

• from your question your data:
  • x date as a string representation (i.e. categorical)
  • y a number between 0 and 1 (a precentage)
  • three traces
• you describe that x is unordered as source. Require it to be sorted in the x-axis
• below simulates a figure in this way
• then applies categorical axis sorting

import pandas as pd
import numpy as np
import plotly.graph_objects as go

s = pd.Series(pd.date_range("2-nov-2021", periods=40).strftime("%d-%m-%Y"))

fig = go.Figure(
    [
        go.Scatter(
            x=s.sample(10).sort_index().values,
            y=np.linspace(n/4, n/3, 10),
            mode="lines+markers+text",
        )
        for n in range(1,4)
    ]
).update_traces(texttemplate="%{y:.2f}", textposition="top center")

fig.show()
fig.update_layout(xaxis={"categoryorder": "array", "categoryarray": s.values})
fig.show()