Recharts

Start by installing the recharts package in your project alongside Reshaped.
Then, import the chart functionality you need for your project.

npm install recharts

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

const Chart = () => (
  <LineChart
    width={500}
    height={300}
    data={data}
  >
    <CartesianGrid strokeDasharray="3 3" />
    <XAxis dataKey="name" />
    <YAxis />
    <Tooltip />
    <Legend />
    <Line type="monotone" dataKey="pv" stroke="#8884d8" activeDot={{ r: 8 }} />
    <Line type="monotone" dataKey="uv" stroke="#82ca9d" />
  </LineChart>
);

recharts components that render colored elements support properties for defining color values.
You can use Reshaped CSS variables instead of hardcoded hex colors to align them with the rest of your product and to add dark mode support.

In our previous code snippet, you can replace the hardcoded stroke values for the Line component with border color tokens:

<Line type="monotone" dataKey="uv" stroke="var(--rs-color-border-primary)" />

The same approach applies to more complex chart examples, such as an AreaChart with a gradient fill:

<AreaChart>
  <defs>
    <linearGradient id="colorUv" x1="0" y1="0" x2="0" y2="1">
      <stop
        offset="5%"
        stopColor={variable("color-background-primary")}
        stopOpacity={0.5}
      />
      <stop
        offset="95%"
        stopColor="var(--rs-color-background-primary)"
        stopOpacity={0}
      />
    </linearGradient>
  </defs>

  <Area
    type="monotone"
    dataKey="uv"
    stroke="var(--rs-color-border-primary)"
    fillOpacity={1}
    fill="url(#colorUv)"
  />

  {/* Other components */}
</AreaChart>

Many components in recharts support passing custom components to them.
You can create wrapper components that use Reshaped components internally to align their implementation with the rest of your product.
For example, you can pass a custom component to the Tooltip using its content property.
Note that CustomTooltip relies on the props format defined by recharts.

const Chart = (props) => (
  <AreaChart {...props}>
    <Tooltip content={<CustomTooltip />} />

    {/* Other components */}
  </AreaChart>
)

const CustomTooltip = ({ active, payload, label }) => {
  if (active && payload && payload.length) {
    return (
      <View
        backgroundColor="black"
        shadow="raised"
        borderRadius="medium"
        padding={3}
      >
        {label}: {payload[0].value}
      </View>
    );
  }

  return null;
}