Charts

Recharts

There are no built-in chart components in bifrost-react, but there are many other libraries available that can be used to create charts.

You're free to use whatever library you like, but we recommend Recharts as it's a simple and easy-to-use chart library.

Recharts offers a lot of different chart types, such as line, bar, pie, and radar charts. It also comes with animations and responsive design, and a lot of the functionality is customizable.

We've made a few examples that you can use as a starting point for your own charts. There's a lot of functionality you can discover on your own, so our focus is on styling and getting your charts aligned with the Bifrost design.

Setup

npm install recharts@3
npm install recharts@3

Then import the components you need in your React component, like this:

import {
  LineChart,
  Line,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  Legend,
} from "recharts";
import {
  LineChart,
  Line,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  Legend,
} from "recharts";

Chart examples

Note: The examples are meant as a starting point for your own charts, giving you a few tips on functionality, and showing examples of how you get your charts aligned with Bifrost design.

Common components

Recharts comes out of the box with a basic Legend and a Tooltip. They aren't particularly pretty so check out our examples for:

• <CustomTooltip> works with line, bar and pie charts
• legendFormatter(value) which you will find in all our chart examples.

Contribute

Have you done some nice tweaks to one of our charts, or built a beautiful chart yourself? Don't keep it a secret, share it with everyone!

If you have made a chart that you think would be useful for others, or have tips on how we can enhance the chart examples, you can contribute to the Bifrost repository, or get in touch with the Bifrost team.