Area Chart

A chart that displays quantitative data using a filled area below a line, useful for showing volume or cumulative values over time.

Storybook

Recharts Docs

Source

Automatic Installation

This method is still working on progress, please use manual installation for now.

npm install radix-ui

components/area-chart/area-chart.tsx

import { type AreaChartStyles, areaChartStyles } from './area-chart.css'
 
const AreaChart = () => {
  return null
}
 
export { AreaChart }

import {} from '#/components/area-chart'

Browse the Storybook for more examples.

// WIP