LineChart

Live preview

Loading example…

Trends over categories or time. Smooth monotone curves by default (they never overshoot the data), straight with curve="linear"; dashed series for forecasts or comparisons; brush for zooming long date ranges. Other curves: "step", "step-before", "step-after" for values that hold until they change (stock levels, prices).

Import

import { LineChart } from "@jcsoftdev/ui/charts";

Single-component entry points tree-shake to just this component: @jcsoftdev/ui/charts/line-chart.

Usage

<LineChart
  title="Ventas por día"
  categories={twoWeeks.dates}
  series={[{ id: "ventas", name: "Ventas", data: twoWeeks.values }]}
  valueFormat="currency"
  height={300}
  curve="smooth"
  markers={false}
  dataLabels={false}
  grid
  tooltip
  brush={false}
  loading={false}
  animate
  labels={spanishLabels}
/>

Props

Prop	Type	Default	Description
`series` *	`readonly ChartSeries[]`
`gradient`	`boolean`	`false`	Strokes each line with a gradient from its color towards the next palette color.
`legend`	`boolean \| "top" \| "bottom"`		Legend placement, or false to hide it. Defaults to “top” with two or more series.
`title` *	`string`		Accessible name of the chart (`aria-label` of the drawing).
`animate`	`boolean`		Entry animation (default true; always off with prefers-reduced-motion).
`className`	`string`
`grid`	`boolean`		Background gridlines (default true).
`tooltip`	`boolean`		Shared tooltip (default true).
`categories` *	`readonly XValue[]`		One entry per data point: strings, numbers or dates.
`description`	`string`		Extra sentence for the hidden data table caption.
`height`	`number \| "fill"`		Height of the plot in pixels, 300 by default.
`aspectRatio`	`number`		Width / height ratio; sizes the plot from the container width (wins over a pixel `height`).
`curve`	`"linear" \| "smooth" \| "step" \| "step-before" \| "step-after"`	`"smooth"`
`markers`	`boolean`		Dots on every line point. Hovered points are always marked.
`dataLabels`	`boolean`		Values printed on the marks.
`transition`	`boolean`		Eases lines and areas between data updates (live data); off by default.
`maxPoints`	`number \| false`		Series with more points than this are reduced with LTTB, 2000 by default; `false` draws every point.
`syncId`	`string`		Charts with the same id share hover (crosshair and tooltip) and the zoom window.
`onPointClick`	`((point: CartesianPointEvent) => void)`		Called with the category (and nearest series) under the pointer when the plot is clicked or Enter is pressed.
`valueFormat`	`ValueFormat`		Format of values in tooltips, labels and the data table.
`xFormat`	`((value: XValue) => string)`		Label of a category on the axis and in the tooltip (dates get Spanish defaults).
`xScale`	`"time" \| "auto" \| "band"`		“time” spaces dates by real elapsed time; “auto” picks it when every category is a Date and no series is a column.
`yAxis`	`ValueAxisOptions`
`axes`	`readonly CartesianAxisSpec[]`		Any number of value axes. `yAxis` and `rightAxis` are shorthand for the ids “left” and “right”; more entries stack outward on their `side` (right by default) and series pick one with `axis`.
`annotations`	`readonly ChartAnnotation[]`
`categoryLabelRotation`	`number`		Tilts the category labels (degrees, e.g. -45) so long names fit; vertical charts only.
`categoryGroups`	`readonly CategoryGroup[]`		Second tier of labels under the category axis (vertical charts); counts must add up to the categories.
`onCategoryClick`	`((index: number) => void)`		Click (or Enter on the focused plot) on a category; receives its index in `categories`.
`brush`	`boolean`		Drag-to-zoom on the plot plus an overview brush with a reset button.
`overlay`	`CartesianOverlay`		Extra layers over the plot, e.g. the ruler and ink tools of `useChartInk`. Vertical charts only.
`rangeSelect`	`{ value: readonly [number, number] \| null; onChange: (range: readonly [number, number] \| null) => void; }`
`loading`	`boolean`
`initialHidden`	`readonly string[]`		Series hidden at first; the legend can show them.
`labels`	`Partial<ChartLabels>`

* marks a required prop.

Storybook stories

Source

packages/ui/src/charts/line-chart/line-chart.tsx