Hewn
Components

Components

LineChart

Multi-series line chart with optional tooltip.

newfree

Install

@hewnui/ui · @hewnui/themes · hewnui

Terminal
npm install @hewnui/ui @hewnui/themes
Terminal
pnpm add @hewnui/ui @hewnui/themes
Terminal
yarn add @hewnui/ui @hewnui/themes
Terminal
bun add @hewnui/ui @hewnui/themes
Terminal
npx hewnui@latest add line-chart

First install? Follow Getting started for peers, CSS and providers.

LineChart plots one or more series with theme-token colors, grid/axis labels, and draw-in motion. Use LineChart.Tooltip for point details.

Revenue by weekday

Usage

TSX
import { LineChart } from "@hewnui/ui";

<LineChart
  summary="Revenue by weekday"
  series={[
    {
      id: "rev",
      label: "Revenue",
      data: [
        { x: "Mon", y: 12 },
        { x: "Tue", y: 18 },
        { x: "Wed", y: 15 },
      ],
    },
  ]}
>
  <LineChart.Tooltip />
</LineChart>

States

loading, empty, and error via the status prop (empty also when series have no points).

Accessibility

role="img" plus required summary. Points are keyboard-focusable when a tooltip is used.

API reference

Props for LineChart from @hewnui/ui/line-chart. Generated from component types — not hand-written.

Prop

Type

Sparkline

Compact inline trend line for dense data surfaces.

AreaChart

Filled area chart for cumulative or volume trends.

On this page

UsageStatesAccessibility