A client-side React chart component library built on top of Recharts, providing themed, accessible chart containers with customizable tooltips and legends. ## Key Components | Export | Description | |---|---| | `ChartContainer` | Root wrapper that provides chart context, injects CSS custom properties, and wraps content in a `ResponsiveContainer` | | `ChartStyle` | Internal component that generates scoped CSS variables for light/dark theme colors | | `ChartTooltip` | Re-export of `RechartsPrimitive.Tooltip` | | `ChartTooltipContent` | Styled tooltip renderer with support for `dot`, `line`, and `dashed` indicators, custom formatters, and label/icon overrides | | `ChartLegend` | Re-export of `RechartsPrimitive.Legend` | | `ChartLegendContent` | Styled legend renderer with icon support and configurable alignment | | `ChartConfig` | TypeScript type defining per-series labels, icons, and color/theme mappings | | `useChart` | Internal hook for consuming `ChartContext`; throws if used outside `ChartContainer` | ## Usage Example ```typescript import { ChartContainer, ChartTooltip, ChartTooltipContent, ChartLegend, ChartLegendContent, } from "./chart" import { LineChart, Line, CartesianGrid, XAxis } from "recharts" const config = { revenue: { label: "Revenue", theme: { light: "#6366f1", dark: "#818cf8" }, }, } const data = [ { month: "Jan", revenue: 4200 }, { month: "Feb", revenue: 5800 }, ] export function RevenueChart() { return ( } /> } /> ) } ``` **Source:** [`chart.tsx`](https://github.com/flamingo-stack/openframe-oss-lib/blob/main/chart.tsx)