Getting Started

1. Choose the type of chart you need

Create a simple chart by using plain javascript data: an array of objects.

2. Add more components

LineChart can have XAxis, YAxis, Legend, CartesianGrid and more.

3. Adjust the props of your components

Modify colors, sizes, and other properties of your components to fit your design.

4. Add interactions

Add a Tooltip component to display information when hovering over your chart.

5. Customize your components

For example, you can edit your x-axis label very easily by passing in a custom axis tick render function. You can do similar things with other graphs as well, such as custom shapes for bar charts and much more!

Recharts devtools

In all examples on this website, you will see the use of Recharts Devtools component: import { RechartsDevtools } from '@recharts/devtools';. Recharts devtools are the integration that enables the hook inspector. You can access the hook inspector using the dropdown in toolbar. That way, you can see a preview of what Recharts hooks are returning.

You can choose to include Recharts devtools in your own projects, but it is not required to use Recharts. It is only there to help you debug and understand your charts better during development. This component is entirely optional, feel free to erase it from the examples, your charts will continue working the same.