Charts

Beautiful, interactive, and responsive charts powered by Recharts with seamless theme integration.

Preview

Installation

npm install @matrix-ui/components

Usage

import {
  AreaChart,
  BarChart,
  LineChart,
  PieChart,
  RadialChart,
} from '@matrix-ui/components'

<LineChart
  data={data}
  lines={[{ dataKey: 'value' }]}
  height={300}
/>

Examples

Area Chart

Bar Chart

Line Chart

Pie Chart

Radial Chart

Stacked Area Chart

Custom Colors

Loading State

Empty State

Chart Error

Data cannot be empty