Charts - Line & Area

#Usage

import { ChartCanvas, ChartItem, ChartLine, ChartRange, ChartStacked, ChartSvg, ChartXAxis, ChartYAxis } from '@primeui/vue-chart';

<ChartSvg>
    <ChartLine :data="data" category-x-field="categoryXField" value-y-field="valueYField" />
    <ChartXAxis />
    <ChartYAxis />
</ChartSvg>

Line charts track changes over time or across ordered categories. Data and styling live on ChartLine; axes frame the scale. Set fillOpacity to switch to area mode. Use ChartStacked to accumulate multiple series.

#Basic

A line chart connects data points to show trends over time or across categories. Set categoryXField and valueYField to bind data fields. Add ChartXAxis and ChartYAxis to render axes and gridlines.

#Area

Set fillOpacity to fill the region beneath the line. 0 draws only the line, 0.3 gives a semi-transparent fill. Any value above 0 activates area mode.

#Colors

Set color to apply a single color to the line and its area fill. Accepts any CSS color string.

#Gradient Color

Pass a linear gradient object to color to apply a gradient to the line stroke and area fill. Define direction with normalized coordinates (x1, y1 → x2, y2) and stops for color transitions. { x1: 0, y1: 0, x2: 0, y2: 1 } creates a top-to-bottom gradient. Line strokes default to horizontal; area fills default to vertical.

#Curve Types

Set curve to control how the line interpolates between points. linear draws straight segments. smooth uses monotone cubic interpolation that never overshoots. spline uses a Catmull-Rom spline with configurable tension for a looser curve. The step variants (step, step-before, step-after) draw discrete horizontal transitions, useful for state and threshold data.

#Null Handling

By default, null values break the line into separate segments ('gap'). Set connectNulls="connect" to bridge gaps with a straight segment. Set connectNulls="zero" to treat nulls as zero, which is only appropriate when zero is a meaningful value rather than missing data. true and false are aliases for 'connect' and 'gap'.

#Segment Styling

Set segmentColor, segmentStrokeWidth, segmentDash, or segmentFillColor to style individual line segments. Each prop accepts a static value or a callback receiving the two endpoints (p0 and p1) with their values and positions. Return undefined from a callback to fall back to the series default for that segment.

#Markers

Set showMarkers to display point markers at each data vertex. Use markerShape to differentiate series. Built-in shapes are circle, square, triangle, cross, and star. Set markerSize to control the radius and pointRotation to rotate the marker shape.

#Custom Markers

Set renderMarker to replace built-in markers with custom content. The callback receives the full PointRenderContext for each point. Use ctx.index or ctx.data to vary the marker per point. In SVG mode return a VNode centered at the origin; the chart handles translation to each point position. In Canvas mode the context is pre-translated to the point; draw at origin and return null.

#Line Styling

Set lineStrokeWidth to control stroke thickness. Use lineDash for dashed or dotted patterns with lineDashOffset to shift the pattern. Set lineCapStyle for line endings and lineJoinStyle for how segments connect at data points.

#Line Border

Set borderColor and borderStrokeWidth to draw a halo stroke behind the main line. The halo renders wider than the line itself, which keeps lines readable when they cross area fills or other series. Use borderDash for a dashed halo and borderCapStyle to control its line endings independently from the main stroke.

#Stacked Area

Wrap multiple ChartLine components inside ChartStacked to stack series vertically. Works with line-only and area series. Set mode="percent" on ChartStacked to normalize each category to 100%. Negative values stack downward from zero.

#Range Area

Wrap two ChartLine components inside ChartRange to fill the region between them. Set color on ChartRange for a uniform fill, or omit it for dual-color mode where each line's color fills the region where that series is on top. ChartRange requires exactly two ChartLine children. Fewer renders nothing; more than two uses only the first two.

#Declarative

Define data points inline using ChartItem children instead of a data array. Each ChartItem accepts category-x and value-y, or category-y and value-x for horizontal lines, and color.

#Title & Caption

Add ChartTitle to display a title above the chart and ChartCaption for a descriptive line beneath it. Adding both reduces the available chart area.

For full configuration see Title & Caption.

#Hover

ChartHover brightens the hovered point while the rest stay at normal opacity. Shared X-position hover is most useful when several series share the same ordered axis.

For full configuration see Hover.

#Tooltip

Add ChartTooltip to show data details on hover. Shared tooltips and crosshairs keep readers oriented across multiple series on the same ordered axis.

For full configuration see Tooltip.

#Legend

Add ChartLegend to display an interactive legend. Each ChartLine series appears as a separate entry; click any item to toggle that series.

For full configuration see Legend.

#Axes

Use label on ChartXAxis and ChartYAxis to add axis titles. Time axes suit continuous dates; use a secondary Y axis only when one scale would hide a series because the units differ.

For full configuration see Axes.

#Data Labels

Add ChartDataLabels to label data points. Line labels work best for endpoints, sparse checkpoints, or a few key events. Avoid labeling every vertex in dense time series.

For full configuration see Data Labels.

#Zoom & Navigator

Add ChartZoom and ChartNavigator when the ordered range is longer than the visible chart can explain at once.

For full configuration see Zoom & Pan and Navigator.

#Annotation

Use ChartAnnotation to render custom content overlaid on the chart area. Use for event markers, threshold callouts, or forecast boundaries tied to specific data coordinates.

For full configuration see Annotation.

#Reference Lines & Bands

Add ChartReferenceLine for threshold and divider lines. Add ChartReferenceBand to highlight tolerance, forecast, or alert ranges.

For full configuration see Reference Lines & Bands.

#Animation

Pass the chart-root animation prop to control entrance and update transitions. Keep animation for small updates; use Canvas rendering when point volume grows.

For full configuration see Animation.

#Export

Add ChartExportMenu to let users download the chart as PNG, SVG, or PDF.

See Export for format options and programmatic export.

#Responsive

See Responsive for container sizing, aspect ratio, and breakpoint configuration.

#Accessibility

See Accessibility for ARIA labels, keyboard navigation, and screen reader support.

#API

#ChartLine

Visual styling props with type accessor → R accept a static value, a per-item array, a field name (keyof T), or a callback (ctx: ItemContext<T>) => R | undefined. Color-family arrays cycle modulo length; other accessor arrays clip and fall back to the series default.

#ItemContext

Passed to every accessor → R callback. Return undefined to fall back to the series-level default for that item.

#SegmentContext

Passed to per-segment callbacks (segmentColor, segmentStrokeWidth, segmentDash, segmentFillColor).

#ComputedPoint

#ChartStacked

Wrap ChartLine children inside ChartStacked to stack series vertically. Works with both line-only and area series. Without this wrapper, multiple ChartLine components overlap each other.

#ChartRange

Wrap exactly two ChartLine components inside ChartRange to fill the area between them. Fewer than two children renders nothing, more than two uses only the first two.

#ChartItem

Use ChartItem as children of ChartLine instead of a data array for inline data definitions.

#PointRenderContext

Passed to the renderMarker callback for each data point.

#Related Docs

• Line Examples
• Area Examples
• Stacked Examples
• Range Examples
• Time Series Examples
• Legend
• Tooltip
• Hover
• Data Labels
• Annotation
• Zoom & Pan
• Navigator
• Reference Lines & Bands
• Animation
• Axes