enable formatting numbers with natural language suffixes, k(ilo), M(illion), B(illion)
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 18.3k
- Forks
- 2k
- Avg merge
- 2d 12h
- Merged PRs (30d)
- 28
Description
Plotly doesn't currently let me format numbers, e.g. in hover templates, in "human" or "business" form, by which I mean essentially SI representation but with the suffix replacements k->k(ilo) M->M(illion), G->B(illion), T->T(trillion),.... (by pure luck, this is really just one necessary replacement in the range I've listed).
The reason seems to be that plotly relies on d3-format, which claims to "format numbers for human consumption" but misses the one format non-technically trained humans can actually consume at ease.
However, oddly plotly does use the "human readable" form by default for the X and Y columns in default hover displays, even when they're included in the hover templates manually as %{y}, but not for custom data included via %{customdata[0]} (see the MWE below). This in some sense makes this a bug: You want to include two columns of data in the same way, using the same format specifier, but you get different results.
Instead of waiting on d3, I would like to make this feature request: I believe plotly should default for custom data to the same formatting it uses by default elsewhere (including axes labels), unless a format specifier is explicitly listed, thus increasing consistency.
Example: Despite using text=y and hovertemplate ='%{y}<br>%{text}', I get different representations:
import plotly.graph_objects as go
y = [2, 100000, 2000000, 2000000000]
fig = go.Figure(go.Scatter(
x = [1,2,3,4],
y = y,
text = y,
hovertemplate ='%{y}<br>%{text}'
))
fig.show()

Similar requests elsewhere:
https://github.com/plotly/plotly.py/issues/1222
https://community.plotly.com/t/custom-si-unit-prefixes/29739/4
https://github.com/d3/d3/issues/2241
https://github.com/d3/d3-format/issues/71
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by tracing how hovertemplate values, especially %{y}, %{text}, and %{customdata[0]}, are formatted and how d3-format is used for axes and default hovers. Compare the existing behavior with the example, then define tests showing that custom data follows the default formatting unless an explicit format specifier is supplied, including the requested natural-language suffixes.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- d3, javascript
- Domain
- data-visualization
- Issue type
- Feature
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 32/100