Pro

Line chart React component for Tailwind CSS v4

Q: How do I install Line chart?

Run npx wingo-ui@latest add line-chart. It also adds the Wingo UI items it builds on (Chart kit, Motion presets, UIProvider and useLocale) and the npm packages motion and d3-shape. With shadcn, add the @wingo-ui registry with your API key, then run npx shadcn@latest add @wingo-ui/line-chart.

v1.0.0Added in 1.0.0

Trends over time as smooth lines, with a crosshair readout of every series, a dashed comparison period, target lines and direct end labels.

Each line draws itself from left to right the first time the chart scrolls into view, the series a beat apart. Move the mouse over the plot and a crosshair snaps to the nearest point, the dots swell and a readout lists every visible series (it flips to the other side near the right edge). On a phone, tap a point to pin the readout above your finger, drag sideways to scrub through the points (a vertical drag still scrolls the page), tap the same point again or anywhere outside to clear it. With the keyboard, Tab to the plot: Left / Right walk the points, Home / End jump to the ends, PageUp / PageDown move by ten, Enter fires onDatumClick and Escape clears; a live region reads each point. Click or tap a legend entry to hide its series (the others rescale and glide), hover or focus one to highlight it. When the data changes, the lines morph to their new shape.

Line chart is a Pro React component in the React chart and stat components category, written in TypeScript for React 19 and Tailwind CSS v4. It installs as source with npx wingo-ui@latest add line-chart, together with Chart kit, Motion presets, UIProvider and useLocale and the npm packages motion and d3-shape.

Add to a project

Requirements: React 19 and Tailwind CSS v4, in Next.js (App Router or Pages), Vite or React Router. Installation guide · Next.js setup · Vite setup

npx wingo-ui@latest add line-chart

Line chart is part of Pro, with 298 more Pro items: $8 a month or $150 once. 14-day refund before you download any Pro item. See plans

Usage

Import LineChart from @/components/ui/line-chart.

import { LineChart } from "@/components/ui/line-chart"

const data = [
  { month: "2026-07", revenue: 106300, expenses: 72400 },
  { month: "2026-08", revenue: 97500, expenses: 69900 },
  { month: "2026-09", revenue: 128450, expenses: 81200 },
]

export function RevenueChart() {
  return (
    <LineChart
      data={data}
      xKey="month"
      series={[
        { key: "revenue", label: "Revenue" },
        { key: "expenses", label: "Expenses" },
      ]}
      valueFormat="currency"
      locale="en-US"
      referenceLines={[{ value: 120000, label: "Target $120,000" }]}
      label="Revenue vs. expenses"
    />
  )
}

Props

