✊🏿 Black Lives Matter. Please consider donating to Black Girls Code today.
📊 Dash 2.0 is Arriving. Register here.

Output of hover data to div with line breaks

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:


def trigger_hover_div(hdat):

Below is the output that is being produced.

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.Td(tx) for tx in trx.split(':')]
     for trx in t.split('<br>')

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

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

    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'])

Perfect, thanks for providing that!