Graph multiple different lines colors doesnt change and all the lines has same color

i have e different dropdowns , and i want when user select different “CELL” s, DRAW A NEW LINE FOR EACH CELL WITH DIFFERENT COLORS.
it draws lines , but all of the cells color are the same. it drives me crazy an i dont know what i sthe problem.

**codes are here in this link **
codes link

python codes

  import pandas as pd
  from dash import Dash, Input, Output, dcc, html     
  import openpyxl
  import os
  import datetime

    excelPath= r'C:\Users\i\Desktop\nouri\tools\t1\materials-python- 
    dash\avocado_analytics_3\diagram_syria.xlsx'


data = (
    pd.read_excel(os.path.join(excelPath), engine='openpyxl' )

   .assign(Date=lambda data: pd.to_datetime(data["Date"], format="%m-%d-%Y"))
    .sort_values(by="Date" )
  )
 regions = data["region"].sort_values().unique()
 kashef_types = data["type"].sort_values().unique()

external_stylesheets = [
{
    "href": (
        "https://fonts.googleapis.com/css2?"
        "family=Lato:wght@400;700&display=swap"
    ),
    "rel": "stylesheet",
 },
 ]
 app = Dash(__name__, external_stylesheets=external_stylesheets)
 app.title = "KASHEF Analytics: Understand Your Interference!"

 app.layout = html.Div(
 children=[
     html.Div(
         children=[
             html.P(children=" ", className="header-emoji"),
             html.H1(
                children="KASHEF Analytics", className="header-title"
            ),
             html.P(
                children=(
                    "Analyze the behavior of Cells "
                    " over the different times "
                ),
                className="header-description",
            ),
        ],
        className="header",
     ),
     html.Div(
         children=[
             html.Div(
                 children=[
                    html.Div(children="Cell", className="menu-title"),
                    dcc.Dropdown(
                        id="region-filter",
                        options=[
                            {     "label": region,
                                  "value": region
                             }
                            for region in regions
                        ],
                        value="Banias-Qouz_L1",
                        clearable=False,
                        searchable=True,

                        className="dropdown",
                    ),
                ]
             ),
            html.Div(
                children=[
                    html.Div(children="Type", className="menu-title"),
                    dcc.Dropdown(
                        id="type-filter",
                        options=[
                            {
                                "label": kashef_type.title(),
                                "value": kashef_type,
                            }
                            for kashef_type in kashef_types
                        ],
                        value="organic",
                        clearable=False,
                        searchable=False,
                        className="dropdown",
                    ),
                ],
            ),
            html.Div(
                children=[
                    html.Div(
                        children="Date Range", className="menu-title"
                    ),
                    dcc.DatePickerRange(
                        id="date-range",
                        min_date_allowed=data["Date"].min().date(),
                        max_date_allowed=data["Date"].max().date(),
                        start_date=data["Date"].min().date(),
                        end_date=data["Date"].max().date(),
                    ),
                ]
            ),
        ],
        className="menu",
      ),
     html.Div(
        children=[
            html.Div(
                children=dcc.Graph(
                    id="price-chart",
                    config={"displayModeBar": False},
                ),
                className="card",
            ),
            #html.Div(
                children=dcc.Graph(
                   id="price-chart",
                    config={"displayModeBar": False},
                ),
                className="card",
            ),
        ],
        className="wrapper",
    ),
   ]
)


@app.callback(
   Output("price-chart", "figure"),
   Input("region-filter", "value"),
   Input("type-filter", "value"),
   Input("date-range", "start_date"),
    Input("date-range", "end_date"),
  )
 def update_charts(region, kashef_type, start_date, end_date):
     filtered_data = data.query(
     "region == @region and type == @kashef_type"
     " and Date >= @start_date and Date <= @end_date"
 )
  pucch_pusch_chart_figure = {
       "data": [
         {
            "x": filtered_data["Date"],
            "y": filtered_data["PUCCH"],
            "type": "lines",
            "hovertemplate": "%{y:.2f}<extra></extra>",
        },
     ],
    "layout": {
        "title": {
            "text": "Analyzed by Kashef",
            "x": 0.05,
            "xanchor": "left",
        },
        "xaxis": {"fixedrange": True},
        "yaxis": {"tickprefix": "", "fixedrange": True},
        "colorway": ["#17B897"],
    },
   }
   return pucch_pusch_chart_figure

if __name__ == "__main__":
    app.run_server(debug=True)

Welcome to the forums @sooura.

Could you please post the question and code here? Not every user might be willing to go to SO just to answer your question here. :hugs:

thanks alot, did you check the link i wrote? all of the codes are written there

codes added

I think with "colorway": ["#17B897"] all of traces will be set as this color. I’m curious that why you did not use something like px.line to make your graphs?

1 Like

Hi,

maybe you can take a look at this (the last example)

actually it was a free source that i used, i am new to dash, i used list of colorway colors , but nothing changed

Can you share your sample data?

i added a photo

Sorry but it’s so hard for us with photo to try to run your code. Please upload your data to somewhere and give us link.

1 Like


@sooura
Try to upload your data file to Google drive and share the link, or to GitHub (ideally a csv file).
This will allow us to run your code with the data on our computer, like @hoatran said, and help find a solution.