data*
ChartDatum[]
One row per x position, in drawing order (the chart does not sort): { month: "2026-09", revenue: 128450, expenses: 81200 }. null values leave a gap.
xKeydefault "date"
string
The row key for the x axis. ISO days ("2026-09-24") and months ("2026-09") print as local dates.
series
LineChartSeries[]
Which keys to draw, in color order: { key, label?, color?, name?, dashed?, strokeWidth? }. dashed draws a comparison period at 70% with a muted tooltip row. Inferred from the numeric keys of the first rows when omitted.
colors
string[]
Per-position palette overrides: a slot ("series-3"), a tone ("neutral", "brand") or any CSS color.
heightdefault 240
number
Plot height in px, reserved before the chart measures so nothing jumps.
valueFormatdefault "number"
ChartValueFormat = "number" | "compact" | "currency" | "percent"
How values print in the tooltip, ticks, end labels and table. Percent takes whole numbers (12.4 -> "12.4%" in en-US).
currencydefault "USD"
string
ISO 4217 code for valueFormat currency, printed with the narrow symbol ("$128,450").
decimals
number
Fraction digits in the tooltip, labels and table; auto by magnitude when unset. Ticks stay short.
formatValue
(value: number, context: { series: string; kind: "tooltip" | "tick" | "label" | "table" }) => string
Replaces the built-in value formatting everywhere.
formatX
(value: unknown, context: "axis" | "tooltip" | "table") => string
Replaces the x label formatting (short on the axis, long in the tooltip and table).
localedefault ""
string
Locale for numbers and dates. Empty uses the UIProvider / LocaleProvider locale.
yDomaindefault "["auto", "auto"]"
LineChartDomain = [number | "auto", number | "auto"]
Fixed value bounds (0..100 for percentages). Auto floats around the data and the reference lines, then rounds to nice ticks.
curvedefault "monotone"
"monotone" | "linear" | "natural" | "step"
Line interpolation. monotone never overshoots a data point; step for values that hold until they change.
strokeWidthdefault 2
number
Line width in px; a series' own strokeWidth wins.
showDotsdefault false
boolean
A dot on every point, up to 31 points (12 on plots narrower than 480px); above that only the inspected point gets one.
showAreadefault false
boolean
A soft 16% gradient under the line when exactly one series is visible (use area-chart for several).
connectNullsdefault false
boolean
Bridge missing values instead of breaking the line.
endLabelsdefault false
boolean
The last value and the series name at the right end of each line (up to 4 series). Under 360px the label keeps only the short value ($128K) and a legend names the lines (even with showLegend off); under 240px it hides. A colliding label is dropped, never nudged; the legend and tooltip still carry it.
showLastValuedefault false
boolean
A dot with a breathing halo on the last point of each series, for a live-data feel. With reduced motion or animated off the halo stays still.
showGriddefault true
boolean
Hairlines at the value ticks.
showXAxisdefault true
boolean
Date / category labels under the plot, thinned from the newest backwards so they never collide.
showYAxisdefault true
boolean
Value tick labels, compact for big numbers ("$128K").
yAxisSidedefault "start"
"start" | "end"
end puts the ticks on the right, finance style.
yAxisWidthdefault 0
number
Minimum width of the value axis in px; 0 sizes it to the tick labels. Give stacked or synced charts the same value so their plots and crosshairs line up.
showLegenddefault true
boolean
The legend; it only renders with two or more series (one series is named by the card title).
legendPositiondefault "top"
"top" | "bottom"
Legend above or below the plot.
legendToggledefault true
boolean
Legend entries are buttons that hide and show their series. The last visible series cannot be hidden.
showTooltipdefault true
boolean
The floating readout. When off, the crosshair, keyboard and screen reader announcements still work.
tooltipModedefault "auto"
"auto" | "float" | "fixed"
float rides beside the crosshair, fixed pins above the plot (never under a finger); auto is fixed on touch screens.
referenceLines
{ value: number; label?: string; color?: string }[]
Dashed target or average lines with a label ("Target $120,000"); always inside the value range.
animateddefault true
boolean
Draw-in on first view and morphs on data changes. Reduced motion always shows the final state.
loadingdefault false
boolean
A line-shaped skeleton in the plot's box.
emptyState
ReactNode
Replaces the built-in empty state (shown when data is empty or every value is null).
labeldefault ""
string
Accessible name of the figure and caption of its data table. Empty joins the series names.
descriptiondefault ""
string
A one-sentence takeaway for screen readers ("Revenue grew 12.4% in September").
surfacedefault ""
string
The color behind the chart, used for dot rings. Empty uses the surface token; set it when the chart sits on a card.
hiddenSeries
string[]
Hidden series keys when you control legend toggling; pair with onHiddenSeriesChange. defaultHiddenSeries for uncontrolled.
defaultHiddenSeries
string[]
Series keys hidden at first, when the legend toggles on its own.
onHiddenSeriesChange
(keys: string[]) => void
Called when a legend entry hides or shows a series.
activeIndex
number | null
The inspected x index when you control it, so two charts can share one crosshair.
defaultActiveIndex
number | null
The index inspected at first (a pinned readout), uncontrolled.
onActiveIndexChange
(index: number | null) => void
Called as the crosshair moves (mouse, touch or keyboard) and with null when it clears.
onDatumClick
(event: { index: number; datum: ChartDatum; series?: string }) => void
A click or tap on the plot (the nearest point; series is the nearest line) or Enter on the inspected point.
labels
Partial<LineChartLabels>
Strings: empty, loading, table, inspectHint, showSeries, hideSeries, compare ((comparison)), period (Period).
classNames
Partial<Record<LineChartSlot, string>>
Classes for legend, plot, tooltip, table, grid, xAxis, yAxis, line, area, dot, endLabel, referenceLine, crosshair and inspect.

