Line & bar chart components

The standard Recharts shape: a flat array of objects, one per point on the x-axis, with a key per series. The line examples use entries like { date: new Date(2026, 0, 1), A: 600, B: 400, C: 100 }, then point <XAxis dataKey="date" /> at the x value and give each <Area> or <Bar> its own dataKey such as "A".

charts-base.tsx only adds presentation helpers — ChartTooltipContent, ChartLegendContent, ChartActiveDot, and the selectEvenlySpacedItems utility. Everything structural (ResponsiveContainer, AreaChart, BarChart, ComposedChart, XAxis, YAxis, CartesianGrid, Tooltip, Legend, Area, Bar, Line, Label) is imported directly from recharts, so the entire Recharts API stays available to you. npx untitledui@latest add charts-base adds the helpers; for a manual setup, run npm install recharts and copy the file.

Pass it as the content of the Recharts tooltip: <Tooltip content={<ChartTooltipContent />} />. It respects the formatter and labelFormatter you set on <Tooltip> itself — the examples use formatter={(value) => Number(value).toLocaleString()} for values and a labelFormatter that turns the date key into a readable month and year.

No colors are hardcoded. Each series sets stroke="currentColor" (lines and areas) or fill="currentColor" (bars) and takes its actual color from a Tailwind class on the series' className, such as text-utility-brand-600 or text-utility-brand-400. Change that utility class to recolor the series, and it will follow your theme in both light and dark mode. Gradient area fills work the same way: the <stop> elements inside the <linearGradient> use stopColor="currentColor" with their own utility class.

Yes, pass content={<ChartLegendContent />} to Recharts' <Legend>. ChartLegendContent reads the layout you set on <Legend> to switch between a horizontal row and a vertical column — layout="vertical" stacks the entries, anything else lays them out in a row. The align you set only controls how the entries are justified within that row or column. It also accepts its own className plus a reversed boolean to flip the order of the entries.

Use the selectEvenlySpacedItems(data, count) helper from charts-base to pick evenly spaced entries from your data and pass the result to the ticks prop of <XAxis> — two of the bar chart examples do this with ticks={selectEvenlySpacedItems(data, 12).map((item) => item.date)} to reduce a long weekly dataset down to twelve labels. Setting interval="preserveStartEnd" also keeps the first and last labels visible.

Yes. Every example is wrapped in Recharts' ResponsiveContainer with initialDimension={{ width: 1, height: 1 }}, and the chart height comes from a Tailwind class such as h-60 on the container or its wrapper rather than a fixed pixel value. The examples also call the useBreakpoint("lg") hook to adjust chart margins, the legend layout, and maxBarSize between mobile and desktop.