Output of hover data to div with line breaks

Dash Python
1

Hi I’m trying to create a chart with a fixed-position div beneath it which will contain the hoverData from the chart. The Hover data for each point has multiple lines on it. I succesfully achieved the look i wanted by using
tags for the line breaks.
When I send it over to the Div in my callback, how do i get it to interpret the
tags so that they display as linebreaks and not as the word “
” in the text?
This is the callback i’m using:

@app.callback(
dash.dependencies.Output('well_comp_hovertext','children')
,[dash.dependencies.Input('well_comp','hoverData')]
)

def trigger_hover_div(hdat):
return(json.dumps(hdat[‘points’][0][‘text’]))

Below is the output that is being produced.
Capture654654894

2

FFR i’ve been able to get it to work by changing the return statement to produce a table:

def trigger_hover_div(hdat):
t = hdat['points'][0]['text']
t = [html.Table(
    [html.Tr(
        [html.Td(tx) for tx in trx.split(':')]
         )
     for trx in t.split('<br>')
    ]
)]
return(html.Table(t))

This does technically work - but is there a way to have made those line breaks work without going through this step?

3

If you want the <br> in your text to be recognized as line break, you can use the library dash_dangerously_set_inner_html. The code kind of look like this:

import dash_dangerously_set_inner_html
...

@app.callback(
    Output('hoverData_out', 'children'),
    [Input('graph', 'hoverData')])
def display_click_data(hoverData):
    if hoverData:
        return dash_dangerously_set_inner_html.DangerouslySetInnerHTML(hoverData['points'][0]['text'])
4

Perfect, thanks for providing that!