Search code examples
d3.jsnumber-formattingapache-superset

Customise the number format in Apache superset

I am trying to do some customization in the apache superset. I want to show the number in superset chart in the Indian format. For eg. 1

10

100

1,000

10,000

1,00,000

10,00,000

1,00,00,000

10,00,00,000

In the number format dropdown when I am exploring chart there is no option to show the data like this. I have done set up a dev version of superset on my machine and found that it is using a package superset-ui-number-format. Now I don't know how to proceed with that.

Solution

  • If you can edit the code for your Superset instance/deployment, there is a way to accomplish this. This assumes you've pulled your code from GitHub, and thus have a superset-frontend folder. If so, then open superset-frontend/src/setup/setupFormatters.js and do the following:

    1. At the top, alongside createDurationFormatter make sure to import createD3NumberFormatter from @superset-ui/number-format

    2. Alongside all the registerValue entries following getNumberFormatterRegistry(), add one more that looks like so:

    .registerValue(
  'CURRENCY_INDIA',
  createD3NumberFormatter({
    locale: {
      decimal: '.',
      thousands: ',',
      grouping: [3, 2, 2, 2, 2, 2, 2, 2, 2, 2],
      currency: ['₹', ''],
    },
    formatString: '$,.2f',
  }),
)

    Then, when you're editing a chart in the Explore view, you can type CURRENCY_INDIA as your formatter, and it should work!

    Indian currency formatter

    Optionally, if you're maintaining a fork of superset-ui you can add this as an option included in the Explore viz controls. To do that, you would add it in superset-ui_preset/packages/superset-ui-chart-controls/src/shared-controls/index.tsx as one of the exported D3_FORMAT_OPTIONS.