Area Chart

Usage

import { Chart, useChart } from "@chakra-ui/charts"
import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from "recharts"

<Chart.Root>
  <AreaChart>
    <CartesianGrid />
    <XAxis />
    <YAxis />
  </AreaChart>
</Chart.Root>

Examples

Value Axis

Use the YAxis component from recharts to display the y-axis.

Dashed Area

Set the strokeDasharray prop to the series you want to display as a dashed line.

Gradient Area

Use the Chart.Gradient component to create a gradient fill for the area.

Note: The id of the gradient must be unique and referenced in the fill prop of the Area component.

Fill With Value

Use the Chart.Gradient component to create a gradient fill that changes from one color to another based on the value.

<defs>
  <Chart.Gradient
    id="uv-gradient"
    stops={[
      { offset: "0%", color: "teal.solid", opacity: 1 },
      { offset: "100%", color: "red.solid", opacity: 1 },
    ]}
  />
</defs>

When the value is positive, it uses the first color, and when negative, it uses the second color.

Percent

To render the area chart as a percentage, with value normalized to 100%:

• Set the stackId prop on the Area component to the same value
• Set the stackOffset prop to expand on the AreaChart component
• Format the y-axis via the tickFormatter prop to percentage format

Dots

Set the dot prop on the Area component to display dots that map to each data point.

<Area dot={{ fill: "red", fillOpacity: 1 }} activeDot={false} />

Connect Nulls

Pass the connectNulls prop to the Area component to connect data points even when there are null values in between. This is useful when you want to show a continuous line despite missing data points.

Reference Line

Use the ReferenceLine component from recharts to add a reference line to your chart. A reference line is useful when you want to highlight a specific value in the chart.

Reference Area

Use the ReferenceArea component from recharts to add a reference area to your chart. A reference area is useful when you want to highlight a specific range in the chart.

Area Types

Recharts provides flexible support for various kinds of area charts.

Below are the different types of area charts you can create: