Y Value of Bars in a Bar Chart (and Sending Tags to an HTML.H2 Component)

[russmcb]

I’m building custom hovertemplates for the hover text in my bar chart + choropleth map. I can’t figure out how to access each bar’s Y value which the examples show as {y} as in the line below which doesn’t work:

fig_bar.update_traces(hovertemplate=f'<br>{y}<br> killed per<br> million in {state}')

On a somewhat unrelated note, is there a way to return HTML tags to an HTML.H2 component? I want to insert a paragraph tag or two with programatically-determined text.

Thanks!

[AnnMarieW]

Hi @russmcb

Try using this syntax:

fig_bar.update_traces(hovertemplate=<br>%{y}<br> killed per<br> million in {state}')

You need the % in front of the {y} to indicate it’s a variable, and also remove the f at the beginning since this is not an f string.

See more info and examples here: https://plotly.com/python/hover-text-and-formatting/

And on the unrelated note, yes you can return things to the html.H2 component by giving it an id:

html.H2(id='text_content')

Then you can update the content in a callback:

Output('text_content', 'children')

I hope this helps!

[russmcb]

Awesome, I love easy solutions, thanks! I still need an f-string for my python variables but mixing dash vars (or whatever these are called) with an f-string was not a problem:

fig_bar.update_traces(hovertemplate=<br>%{y}<br> killed per<br> million in' + f'{state}'

I’m Still not sure how to return tags that format the text with it (I’ve got the callback and output set up already). I just want to do this, but it treats the html tag as part of the literal text when I return it to the component:
text = 'Great News: ' + '<br />There were no hispanics were killed in STATE!'
By contrast, putting basic html tags in my hovertemplate text works great.

I found this post which suggests 2 options: a) dcc.Markdown(), which I can’t use; or b) dangerously-set-inner-html. I’m hoping there’s a more dash-friendly way to do this…

Raw html as value of component

Hello, Is it possible to easily insert content (children of a dash component) with raw html embedded? I’m trying to insert raw html into a <td> html component. In particular, my use-case is to display text that has embedded '\n' characters as paragraph separators. I tried to replace \n with <p></p> with no luck, and was only able to implement by replacing the text with the dash components required to split the sentences and intersperse with html.P's. While this works for this simple use-case,…

[AnnMarieW]

Instead of using “raw html” you can use the the dash html components (and css) to style the text : https://dash.plotly.com/dash-html-components

[russmcb]

Thanks. I’m using those now, but sometimes I need to return text formatted with raw html. I’ll dig into dangerously-set-inner-html if I can’t hack around the current issue.