Charts - Time Series Line Examples

Line and area charts on a live time axis. Each demo uses a streaming rolling window.

#Usage

import { ChartCanvas, ChartLine, ChartTooltip, ChartXAxis, ChartYAxis } from '@primeui/vue-chart';
<ChartCanvas :animation="{ updateMode: 'append', limit: 1000 }">
    <ChartLine :data="points" category-x-field="timestamp" value-y-field="cpu" />
    <ChartXAxis type="time" />
    <ChartYAxis />
    <ChartTooltip mode="shared" />
</ChartCanvas>

Use Canvas for streaming examples so updates repaint pixels instead of growing an SVG DOM. Keep a fixed-length window and hold the axis domain steady when the stream updates frequently.

#Live server metrics: CPU and memory utilisation

Two ChartLine series stream into a 60-second rolling window on a type="time" axis that formats timestamps as the window scrolls. A ChartReferenceLine marks the 80% CPU alert threshold. The show-all crosshair tooltip shows both metrics at any hover point, and ChartLegend toggles either series off.

Loading Demo...

#Live stock price: ACME Corp

segmentColor and segmentFillColor paint each tick green on a rise and red on a fall, so the trend direction is readable at a glance. New ticks push into a 50-point rolling window on a live type="time" axis. ChartZoom and ChartNavigator isolate any portion of the feed, and the tooltip computes the session change from the first visible tick.

Loading Demo...

For a localized Arabic market snapshot that keeps the time axis, numeric axis, tooltip, and layout direction aligned, see the Locale and RTL example.