Plotly: How to edit text output based on value retrieved by hovering?

Question

I am using the below code to display x and y values on plotly dash. But then i want to be be able to add a another text field below the "value" textfield.

The text field would be called "Category" so that if the y value displayed is: 5k then category = not pricey or if value is 20k then category = average price and if value is 30k then category = too pricey.

How would i implement this? Here's the running code that displays the values hovered on

import json
from textwrap import dedent as d
import pandas as pd
import plotly.graph_objects as go
import numpy as np
import dash
import dash_core_components as dcc
import dash_html_components as html
import plotly.express as px
from dash.dependencies import Input, Output
from jupyter_dash import JupyterDash

# app info
app = JupyterDash(__name__)

styles = {
    'pre': {
        'border': 'thin lightgrey solid',
        'overflowX': 'scroll'
    }
}

# data and basic figure
x = np.arange(20)+10

fig = go.Figure(data=go.Scatter(x=x, y=x**2, mode = 'lines+markers'))
fig.add_traces(go.Scatter(x=x, y=x**2.2, mode = 'lines+markers'))

app.layout = html.Div([
    dcc.Graph(
        id='basic-interactions',
        figure=fig,
    ),

    html.Div(className='row', children=[
        html.Div([
            dcc.Markdown(d("""
              Click on points in the graph.
            """)),
            html.Pre(id='hover-data', style=styles['pre']),
        ], className='three columns'),
    ])
])


@app.callback(
    Output('hover-data', 'children'),
    [Input('basic-interactions', 'hoverData')])
def display_hover_data(hoverData):
    return json.dumps(hoverData, indent=2)

app.run_server(mode='external', port = 8070, dev_tools_ui=True,
          dev_tools_hot_reload =True, threaded=True)

Answer 1

With the following amendments to your setup:

    if hoverData['points'][0]['y'] >= 5000:
        Category = 'not Pricey'
    if hoverData['points'][0]['y'] >= 20000:
        Category = 'average price'
    if hoverData['points'][0]['y'] >= 30000:
        Category = 'Too pricey'
    
    output = json.dumps({'Date:':hoverData['points'][0]['x'],
                         'Value:':hoverData['points'][0]['y'],
                         'Category':Category
                        }, indent = 2)

... the code snippet below produces the following app:

You didn't specify category for values lower than 5000, so now only an empty string is returned. Give it a try and let me know how this works out for you.

import json
from textwrap import dedent as d
import pandas as pd
import plotly.graph_objects as go
import numpy as np
import dash
import dash_core_components as dcc
import dash_html_components as html
import plotly.express as px
from dash.dependencies import Input, Output
from jupyter_dash import JupyterDash

# app info
app = JupyterDash(__name__)

styles = {
    'pre': {
        'border': 'thin lightgrey solid',
        'overflowX': 'scroll'
    }
}

# data and basic figure
y = np.arange(100)+20
x = pd.date_range(start='1/1/2021', periods=len(y))

fig = go.Figure(data=go.Scatter(x=x, y=y**2, mode = 'lines+markers'))
fig.add_traces(go.Scatter(x=x, y=y**2.2, mode = 'lines+markers'))

app.layout = html.Div([
    dcc.Graph(
        id='basic-interactions',
        figure=fig,
    ),

    html.Div(className='row', children=[
        html.Div([
            dcc.Markdown(d("""
              Click on points in the graph.
            """)),
            html.Pre(id='hover-data', style=styles['pre']),
        ], className='three columns'),
    ])
])


# The text field would be called "Category" so that if the y value displayed is:
# 5k then category = not pricey or if value is 20k then category = average price and
# if value is 30k then category = too pricey.

@app.callback(
    Output('hover-data', 'children'),
    [Input('basic-interactions', 'hoverData')])
def display_hover_data(hoverData):
    global hd
    hd = hoverData
    Category = ''
    try:
        output = json.dumps({'Date:':hoverData['points'][0]['x'],
                           'Value:':hoverData['points'][0]['y']}, indent = 2)
        
        if hoverData['points'][0]['y'] >= 5000:
            Category = 'not Pricey'
        if hoverData['points'][0]['y'] >= 20000:
            Category = 'average price'
        if hoverData['points'][0]['y'] >= 30000:
            Category = 'Too pricey'
        
        output = json.dumps({'Date:':hoverData['points'][0]['x'],
                             'Value:':hoverData['points'][0]['y'],
                             'Category':Category
                            }, indent = 2)
        
        print(output)
        return output

            
    except:
        return None

app.run_server(mode='external', port = 8070, dev_tools_ui=True,
          dev_tools_hot_reload =True, threaded=True)