Chart
dataA collection of chart components built on top of Recharts for data visualization.
Preview
Installation
npm install @launchapp/design-systemImport
import { ChartContainer, LineChart, BarChart, AreaChart, PieChart } from "@launchapp/design-system";Examples
Line Chart
const data = [ { month: "Jan", value: 186 }, { month: "Feb", value: 305 }, { month: "Mar", value: 237 },];const config = { value: { label: "Value", color: "hsl(var(--la-chart-1))" },};<ChartContainer config={config} className="h-[200px]"> <LineChart data={data}> <XAxis dataKey="month" /> <YAxis /> <Line type="monotone" dataKey="value" stroke="var(--color-value)" /> </LineChart></ChartContainer>Props
| Prop | Type | Default | Description |
|---|---|---|---|
config* | ChartConfig | — | Chart configuration mapping data keys to labels and colors. |
className | string | — | Additional CSS classes for the chart container. |
data* | Record<string, unknown>[] | — | The data array to render (on chart sub-components). |