Parts

DEFAULT_LINE_CHART_LABELS
constant
The English strings the chart uses (empty and loading text, the data table and its Period column, the comparison suffix, the keyboard hint, show and hide series). Spread it and override what you translate.
LineChartLabels
type
The shape of labels: the chart kit's shared strings plus compare and period.
LineChartSeries
type
One line: the shared { key, label?, color?, name? } plus dashed? (a comparison series, drawn at 70% opacity) and strokeWidth?.

Examples

Single series, neutral

colors neutral, showArea and showDots for a calm KPI line.

Compare period

A dashed series for last year and a trend badge in the header.

Daily, 90 points

curve linear, labels thin from the newest backwards, yAxisSide end.

End labels

Four series named at their ends; colliding labels drop, never nudge.

Synced crosshair

Two charts driven by one activeIndex.

Loading and empty

The skeleton and the empty state in the plot's box.

Phone, 360px

The pinned readout, compact ticks and thinned labels.

Dependencies

motion d3-shape chart-kit motion ui-config use-locale

Files

components/ui/line-chart.tsx

FAQ

Is the React Line chart component free?

The preview, props and docs are free; copying the source needs a Pro plan. See plans.

How do I install Line chart?

Run npx wingo-ui@latest add line-chart. It also adds the Wingo UI items it builds on (Chart kit, Motion presets, UIProvider and useLocale) and the npm packages motion and d3-shape. With shadcn, add the @wingo-ui registry with your API key, then run npx shadcn@latest add @wingo-ui/line-chart.

How does Line chart behave on phones?

On a phone, tap a point to pin the readout above your finger, drag sideways to scrub through the points (a vertical drag still scrolls the page), tap the same point again or anywhere outside to clear it.

Used in

Admin Dashboard Page KPI Dashboard

More React chart and stat components

Radar chart Trend badge Gauge GitHub Activity Radial bar Tracker

All 16 React chart and stat components

Articles using this component

React Charts Tailwind: 4 Charts and a Kit for Any Theme
Component guidesOct 19, 202610 min read

Revenue, Expenses
Period	Revenue	Expenses
January 2026	84,200	61,300
February 2026	91,800	64,900
March 2026	88,400	70,100
April 2026	102,600	68,800
May 2026	110,900	74,200
June 2026	98,700	79,600
July 2026	106,300	72,400
August 2026	97,500	69,900
September 2026	128,450	81,200

Pro

Line chart React component for Tailwind CSS v4

v1.0.0Added in 1.0.0

Trends over time as smooth lines, with a crosshair readout of every series, a dashed comparison period, target lines and direct end labels.

Add to a project

Requirements: React 19 and Tailwind CSS v4, in Next.js (App Router or Pages), Vite or React Router. Installation guide · Next.js setup · Vite setup

npx wingo-ui@latest add line-chart

Line chart is part of Pro, with 298 more Pro items: $8 a month or $150 once. 14-day refund before you download any Pro item. See plans

Usage

Import LineChart from @/components/ui/line-chart.

import { LineChart } from "@/components/ui/line-chart"

const data = [
  { month: "2026-07", revenue: 106300, expenses: 72400 },
  { month: "2026-08", revenue: 97500, expenses: 69900 },
  { month: "2026-09", revenue: 128450, expenses: 81200 },
]

export function RevenueChart() {
  return (
    <LineChart
      data={data}
      xKey="month"
      series={[
        { key: "revenue", label: "Revenue" },
        { key: "expenses", label: "Expenses" },
      ]}
      valueFormat="currency"
      locale="en-US"
      referenceLines={[{ value: 120000, label: "Target $120,000" }]}
      label="Revenue vs. expenses"
    />
  )
}

Props

