Common chart utilities

We have made a <CustomTooltip> component that works with (at least) line, bar and pie charts, and with both single and multiple data series, which you can import and use in your own charts.

Tooltip

Code

import Box from "@intility/bifrost-react/Box";
import Grid from "@intility/bifrost-react/Grid";

// see `numberFormatter` example in the section below
import numberFormatter from "./utils";

export default function CustomTooltip({
  payload,
  label,
}: {
  label?: string | number;
  payload?: any[];
}) {
  return (
    <Box background radius shadow padding={14}>
      <Grid gap={4}>
        <strong className="bf-large">{label}</strong>
        <div>
          {payload?.map((entry, index) => (
            <div key={entry.name + entry.value}>
              {entry.name}:{" "}
              <strong>
                {typeof entry.value === "number"
                  ? numberFormatter.format(entry.value)
                  : entry.value}
              </strong>
            </div>
          ))}
        </div>
      </Grid>
    </Box>
  );
}
import Box from "@intility/bifrost-react/Box";
import Grid from "@intility/bifrost-react/Grid";

// see `numberFormatter` example in the section below
import numberFormatter from "./utils";

export default function CustomTooltip({
  payload,
  label,
}: {
  label?: string | number;
  payload?: any[];
}) {
  return (
    <Box background radius shadow padding={14}>
      <Grid gap={4}>
        <strong className="bf-large">{label}</strong>
        <div>
          {payload?.map((entry, index) => (
            <div key={entry.name + entry.value}>
              {entry.name}:{" "}
              <strong>
                {typeof entry.value === "number"
                  ? numberFormatter.format(entry.value)
                  : entry.value}
              </strong>
            </div>
          ))}
        </div>
      </Grid>
    </Box>
  );
}

Legend

The built-in <Legend> component in recharts can be customized by passing a function to the formatter prop:

const legendFormatter = (value: string) => (
  <span className="bfc-base-2"> {value}</span>
);
const legendFormatter = (value: string) => (
  <span className="bfc-base-2"> {value}</span>
);

Pass this function to the formatter prop of the recharts <Legend> component in your chart:

<Legend formatter={legendFormatter} align="right" iconType="circle" />
<Legend formatter={legendFormatter} align="right" iconType="circle" />

Advanced legends

Some of our example charts, e.g. the Multi-line chart, feature more advanced legends. You can find the code for these in their respective examples.

Number and date format

Sometimes it makes sense to only include year and month when formatting dates in charts, or add a thousand separator to large numbers:

const locale = "en-gb"; // or "nb-no" for Norwegian

/** Convert a Date object to month & year string */
const monthYearFormatter = new Intl.DateTimeFormat(locale, {
  month: "short",
  year: "numeric",
});

monthYearFormatter.format(new Date("2023-01-14T13:48:59.689Z")); // "Jan 2023"

/** Add a thousand separator to large numbers */
const numberFormatter = new Intl.NumberFormat(locale);

numberFormatter.format(1337); // "1,337"
const locale = "en-gb"; // or "nb-no" for Norwegian

/** Convert a Date object to month & year string */
const monthYearFormatter = new Intl.DateTimeFormat(locale, {
  month: "short",
  year: "numeric",
});

monthYearFormatter.format(new Date("2023-01-14T13:48:59.689Z")); // "Jan 2023"

/** Add a thousand separator to large numbers */
const numberFormatter = new Intl.NumberFormat(locale);

numberFormatter.format(1337); // "1,337"