LineChart

LineChart and AreaChart show trends over time or across ordered categories, with several series on one axis.

2px lines with rounded caps, a ~10% fill (AreaChart), a crosshair that snaps to the nearest X point and one tooltip listing every series. The X axis takes strings (evenly spaced) or Dates (on a real time scale). With ≤ 4 series, series names are written at the end of each line; they turn off when the labels collide.

Yugen Labs · experimentalThis component is outside SemVer: its API can change in a minor release, and What's new says so. Versioning policy

Visits by source

January – August

Import

Install from npm, copy the source into your project with @yugen-ui/cli or the shadcn CLI, or import directly when working in this repo.

TSX

// npm install yugen-uiimport { LineChart, AreaChart } from "yugen-ui";

Variants

Each tile is a standalone example: hover to copy, or press Code to see the source.

Daily visits

Time axis & markers

index is a Date → positions follow real time, and axis labels are formatted with Intl (en-US). markers draws dots ≥ 8px with a surface-colored ring.

Active users

AreaChart

Single series: a light fill under the line, and the Y axis always starts at 0. The last value is labeled directly.

Storage used (GB)

Stacked areas

stacked adds the series together for part-to-whole over time; the tooltip gets an extra total row.

Subscriptions by plan

Highlighting one series

When the story is “the Pro plan is growing fast”: highlight colors one series and turns the others gray as background.

Usage

Use lines for trends; AreaChart for a single series or for part-to-whole over time (stacked).
Label lines directly at their end when there are ≤ 4 series; with more, rely on the legend, the tooltip or small multiples.
When the story is about one series, use highlight instead of eight equally weighted colors.

Don't

Don't put two measures with different scales on two Y axes. Split the chart or index them (= 100 at the first point).
Don't stack heavy fills that cover each other. The fill is only a light ~10% layer; the line is the main mark.
Don't label every point. Label only the last point or the extremes.

Props

Prop · Type	Default	Description
data / index / seriesChartDatum[] / string / ChartSeries[]	Default: —	Data sorted by X in ascending order.
xType"category" \| "time"	Default: auto	A Date → time (positions on a time scale).
xFormat / xTooltipFormatIntl.DateTimeFormatOptions \| (v) => string	Default: —	Axis labels / tooltip & table labels.
valueFormat / axisFormatIntl.NumberFormatOptions \| (v) => string	Default: —	Value and axis format.
markersboolean	Default: false	Dots at every point.
curve"monotone" \| "linear"	Default: "monotone"	Interpolation that doesn't overshoot the data peaks.
endLabelsboolean	Default: ≤ 4 series	Labels at the end of each line; turn off if they collide.
highlightstring	Default: —	Key of the highlighted series (the other series turn gray).
includeZeroboolean	Default: false (Line) · true (Area)	Y axis starts at 0.
AreaChart.stackedboolean	Default: false	AreaChart only: stacks the areas.
title, description, toolbar, height, locale, texture, legend…ChartFrameProps	Default: —	Same as BarChart.

Messages

Text built into the component: labels, aria-labels, screen reader announcements.

English by default. Change it with the messages prop of YugenProvider, by the namespace below; messagesVi has the Vietnamese set. See Interface language.

messages.chart

Key · Type	Default (English)	messagesVi
roleDescriptionstring aria-roledescription của vùng vẽ.	Default (English)`"chart"`	messagesVi`"biểu đồ"`
heatmapRoleDescriptionstring	Default (English)`"heat map"`	messagesVi`"bản đồ nhiệt"`
dataTablestring Nút bật chế độ bảng của ChartContainer.	Default (English)`"Data table"`	messagesVi`"Bảng dữ liệu"`
totalstring Dòng tổng (tooltip, bảng) và nhãn giữa vòng DonutChart.	Default (English)`"Total"`	messagesVi`"Tổng"`
valuestring	Default (English)`"Value"`	messagesVi`"Giá trị"`
sharestring	Default (English)`"Share"`	messagesVi`"Tỉ lệ"`
noDatastring	Default (English)`"No data"`	messagesVi`"Không có dữ liệu"`
timestring Tiêu đề cột đầu của bảng (khi không truyền `indexLabel`).	Default (English)`"Time"`	messagesVi`"Thời gian"`
categorystring	Default (English)`"Category"`	messagesVi`"Danh mục"`
groupstring	Default (English)`"Group"`	messagesVi`"Nhóm"`
namestring	Default (English)`"Name"`	messagesVi`"Tên"`
otherstring Nhóm gộp (DonutChart vượt `maxSlices`, ScatterChart nhóm thứ 9+).	Default (English)`"Other"`	messagesVi`"Khác"`
trendstring Nút bật đường xu hướng của ScatterChart.	Default (English)`"Trend"`	messagesVi`"Xu hướng"`
increasestring	Default (English)`"Increase"`	messagesVi`"Tăng"`
decreasestring	Default (English)`"Decrease"`	messagesVi`"Giảm"`
noChangestring	Default (English)`"No change"`	messagesVi`"Không đổi"`
brushstring ChartBrush: tên cửa sổ thu phóng, dòng "Đang xem … · n/N mốc", nút đặt lại.	Default (English)`"Visible range"`	messagesVi`"Vùng xem"`
brushRoleDescriptionstring	Default (English)`"zoom window"`	messagesVi`"cửa sổ thu phóng"`
brushViewingstring	Default (English)`"Showing"`	messagesVi`"Đang xem"`
brushPoints(shown: number, total: number) => string	Default (English)(shown, total) => `${shown}/${total} ${total === 1 ? "point" : "points"}`	messagesVi(shown, total) => `${shown}/${total} mốc`
brushResetstring	Default (English)`"Reset"`	messagesVi`"Đặt lại"`
lineSummary(info: { kind: "line" \| "area" \| "stacked" \| "expand"; points: number; /** Mốc đầu / cuối (chỉ có khi points > 0). */ from?: string; to?: string; series: string[]; }) => string Mô tả truy cập tự sinh (khi không truyền `ariaLabel`).	Default (English)Function, see messages.ts	messagesViFunction, see messages.ts
barSummary(info: { horizontal: boolean; stacked: boolean; categories: number; series: string[] }) => string	Default (English)Function, see messages.ts	messagesViFunction, see messages.ts
donutSummary(info: { groups: number; total: string; largest?: { label: string; share: string } }) => string	Default (English)Function, see messages.ts	messagesViFunction, see messages.ts
scatterSummary(info: { points: number; x: string; y: string; /** Tên đại lượng kích thước (biểu đồ bong bóng). / size?: string; /* Tên các nhóm (khi có nhiều nhóm). */ groups?: string[]; trends: { group?: string; slope: string; r2: string }[]; }) => string	Default (English)Function, see messages.ts	messagesViFunction, see messages.ts
heatmapSummary(info: { rows: number; columns: number; min?: string; max?: string; hasEmpty: boolean }) => string	Default (English)Function, see messages.ts	messagesViFunction, see messages.ts
sparklineSummary(info: { points: number; first: string; last: string; min: string; max: string }) => string	Default (English)Function, see messages.ts	messagesVi({ points, first, last, min, max }) => `Xu hướng ${points} điểm: từ ${first} đến ${last}, thấp nhất ${min}, cao nhất ${max}`