@optilogic/charts

Chart components for opti-ui - LineChart and BarChart built on Recharts.

Installation

``bash
npm install @optilogic/charts @optilogic/core recharts
`

Setup

Make sure you have configured @optilogic/core with the Tailwind preset and CSS variables.

Usage

`tsx
import { LineChart, BarChart } from '@optilogic/charts';

// Line chart
const data = [
{ month: 'Jan', revenue: 4000, profit: 2400 },
{ month: 'Feb', revenue: 3000, profit: 1398 },
{ month: 'Mar', revenue: 2000, profit: 9800 },
];

data={data}
series={[
{ dataKey: 'revenue', name: 'Revenue', color: 'hsl(var(--chart-1))' },
{ dataKey: 'profit', name: 'Profit', color: 'hsl(var(--chart-2))' },
]}
xAxis={{ dataKey: 'month' }}
yAxis={{ domain: [0, 'auto'] }}
tooltip
legend
/>

// Bar chart
data={data}
series={[
{ dataKey: 'revenue', name: 'Revenue' },
{ dataKey: 'profit', name: 'Profit' },
]}
xAxis={{ dataKey: 'month' }}
tooltip
legend={{ position: 'top' }}
/>
``

Components

$3

A theme-aware line chart with support for:
- Multiple series
- Configurable axes
- Grid lines
- Tooltips
- Legends
- Animations

$3

A theme-aware bar chart with support for:
- Vertical and horizontal layouts
- Stacked and grouped bars
- Configurable axes
- Grid lines
- Tooltips
- Legends
- Animations

License

MIT