Charts - Range Area Examples

#Usage

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

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

Use ChartRange when the band between two related series is the point: high and low prices, forecast intervals, daylight windows, or confidence ranges. It expects exactly two ChartLine children.

#Brent Crude Oil Annual Price Range, 2005 to 2023

ChartRange fills the gap between annual high and low prices to show year-by-year volatility. Three ChartReferenceBand layers mark the affordable, moderate, and shock price zones; ChartAnnotation event lines call out each major price shock. The tooltip reports the annual high, low, average, and spread for any hovered year. Drag the ChartNavigator to focus on any multi-year window.

#Global Number of Births and Deaths, 1950 to 2100

Omitting color on ChartRange enables dual-color mode: each line's color fills the region where that series leads. ChartAnnotation labels mark both series, the growth and decline regions, and the crossover point. The tooltip computes the natural increase or decrease for each hovered year.

#London Sunrise & Sunset Times

ChartRange fills the gap between the sunrise and sunset lines to show the daylight window across a full year. The Y-axis formatter converts decimal hours to HH:MM so the axis reads as clock time. A ChartReferenceLine at noon and a ChartReferenceBand for the long-evening window add context. ChartAnnotation prints the solstice durations directly on the chart at the June and December extremes.

#Related Docs

• Line & Area Overview
• Area Examples
• Time Series