ChartLine

Line and area charts: trends, stacked areas, value colors, steps, reference lines, time axes, and sparklines.

Introduction

ChartLine draws lines and areas over a shared set of categories. Compose it with ChartLineSeries, ChartAxis, ChartLegend, and ChartTooltip. Every series has one value per category. Shared parts, colors, and accessibility are in Chart.

When to use: Trends over an ordered set of categories — days, weeks, months — and compact sparklines in cards.

Compared to similar components:

• ChartBar — Comparing amounts between categories, rankings, or stacked totals.
• ChartScatter — Two numeric values per point instead of one value per category.

Use the framework selector in the site header to switch between React and Vue.

Import

import { ChartLine } from "@bridge-ui/vue/Components/ChartLine";
import { ChartLineSeries } from "@bridge-ui/vue/Components/ChartLineSeries";

import { ChartLine } from "@bridge-ui/react/Components/ChartLine";
import { ChartLineSeries } from "@bridge-ui/react/Components/ChartLineSeries";

Add ChartAxis, ChartLegend, and ChartTooltip from Chart.

Basic usage

Pass the category labels as categories and add a ChartLineSeries per data set. A null value leaves a gap and is skipped in the tooltip.

Area and stacked area

area fills under the line; curve="smooth" rounds it. Set them on the root for every series, or per series. Series with the same stack key stack on top of each other.

areaOpacity sets the fill opacity (0.15 by default). Stacked bands read better with a stronger fill. Set it on the root for every series, or per series.

Color by value

colorRanges recolors the line (and its area) piece by piece. A value in [min, max) takes the range color; values outside every range keep the series color. Range labels show in the tooltip, the data table, and the keyboard announcements.

With colorBy="category", min and max are category indices (zero-based, both included): the line changes color over that stretch of the axis, for example to highlight a campaign. On a time axis the indices still point at the categories.

Step, dashed, points, and reference lines

step draws a step line (start, middle, or end). dashed dashes the stroke and showPoints always draws the point symbols.

reference draws a dashed line for a statistic of the series (average, min, max) or a fixed value, each with an optional label.

Time axis

Pass dates as categories to get a time axis: points are spaced by elapsed time, and tick labels (days, months, years) follow the span and the Bridge locale. formatDate formats the dates in the tooltip, data table, and summary. On a time axis, ChartAxis formatTick receives the timestamp (ms).

Sparkline

sparkline drops axes, grid, and padding, and defaults the height to 48 (also over a registry height). The summary and data table stay.

Value labels

labels draws the value of each point on the plot. formatLabel formats value labels and reference line labels.

<ChartLine labels :categories="months" :format-label="(value) => `${value}k`">
  <ChartLineSeries name="Revenue" :data="revenue" />
</ChartLine>

<ChartLine labels categories={months} formatLabel={(value) => `${value}k`}>
  <ChartLineSeries name="Revenue" data={revenue} />
</ChartLine>

Keyboard and accessibility

Arrow keys move between categories. The root generates a summary with the series names and the category range. See Chart for the shared keyboard and accessibility behavior.

Related components

Chart, ChartBar, ChartScatter

API

ChartLine

Shared root props (height, palette, loading, summary, …) are listed in Chart.

ChartLineSeries

Unset options fall back to the ChartLine props. Inside a ChartBar, the series draws a line over the bars.