Chart components for Optilogic - LineChart and BarChart built on Recharts
npm install @optilogic/chartsChart components for opti-ui - LineChart and BarChart built on Recharts.
``bash`
npm install @optilogic/charts @optilogic/core recharts
Make sure you have configured @optilogic/core with the Tailwind preset and CSS variables.
`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 },
];
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
series={[
{ dataKey: 'revenue', name: 'Revenue' },
{ dataKey: 'profit', name: 'Profit' },
]}
xAxis={{ dataKey: 'month' }}
tooltip
legend={{ position: 'top' }}
/>
``
A theme-aware line chart with support for:
- Multiple series
- Configurable axes
- Grid lines
- Tooltips
- Legends
- Animations
A theme-aware bar chart with support for:
- Vertical and horizontal layouts
- Stacked and grouped bars
- Configurable axes
- Grid lines
- Tooltips
- Legends
- Animations
MIT