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

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!

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!

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…

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

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.