Black Lives Matter. Please consider donating to Black Girls Code today.
Dash Enterprise delivers an incredible 21x cost savings 💸Download the e-book!

How to add multi scatter with different xaxis values

Hi,all
I want to add a figure with multi scatter,and they have the different xaxis values.
I got the picture with split xaxis,like that

code like:

for item in itemInfoList:
        print(item)
        itemid=item['itemid']
        data.append(go.Scatter(
            x=itemHistDict[itemid]['datetime'],
            y=itemHistDict[itemid]['value'],
            mode='lines'
        ))
layout=go.Layout(title='CPU使用率')
go.Figure(data=data,layout=layout)

Ok,I have found the way.

  1. add all xaxis values
  2. fill the y values with None
  3. set ‘connectgaps=True’
app.layout = html.Div([
    html.Link(rel='stylesheet', href='static/bWLwgP.css'),
    dcc.Graph(
        id='test1',
        figure=go.Figure(data=[go.Scatter(
            x=[0,1,2,3,4,5,6,7,8,9],
            y=[0.1,1,2,0.3,None,10,11,None,10.8],
            connectgaps =True
        ),
        go.Scatter(
            x=[0,1,2,3,4,5,6,7,8,9],
            y=[None,1,0.1,2,None,3.5,4,2.9,None,None],
            connectgaps =True
        )]
    )
)])

1 Like