Controlling the Labels in Dash

Dash Python
1

Hey all I am new to Dash/Plotly but am trying to learn on my free time. I am having trouble figuring out how I can control the labels on my figure. I was able to change the label when my drop down input changes, but I can only get it to display the options “value” rather than the “label”. For instance my label reads ‘positive’ rather than ‘Positive Covid-19 Cases’ It seems like it should be something very easy to do but I can’t seem to figure it out. Thanks!`

import pandas as pd
import plotly.express as px

import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output


app = dash.Dash(__name__)

covid_data = pd.read_csv(r'https://api.covidtracking.com/v1/states/current.csv')


app.layout = html.Div([

    html.H1("Current Covid-19 Data in the United States", style={'text-align': 'center'}),

    dcc.Dropdown(id="slct_cat",
                 options=[
                     {"label": "Positive Covid-19 Cases", "value": 'positive'},
                     {"label": "Currently Hospitalized", "value": 'hospitalizedCurrently'},
                     {"label": "Total Test Taken", "value": 'totalTestResults'}],
                 multi=False,
                 value='positive',
                 style={'width': "40%"}
                 ),

    html.Div(id='output_container', children=[]),
    html.Br(),

    dcc.Graph(id='covid_map', figure={})

])



@app.callback(
    [Output(component_id='output_container', component_property='children'),
     Output(component_id='covid_map', component_property='figure')],
    [Input(component_id='slct_cat', component_property='value')]
)


def update_graph(option_slctd):
    print(option_slctd)
    print(type(option_slctd))


    container = f'{option_slctd} in the US'

    dff = covid_data.copy()
   

    fig = px.choropleth(
        data_frame=dff,
        locationmode='USA-states',
        locations='state',
        scope="usa",
        color=option_slctd,
        hover_data=['state', option_slctd],
        color_continuous_scale=px.colors.sequential.YlOrRd,
        labels={option_slctd: option_slctd},
        template='plotly_dark'
    )

    return container,fig


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

Hi devinford2,

The behavor is as expected, the dropdown shows the ‘labels’:

Image
Image1030×451 11.6 KB

And the ‘value’ also is Ok:

image1

I don’t see any unusual:

image2
image2815×322 24.5 KB

3

The label for the color bar on the rights says positive when I would like it to say something like Positive Cases in the US. Also the hover labels when you hover over the states is the same

4

Just assign them to the corresponding chart properties.

5

Sorry I am still confused. I currently am using the variable option_slctd so that the label will change to match the dropdown. I was hoping to display the “label”’ key’s value (Positive Covid-19 Cases) rather than “value” key’s value (positive). Again thanks for helping me through this.

dcc.Dropdown(id="slct_cat",
                 options=[
                     {"label": "Positive Covid-19 Cases", "value": 'positive'},
                     {"label": "Currently Hospitalized", "value": 'hospitalizedCurrently'},
                     {"label": "Total Test Taken", "value": 'totalTestResulou for working through this wiwth mets'}],
6

devinford2

The property ‘value’ of a dropdown has only one element that is the ‘value’ element of the options selected.

You need to get the ‘label’ then in the callback add the ‘options’ property as input an assign a varaiable.

@app.callback(
    [Output(component_id='output_container', component_property='children'),
     Output(component_id='covid_map', component_property='figure')],
    [Input(component_id='slct_cat', component_property='value'),
      Input(component_id='slct_cat', component_property='options')]
)


def update_graph(drop_value, drop_options):
      print(drop_options)

Then you can see the elements of the variable drop_options with a print that has all the options ‘value’ and ‘label’.
Using the drop_value find the label and then apply to the property you want (name, hovertext, hoverlabel, legend, etc.)