Figure widget to distinguish solid and dotted line plot based on condition(Year)

📊 Plotly Python
1

I am 1 week old on plotly and trying to create a line chart that shows solid lines for the period that has passed and a dotted line for period that is in the future and has a rangeslider to move across years.

Business case: (show power capacity by various fuel types (LNG/COAL/HYDRO/NUCLEAR) past years and future years should have a distinction in fill properties(solid/dash)

Though i manage to get the solid and dotted lines as per condition ,the chart displays very odd (the beginning and end year data is shown and rest is blank (screenshot attached) and when i use the range slider it renders even worse(Zooms into monthly granularity). )

the KEY_DATE Field i am using is fetched from the db and has a ‘YYYY-MM-DD hh:mm:ss’ considered as a date field.

datasetsample
datasetsample735×285 6.85 KB

code and output
import pandas as pd
import dash_html_components as html
from dash import Dash
from dash import dcc
from dash import html
import plotly.express as px
import plotly.graph_objects as go
import dash_bootstrap_components as dbc
from dash.dependencies import Input, Output
from ipywidgets import widgets
import plotly.io as pio

#read dataset
df = pd.read_csv(“C:\Users\asnikhm\Downloads\MASTER_Userinput.csv”)
df =df[(df[‘COUNTRY’]==‘South Korea’) & (df[‘MARKER_2’]==‘POWERGEN CAPACITY’) & (df[‘YEAR’]<2025)]
df =df.groupby([‘YEAR’,‘KEY_DATE’,‘MARKER’,‘REPORT_VERSION’],as_index=False)[‘VALUE’].sum()

OPT Define Styles

main_style = {
‘background’: ‘#FFFFFF’,
‘font-family’: “Arial”
}

title_style = {
‘background’: ‘#5473FF’,
‘text’: ‘#FFFFFF’
}

desc_style = {
‘background’: ‘#FFFFFF’,
‘text’: ‘5473FF’
}

dropdown_style = {
‘background’: ‘#DDE5ED’,
‘text’: ‘#221C35’
}

app = Dash(name)

Define App Layout

app.layout = html.Div(
## Step 1: Define App Style
style={
‘backgroundColor’: main_style[‘background’],
‘font-family’: main_style[‘font-family’]
},

create necessary sub components of layout

children=[
html.H1(
children=‘KOREA POWER CAPACITY’,
style={
‘backgroundColor’: title_style[‘background’],
‘color’: title_style[‘text’],
‘textAlign’: ‘center’}
),
html.Div(
children=‘POWERGEN , POWER_IMPORTS, POWER_EXPORTS’,
style={
‘backgroundColor’: desc_style[‘background’],
‘color’: desc_style[‘text’],
‘textAlign’: ‘center’}
),
dcc.Dropdown(
id=‘reportversion-dropdown’,
style={‘color’: dropdown_style[‘text’]},
options=[{‘label’: i, ‘value’: i} for i in sorted(df.REPORT_VERSION.unique())],
value=‘2022 Dec’,
multi=False
),
dcc.RangeSlider(id=‘year-slide’,
min=2018,
max=2025,
value=[2020,2022],
marks={2018: ‘2018’,
2019: ‘2019’,
2020: ‘2020’,
2021: ‘2021’,
2022: ‘2022’,
2023: ‘2023’,
2024: ‘2024’,
2025: ‘2025’},
step =1,
dots=True,
pushable =1
),
dcc.Graph(
id=‘graph-output’,
figure = {}
)
]
)

DEFINE Callback for interactivity between Components

@app.callback(Output(component_id=‘graph-output’, component_property=‘figure’),
[Input(component_id=‘reportversion-dropdown’, component_property=‘value’),
Input(component_id=‘year-slide’, component_property=‘value’)],
prevent_initial_call=False
)

Step 2: Define Function to Create and Update Graph

def update_graph(dropdown_value,year_sl):
print(“callback starting”)
print(dropdown_value)
selected_val =dropdown_value
if len(selected_val) > 0:
updated_df = df[(df[‘REPORT_VERSION’]==dropdown_value)]
upd_df1 = updated_df[(updated_df[‘YEAR’]>=year_sl[0])&(updated_df[‘YEAR’]<=year_sl[1])]
upd_df11 = upd_df1[(upd_df1[‘YEAR’]<=2023)]
upd_df22 = upd_df1[(upd_df1[‘YEAR’]>=2023)]
print(upd_df11)
print(upd_df22)
mygraph = go.FigureWidget(data=[
go.Scatter(x=upd_df11[‘KEY_DATE’],
y=upd_df11[upd_df11.MARKER==‘HYDRO’][‘VALUE’],
mode=‘lines’,
line={‘dash’:‘solid’,‘color’:‘blue’}),
go.Scatter(x=upd_df22[‘KEY_DATE’],
y=upd_df22[upd_df22.MARKER==‘HYDRO’][‘VALUE’],
mode=‘lines’,
line={‘dash’:‘dash’,‘color’:‘blue’}),
go.Scatter(x=upd_df11[‘KEY_DATE’],
y=upd_df11[upd_df11.MARKER==‘COAL’][‘VALUE’],
mode=‘lines’,
line={‘dash’:‘solid’,‘color’:‘yellow’}),
go.Scatter(x=upd_df22[‘KEY_DATE’],
y=upd_df22[upd_df22.MARKER==‘COAL’][‘VALUE’],
mode=‘lines’,
line={‘dash’:‘dash’,‘color’:‘yellow’}),
go.Scatter(x=upd_df11[‘KEY_DATE’],
y=upd_df11[upd_df11.MARKER==‘LNG’][‘VALUE’],
mode=‘lines’,
line={‘dash’:‘solid’,‘color’:‘orange’}),
go.Scatter(x=upd_df22[‘KEY_DATE’],
y=upd_df22[upd_df22.MARKER==‘LNG’][‘VALUE’],
mode=‘lines’,
line={‘dash’:‘dash’,‘color’:‘orange’})
])
mygraph.update_layout(
height=700,
width=1300,
showlegend=False)
mygraph.update_xaxes(
dtick=“M1”,
automargin=True,
tickangle=80,
tickfont_size=12,
fixedrange=False
)
return mygraph
elif len(selected_val) == 0:
raise Dash.exceptions.PreventUpdate
# Run app
if name==‘main’:
app.run_server(port=8052)

chart display2
chart display21563×951 46 KB

2

HI @Arshad welcome to the forums.

Could you please format your code for better readability?