data*
ChartDatum[]
One row per x position, in drawing order (the chart does not sort): { month: "2026-09", revenue: 128450, expenses: 81200 }. null values leave a gap.
xKeydefault "date"
string
The row key for the x axis. ISO days ("2026-09-24") and months ("2026-09") print as local dates.
series
LineChartSeries[]
Which keys to draw, in color order: { key, label?, color?, name?, dashed?, strokeWidth? }. dashed draws a comparison period at 70% with a muted tooltip row. Inferred from the numeric keys of the first rows when omitted.
colors
string[]
Per-position palette overrides: a slot ("series-3"), a tone ("neutral", "brand") or any CSS color.
heightdefault 240
number
Plot height in px, reserved before the chart measures so nothing jumps.
valueFormatdefault "number"
ChartValueFormat = "number" | "compact" | "currency" | "percent"
How values print in the tooltip, ticks, end labels and table. Percent takes whole numbers (12.4 -> "12.4%" in en-US).
currencydefault "USD"
string
ISO 4217 code for valueFormat currency, printed with the narrow symbol ("$128,450").
decimals
number
Fraction digits in the tooltip, labels and table; auto by magnitude when unset. Ticks stay short.
formatValue
(value: number, context: { series: string; kind: "tooltip" | "tick" | "label" | "table" }) => string
Replaces the built-in value formatting everywhere.
formatX
(value: unknown, context: "axis" | "tooltip" | "table") => string
Replaces the x label formatting (short on the axis, long in the tooltip and table).
localedefault ""
string
Locale for numbers and dates. Empty uses the UIProvider / LocaleProvider locale.
yDomaindefault "["auto", "auto"]"
LineChartDomain = [number | "auto", number | "auto"]
Fixed value bounds (0..100 for percentages). Auto floats around the data and the reference lines, then rounds to nice ticks.
curvedefault "monotone"
"monotone" | "linear" | "natural" | "step"
Line interpolation. monotone never overshoots a data point; step for values that hold until they change.
strokeWidthdefault 2
number
Line width in px; a series' own strokeWidth wins.
showDotsdefault false
boolean
A dot on every point, up to 31 points (12 on plots narrower than 480px); above that only the inspected point gets one.
showAreadefault false
boolean
A soft 16% gradient under the line when exactly one series is visible (use area-chart for several).
connectNullsdefault false
boolean
Bridge missing values instead of breaking the line.
endLabelsdefault false
boolean
The last value and the series name at the right end of each line (up to 4 series). Under 360px the label keeps only the short value ($128K) and a legend names the lines (even with showLegend off); under 240px it hides. A colliding label is dropped, never nudged; the legend and tooltip still carry it.
showLastValuedefault false
boolean
A dot with a breathing halo on the last point of each series, for a live-data feel. With reduced motion or animated off the halo stays still.
showGriddefault true
boolean
Hairlines at the value ticks.
showXAxisdefault true
boolean
Date / category labels under the plot, thinned from the newest backwards so they never collide.
showYAxisdefault true
boolean
Value tick labels, compact for big numbers ("$128K").
yAxisSidedefault "start"
"start" | "end"
end puts the ticks on the right, finance style.
yAxisWidthdefault 0
number
Minimum width of the value axis in px; 0 sizes it to the tick labels. Give stacked or synced charts the same value so their plots and crosshairs line up.
showLegenddefault true
boolean
The legend; it only renders with two or more series (one series is named by the card title).
legendPositiondefault "top"
"top" | "bottom"
Legend above or below the plot.
legendToggledefault true
boolean
Legend entries are buttons that hide and show their series. The last visible series cannot be hidden.
showTooltipdefault true
boolean
The floating readout. When off, the crosshair, keyboard and screen reader announcements still work.
tooltipModedefault "auto"
"auto" | "float" | "fixed"
float rides beside the crosshair, fixed pins above the plot (never under a finger); auto is fixed on touch screens.
referenceLines
{ value: number; label?: string; color?: string }[]
Dashed target or average lines with a label ("Target $120,000"); always inside the value range.
animateddefault true
boolean
Draw-in on first view and morphs on data changes. Reduced motion always shows the final state.
loadingdefault false
boolean
A line-shaped skeleton in the plot's box.
emptyState
ReactNode
Replaces the built-in empty state (shown when data is empty or every value is null).
labeldefault ""
string
Accessible name of the figure and caption of its data table. Empty joins the series names.
descriptiondefault ""
string
A one-sentence takeaway for screen readers ("Revenue grew 12.4% in September").
surfacedefault ""
string
The color behind the chart, used for dot rings. Empty uses the surface token; set it when the chart sits on a card.
hiddenSeries
string[]
Hidden series keys when you control legend toggling; pair with onHiddenSeriesChange. defaultHiddenSeries for uncontrolled.
defaultHiddenSeries
string[]
Series keys hidden at first, when the legend toggles on its own.
onHiddenSeriesChange
(keys: string[]) => void
Called when a legend entry hides or shows a series.
activeIndex
number | null
The inspected x index when you control it, so two charts can share one crosshair.
defaultActiveIndex
number | null
The index inspected at first (a pinned readout), uncontrolled.
onActiveIndexChange
(index: number | null) => void
Called as the crosshair moves (mouse, touch or keyboard) and with null when it clears.
onDatumClick
(event: { index: number; datum: ChartDatum; series?: string }) => void
A click or tap on the plot (the nearest point; series is the nearest line) or Enter on the inspected point.
labels
Partial<LineChartLabels>
Strings: empty, loading, table, inspectHint, showSeries, hideSeries, compare ((comparison)), period (Period).
classNames
Partial<Record<LineChartSlot, string>>
Classes for legend, plot, tooltip, table, grid, xAxis, yAxis, line, area, dot, endLabel, referenceLine, crosshair and inspect.

