0|

Line Chart

Documentation Index

Fetch the complete documentation index at: /llms.txt. Use this file to discover all available pages before exploring further.

Simple static & beautifully designed line charts

apidocgithub
Basic Chart

Installation

pnpm dlx shadcn@latest add @beecharts/line-chart

Usage

The line chart is composible. <BeeLineChart> is the container, and you compose only the parts you need — <Grid>, <XAxis>, <YAxis>, <Legend>, <Tooltip>, and one or more <Line> — as its children. Each <Line> carries its own strokeVariant, curveType, glowing, enableBufferLine, and isClickable, so a single chart can mix stroke styles and make only some series interactive.

import {
  BeeLineChart,
  Line,
  XAxis,
  Grid,
  Tooltip,
  Legend,
} from "@/components/beecharts/charts/line-chart";
const chartConfig = {
  desktop: {
    label: "Desktop",
    colors: { light: ["#047857"], dark: ["#10b981"] },
  },
  mobile: {
    label: "Mobile",
    colors: { light: ["#be123c"], dark: ["#f43f5e"] },
  },
} satisfies ChartConfig;
 
<BeeLineChart data={data} config={chartConfig} xDataKey="month">
  <Grid />
  <XAxis dataKey="month" />
  <Legend />
  <Tooltip />
  <Line dataKey="desktop" />
  <Line dataKey="mobile" curveType="monotone" />
</BeeLineChart>

Uses the same desktop / mobile traffic dataset as the bar and composed basic previews.

Loading State

isLoading='true'

More examples

Curve, stroke, buffer, and glow previews are being ported from the Recharts-era docs. See the API reference for supported <Line> props on ECharts.

API Reference

The chart is composed of several parts. The props below are grouped by the component they belong to.

BeeLineChart

The root container. It owns the data, the shared selection state, the loading skeleton, and the optional brush. Everything visual is composed as its children.

PropTypeDefaultDescription
data*TData[]–

Data used to display the chart. An array of objects where each object represents a data point (TData extends Record<string, unknown>).

config*Record<string, ChartConfig[string]>–

Configuration object that defines the chart's series. Each key should match a data key in your data array, with a corresponding color or color array.

children*ReactNode–

The composed chart parts — <Grid />, <XAxis />, <YAxis />, <Legend />, <Tooltip />, and one or more <Line />.

classNamestring–

Additional CSS classes to apply to the chart container.

curveType"basis" | "bumpX" | "bumpY" | "bump" | "linear" | "natural" | "monotoneX" | "monotoneY" | "monotone" | "step" | …"linear"

The default curve interpolation inherited by every <Line />. Each <Line /> may override it locally.

animationTypenone|left-to-right|right-to-left|center-out|edges-in"left-to-right"

Direction of the custom intro reveal inherited by every <Line />. "none" disables it — devices with the OS reduce-motion preference fall back to "none" automatically.

defaultSelectedDataKeystring | nullnull

The data key that should be selected by default.

onSelectionChange(selectedDataKey: string | null) => void–

Callback fired when a series is selected or deselected — by clicking a clickable <Line /> or <Legend /> entry. Receives the selected data key, or null when deselected.

isLoadingbooleanfalse

Shows a loading skeleton animation with a shimmer effect when data is being fetched.

loadingPointsnumber14

Number of data points to display in the loading skeleton.

showBrushbooleanfalse

When enabled, displays a brush control below the chart for selecting and zooming into a range of data.

xDataKeykeyof TData & string–

The data key used for the x-axis. Only needed by the brush footer — the axis itself reads its key from <XAxis dataKey="…" />.

brushHeightnumber–

The height of the brush preview area in pixels.

brushFormatLabel(value: unknown, index: number) => string–

Custom formatter for the brush axis labels.

onBrushChange(range: BeeBrushRange) => void–

Callback invoked when the user changes the brush selection range.

chartPropsComponentProps<typeof LineChart>–

Additional props forwarded to the underlying Recharts LineChart component. Read the Recharts LineChart documentation for available props.

Line

A single line series. Each <Line /> is self-contained and generates its own gradient and glow definitions, so a chart can hold any number of lines — each with its own stroke, glow, and clickability.

PropTypeDefaultDescription
dataKey*string–

The series key. Must exist on both the data rows and the chart config.

strokeVariantsolid|dashed|animated-dashed"solid"

The visual style for this line's stroke. Applies to this line only.

curveType"basis" | "bump" | "linear" | "natural" | "monotoneX" | "monotoneY" | "monotone" | "step" | "stepBefore" | "stepAfter" | …–

The curve interpolation for this line. Falls back to the chart's curveType when omitted.

animationTypenone|left-to-right|right-to-left|center-out|edges-in–

The intro reveal animation for this line. Falls back to the chart's animationType when omitted.

connectNullsbooleanfalse

Whether to connect line segments across null or missing values.

isClickablebooleanfalse

Lets this line be selected by clicking it. When any line is selected, unselected lines become semi-transparent.

glowingbooleanfalse

Applies a soft outer glow to this line.

enableBufferLinebooleanfalse

Renders this line's last segment as a dashed buffer while the rest stays solid. Useful for indicating projected or incomplete data at the end of a series.

childrenReactNode–

Optional <Dot /> and <ActiveDot /> composition that adds point markers to this line.

linePropsComponentProps<typeof Line>–

Escape hatch for raw props forwarded to the underlying Recharts Line component.

Dot and ActiveDot

Point markers composed inside a <Line />. <Dot /> is the resting marker; <ActiveDot /> is the hovered marker. They render nothing on their own — the parent <Line /> reads their variant.

PropTypeDefaultDescription
variantdefault|border|colored-border–

The visual style of the point marker.

XAxis and YAxis

The category and value axes. Both ship with the chart's flat default styling and forward every Recharts axis prop, so dataKey, tickFormatter, tickMargin, etc. pass straight through. They are hidden automatically while the chart is loading.

PropTypeDefaultDescription
dataKeystring–

The data key for the axis values.

…axisProps––

Every other Recharts XAxis / YAxis prop is forwarded as-is. Read the Recharts XAxis and Recharts YAxis documentation for available props.

Grid

The background grid lines. Defaults to horizontal-only dashed lines and forwards every Recharts CartesianGrid prop.

PropTypeDefaultDescription
…gridProps––

Every Recharts CartesianGrid prop is forwarded as-is. Read the Recharts CartesianGrid documentation for available props.

Tooltip

The hover tooltip. It reads the chart's selection state so its content dims unselected series.

PropTypeDefaultDescription
variantdefault|frosted-glass"default"

The visual style of the tooltip surface.

roundnesssm|md|lg|xl"lg"

Controls the border-radius of the tooltip.

defaultIndexnumber–

When set, the tooltip is visible by default at the specified data point index.

cursorbooleantrue

Whether the vertical cursor line follows the pointer on hover.

Legend

The series legend. When the chart is clickable, each entry toggles selection of its series.

PropTypeDefaultDescription
variantsquare|circle|circle-outline|rounded-square|rounded-square-outline|vertical-bar|horizontal-bar–

The visual style of the legend indicators.

alignleft|center|right"right"

Horizontal placement of the legend.

verticalAligntop|middle|bottom"top"

Vertical placement of the legend.

isClickablebooleanfalse

Lets each legend entry toggle selection of its series.

Did you like the content?