✊🏿 Black Lives Matter. Please consider donating to Black Girls Code today.
🐇 Announcing Dash VTK for 3d simulation graphics. Check out the March webinar.

Multiple Line Charts


I trying to create a multiple line charts where have one line for each machine and ‘Time’ in on X axis. However I tried a lot of combinations to generate X and Y label. The more closer that I git from expected result is chart below.

  • All Advises are welcome.

This is the dataframe.

Machine Units Pruduced  Time
K2K02   1900            15
K2K03   311             15
K2K01   5230            17
K2K02   1096            12
K2K03   1082            11
K2K07   587             17...

So i Grouping and unstacking to prepare df to plot graph.

fdr = dff3.groupby(['Time', 'Machine']).sum()
fdr2 = fdr.unstack('Time')

This is my code:

import dash_table_experiments
import dash
import dash_core_components as dcc
import dash_html_components as html
import pandas as pd
import plotly.graph_objects as go
import numpy as np
import dash_table_experiments as dash_table
import dash
from dash.dependencies import Input, Output
import dash_table
import pandas as pd
import plotly_express as px
import plotly.offline as pyo

dff3 = pd.read_csv('df3.csv', encoding='latin-1', low_memory=False)
fdr = dff3.groupby(['Time', 'Machine']).sum()
fdr2 = fdr.unstack('Time')

app = dash.Dash()

app.layout = html.Div([ 

        id = 'GrapGo',
        figure = {
            'data' : [

                x = fdr2.index,
                y = fdr2.loc[rowname],
                mode = "markers+lines",
                name = rowname
                )for rowname in fdr2.index

            'layout' : go.Layout(
                title = "Grafico com go",
                xaxis = {'title': 'X Label'},
                yaxis = {'title': 'y Label'}



if __name__ == '__main__':

This is graph i getting.

The expected result is:

Hi @ceuzebio, you can use use the plotly.express functions to perform the groupby operations for you. See for example the code below

import plotly.express as px
machines = ['A', 'A', 'A', 'B', 'B', 'B']
units = [200, 100, 300, 150, 250, 200]
time = [1, 2, 3, 1, 2, 3]
fig = px.line(dict(machines=machines, units=units, time=time), x='time', y='units', color='machines')

(you can pass the fig object to dcc.Graph.figure instead of the dictionary above). Also see https://plot.ly/python/plotly-express/ and https://plot.ly/python/px-arguments/. Hope this helps!

1 Like

I used a dictionary here but you can pass a dataframe directly to px.line.

1 Like

@Emmanuelle Thank you so much,

I make a few manipulations in data and get the expected result with.

#chartd = px.data.
fig = px.scatter(fdr4, x="Time", y="Units Pruduced", color="Machine")

So my question is: Its possible inset this format in to HTML Dash with dash style? if yes do you have any reference to indicate?

Thank you.

Yes, if you have a plotly figure object fig, then in your code you pass it to the dcc Graph as follows

        id = 'GrapGo',
        figure = fig)

In the dash docs (https://dash.plot.ly/interactive-graphing) we show how to pass a figure as a dictionary with data and layout keys but in fact you can pass any plotly figure.


@Emmanuelle Thank you so much :smiley:

Hi Emmanuele,

There is any reference about how i cant make the same char in plotly.graph_objects, i thin that is to easy to style and manipulate componentes.

If you have any one could you please share?

Thank you so much.

1 Like

Hi @Emmanuelle,

Can you please provide an example of how you would use plotly.express with a customized layout to pass it to dcc.Graph? I read the docs that you’ve linked but I am not sure where this is explicitly mentioned.

I think that this is what @ceuzebio is asking in his last comment.

This video that I created might help you. Towards the end of the video (19th minute, I think) it shows how to go deeper into Plotly Express and customize some layout.