T
TanStack•3y ago
xenial-black

Is it possible to format secondary axis values (e.g. convert bytes)?

I am charting to sum of data downloaded per data. The value of bytes can get very high, so naturally I want to represent the values as KB, MB, GB, TB, etc. However I don't know what the range of values will be ahead of time (it is based on the user's input). Is there any way to dynamically render the values and axis labels as human-friendly filesizes?
1 Reply
xenial-black
xenial-blackOP•3y ago
Disregard, this is achievable via the scale formatter: 
const secondaryAxes = useMemo(
  (): AxisOptions<DownloadTimeseriesRecord>[] => [
    {
      getValue: (datum) => Number(datum[prop]),
      formatters: {
        scale: (value: number) =>
          prop == "sum" ? formatBytes(value, 1) : `${value}`,
      },
    },
  ],
  [prop]
);
const secondaryAxes = useMemo(
  (): AxisOptions<DownloadTimeseriesRecord>[] => [
    {
      getValue: (datum) => Number(datum[prop]),
      formatters: {
        scale: (value: number) =>
          prop == "sum" ? formatBytes(value, 1) : `${value}`,
      },
    },
  ],
  [prop]
);

Did you find this page helpful?