Custom SI Unit Prefixes

📊 Plotly Python
1

When formatting text with SI units we get the G prefix for numbers greater than 1E9. For plots with financial or economic data we want to change the G to the more business friendly B for billions. The example below shows $790M, $1.1G and $1.2G. How can we make this show $1.1B and $1.2B? This was discussed as a D3 issue here but I can’t figure out how to make this change within Plotly React.


import React from 'react';
import Plot from 'react-plotly.js';

class App extends React.Component {
  render() {
    return (
      <Plot
        data={[
          { type: "bar", x: [1, 2, 3], y: [789000000, 1120000000, 1220000000] }
        ]}
        layout={{
          width: 320,
          height: 240,
          title: "A Fancy Plot",
          yaxis: { 
            tickformat: "$.2s", // want to show B instead of G for billions
            hoverformat: "$,.2s" // want to show B instead of G for billions
          }
        }}
      />
    );
  }
}
2

Also interested in using B for billions. Did you find a solution?

3

I have revisited this problem a few times since posting this but still have not found a solution.

4

@mattf1216 Here’s a solution I found by adding the following to your yaxis:

'tickprefix': '$'

or in JS:

tickprefix: '$'

My yaxis labels by default label large numbers as 1B, 500M, etc. so by adding the prefix, it comes out as $1B, $500M, etc.

I also removed tickformat altogether.

Let me know if that works for you as well!

5

@eddgr This worked – thank you!!

That solves the problem for the axis. For annotations I did this:

import { format } from "d3-format";

text: format(“$.2s”)(12300000000).replace('G', 'B')