Command Palette

Search for a command to run...

Composable chart container built on Recharts with theming helpers.

Chart

import { ChartContainer, ChartLegend, ChartLegendContent, ChartTooltip, ChartTooltipContent } from "@/components/optics/chart";import { Line, LineChart, XAxis, YAxis, CartesianGrid } from "recharts";const data = [	{ month: "Jan", visitors: 1200, sales: 900 },	{ month: "Feb", visitors: 1500, sales: 1100 },	{ month: "Mar", visitors: 1800, sales: 1400 },	{ month: "Apr", visitors: 1600, sales: 1200 },	{ month: "May", visitors: 1900, sales: 1500 },	{ month: "Jun", visitors: 2100, sales: 1700 },];const chartConfig = {	visitors: {		label: "Visitors",		color: "var(--chart-1, #2563eb)",	},	sales: {		label: "Sales",		color: "var(--chart-2, #16a34a)",	},};<ChartContainer  className="w-full max-w-4xl"  config={{    sales: {      color: 'var(--chart-2, #16a34a)',      label: 'Sales'    },    visitors: {      color: 'var(--chart-1, #2563eb)',      label: 'Visitors'    }  }}>  <LineChart    data={[      {        month: 'Jan',        sales: 900,        visitors: 1200      },      {        month: 'Feb',        sales: 1100,        visitors: 1500      },      {        month: 'Mar',        sales: 1400,        visitors: 1800      },      {        month: 'Apr',        sales: 1200,        visitors: 1600      },      {        month: 'May',        sales: 1500,        visitors: 1900      },      {        month: 'Jun',        sales: 1700,        visitors: 2100      }    ]}    margin={{      left: 8,      right: 8    }}  >    <CartesianGrid      strokeDasharray="4 4"    />    <XAxis      dataKey="month"      tickMargin={10}    />    <YAxis      allowDecimals={false}      tickMargin={6}    />    <ChartTooltip content={<ChartTooltipContent />} />    <ChartLegend content={<ChartLegendContent />} />    <Line      activeDot={{        r: 5      }}      dataKey="visitors"      dot={false}      stroke="var(--color-visitors, #2563eb)"      strokeWidth={2.5}      type="monotone"    />    <Line      activeDot={{        r: 5      }}      dataKey="sales"      dot={false}      stroke="var(--color-sales, #16a34a)"      strokeWidth={2.5}      type="monotone"    />  </LineChart></ChartContainer>

Installation

pnpm dlx shadcn@latest add @optics/chart

Props

<ChartContainer />
Name
Type
config
object(default: { ... })

<ChartTooltipContent />
Name
Type
active
boolean(default: false)
payload
string(default: [])
indicator
string(default: dot)
hideLabel
boolean(default: false)
hideIndicator
boolean(default: false)
label
string(default: undefined)
labelFormatter
string(default: undefined)
labelClassName
any
formatter
string(default: undefined)
color
string(default: undefined)
nameKey
string(default: undefined)
labelKey
string(default: undefined)
<ChartLegendContent />
Name
Type
hideIcon
boolean(default: false)
payload
string(default: [])
verticalAlign
string(default: bottom)
nameKey
string(default: undefined)