How do you format hoverinfo for Pie chart?


I would like to be able to format the values that are displayed in hoverinfo for pie chart. Here is a codepen for context:

How can I go about formatting each of the value in allValues so it can show up as 1.8k, 600, 3.6k if they are integers or show up as 00:30:00, 00:10:00, 01:00:00 if they are seconds?


Unfortunately, there’s no way to specify a custom format for pie hover labels at the moment.

You’ll have to build a text array from scratch:

Adding an answer now (years later) since this was the main google result that popped up for me, trying to find the answer to this question. (I think this functionality was introduced a couple years ago for all plot types.)

const data = [{
  hovertemplate: '%{label}<br>Value = %{value:$,.2f}<br>Percent = %{percent}<extra></extra>',

That’s the general answer. I’ll pass on the specifics of this question (“k” as thousands, etc). Note the <extra></extra> prevents the trace name from appearing in a side box.