@optilogic/charts

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

Installation

npm install @optilogic/charts @optilogic/core recharts

Setup

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

Usage

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 },
];

<LineChart
  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
<BarChart
  data={data}
  series={[
    { dataKey: 'revenue', name: 'Revenue' },
    { dataKey: 'profit', name: 'Profit' },
  ]}
  xAxis={{ dataKey: 'month' }}
  tooltip
  legend={{ position: 'top' }}
/>

Components

LineChart

A theme-aware line chart with support for:

• Multiple series
• Configurable axes
• Grid lines
• Tooltips
• Legends
• Animations

BarChart

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