Free · Recharts · Editable React source
Line Foundation
A flexible Recharts line base with references, curve modes, dots, and multiple series.
This is the installable component, not a mockup. Width is a preview container setting; theme and colors use your app’s shadcn CSS variables.
Select a mark or an accessible data-table value, or change the range to inspect the callback.
Waiting for an interaction…
Edit sample data · JSON
01 / Installation
Your code. Your project.
Use an initialized shadcn/Tailwind React project. The URL installs the component and its shared files recursively. No namespace configuration, platform account, or agent files.
Next.js, Vite & manual setup →npx shadcn@latest add https://beautifulcharts.dev/r/recharts-line-foundation.jsonPackage dependencies: recharts. Shared files are included in Source above. The installed license file covers the free source.
For a manual install, add those packages, copy every listed Source file to its displayed path, and adjust the @/ alias if your project uses a different one.
02 / Component API
Make it yours.
Types, defaults, and source below are generated from the distributed component. Numeric values must be finite; recipe-specific bounds are checked in source. Formatters change displayed labels, not the underlying measurements.
| Prop | Type | Default | Required |
|---|---|---|---|
| data | LineChartDatum[] | sampleData | No |
| xKey | string | "period" | No |
| series | LineSeries[] | sampleSeries | No |
| title | string | "Line foundation" | No |
| subtitle | string | "Read direction, pace, and turning points" | No |
| curve | "linear" | "monotone" | "step" | "monotone" | No |
| referenceValue | number | null | 42 | No |
| showDots | boolean | false | No |
| showTooltip | boolean | true | No |
| showLegend | boolean | false | No |
| showBrush | boolean | false | No |
| onRangeChange | (range: { startIndex?: number; endIndex?: number }) => void | — | No |
| onSelect | (selection: { dataIndex: number; datum: LineChartDatum }) => void | — | No |
| valueFormatter | (value: unknown) => string | — | No |
| ariaDescription | string | — | No |
| children | ReactNode | — | No |
| isLoading | boolean | — | No |
| className | string | — | No |
Exact data and series types
export type LineChartDatum = Record<string, string | number | undefined>;
export type LineSeries = { key: string; label?: string; color?: string; width?: number; dashed?: boolean };
export type LineFoundationProps = {
data?: LineChartDatum[]; xKey?: string; series?: LineSeries[]; title?: string; subtitle?: string;
curve?: "linear" | "monotone" | "step"; referenceValue?: number | null; showDots?: boolean; showTooltip?: boolean; showLegend?: boolean; showBrush?: boolean; onRangeChange?: (range: { startIndex?: number; endIndex?: number }) => void; onSelect?: (selection: { dataIndex: number; datum: LineChartDatum }) => void; valueFormatter?: (value: unknown) => string; ariaDescription?: string; children?: ReactNode; isLoading?: boolean; className?: string;
};shadcn theming
Your card, text, border, error, font, and chart colors—not a forced design system.
Native customization
Modify the local source or use the documented renderer-native extension points.
Accessible states
Loading, empty states, reduced motion, descriptions, and inspectable data tables.