Charts - Line Examples

#Usage

import { ChartLine, ChartNavigator, ChartReferenceLine, ChartSvg, ChartTooltip, ChartXAxis, ChartYAxis, ChartZoom } from '@primeui/vue-chart';

<ChartSvg>
    <ChartLine :data="data" category-x-field="date" value-y-field="value" />
    <ChartXAxis type="time" />
    <ChartYAxis />
    <ChartTooltip mode="shared" crosshair />
    <ChartZoom mode="x" />
    <ChartNavigator />
</ChartSvg>

Use these complete line-chart scenarios after the Line & Area overview. The examples keep the same public parts and layer in reference lines, navigator windows, custom tooltips, and segment styling where the data benefits from them.

#NASA Global Temperature Anomaly

segmentColor splits the line at zero so warming years stand out against cooler ones. Two ChartReferenceLine components mark the baseline and the 1.5°C Paris Agreement target. Drag the ChartNavigator to zoom into any decade; ChartZoom handles the interaction and minUnit="month" prevents zooming past monthly granularity.

#U.S. Unemployment Rate 2000–2024

ChartReferenceBand shades each recession period so downturns are immediately visible against the normal range. A ChartReferenceLine marks the 4.4% natural rate. The custom tooltip color-codes severity (green, amber, or red), making each point's distance from the normal range readable at a glance. Drag the ChartNavigator to isolate any period.

#US Stock Indices: Normalised Comparison

Three ChartLine series are rebased to a common starting point so divergence is visible without separate axes. ChartTooltip with mode="shared" and crosshair tracks all three values simultaneously across the chart.

#Related Docs

• Line & Area Overview
• Area Examples
• Range Examples
• Time Series