Parts

DEFAULT_LINE_CHART_LABELS
constant
The English strings the chart uses (empty and loading text, the data table and its Period column, the comparison suffix, the keyboard hint, show and hide series). Spread it and override what you translate.
LineChartLabels
type
The shape of labels: the chart kit's shared strings plus compare and period.
LineChartSeries
type
One line: the shared { key, label?, color?, name? } plus dashed? (a comparison series, drawn at 70% opacity) and strokeWidth?.

Examples

Single series, neutral

colors neutral, showArea and showDots for a calm KPI line.

Compare period

A dashed series for last year and a trend badge in the header.

Daily, 90 points

curve linear, labels thin from the newest backwards, yAxisSide end.

End labels

Four series named at their ends; colliding labels drop, never nudge.

Synced crosshair

Two charts driven by one activeIndex.

Loading and empty

The skeleton and the empty state in the plot's box.

Phone, 360px

The pinned readout, compact ticks and thinned labels.

Dependencies

motion d3-shape chart-kit motion ui-config use-locale

Files

components/ui/line-chart.tsx

FAQ

Is the React Line chart component free?

The preview, props and docs are free; copying the source needs a Pro plan. See plans.

How do I install Line chart?

How does Line chart behave on phones?

Used in

Admin Dashboard Page KPI Dashboard

More React chart and stat components

Radar chart Trend badge Gauge GitHub Activity Radial bar Tracker

All 16 React chart and stat components

Articles using this component

React Charts Tailwind: 4 Charts and a Kit for Any Theme
Component guidesOct 19, 202610 min read

Line chart React component for Tailwind CSS v4

Add to a project

Usage

Props

Parts

DEFAULT_LINE_CHART_LABELS

LineChartLabels

LineChartSeries

Examples

Single series, neutral

Compare period

Daily, 90 points

End labels

Synced crosshair

Loading and empty

Phone, 360px

Dependencies

Files

FAQ

Is the React Line chart component free?

How do I install Line chart?

How does Line chart behave on phones?

See also

Used in

More React chart and stat components

Articles using this component

Revenue vs. expenses, 2026

Line chart React component for Tailwind CSS v4

Add to a project

Usage

Props

Parts

DEFAULT_LINE_CHART_LABELS

LineChartLabels

LineChartSeries

Examples

Single series, neutral

Compare period

Daily, 90 points

End labels

Synced crosshair

Loading and empty

Phone, 360px

Dependencies

Files

FAQ

Is the React Line chart component free?

How do I install Line chart?

How does Line chart behave on phones?

See also

Used in

More React chart and stat components

Articles using this component

Revenue vs. expenses, 2026