Charts - Area Examples
Examples of area charts with segment fill coloring, reference overlays, and zoom.
#Usage
import { ChartLine, ChartReferenceBand, ChartSvg, ChartTooltip, ChartXAxis, ChartYAxis, ChartZoom } from '@primeui/vue-chart';<ChartSvg>
<ChartLine :data="data" category-x-field="date" value-y-field="value" :fill-opacity="0.32" />
<ChartXAxis type="time" />
<ChartYAxis />
<ChartTooltip mode="shared" />
<ChartZoom mode="x" />
</ChartSvg>Use area charts when the filled region helps readers compare volume, rates, or bands without hiding the line itself. Keep the fill subtle, and use reference bands only for meaningful periods or thresholds.
#US Unemployment Rate 2000–2024
segmentColor and segmentFillColor color each segment and its fill by severity, so crisis periods read red against the normal amber range. A ChartReferenceLine marks the long-run average; ChartReferenceBand shades the zone above it. ChartAnnotation draws a color key directly on the chart, leaving the legend space free.
#US Electricity Generation Mix 2010–2023
Four series inside ChartStacked build up the total generation mix year by year. curve="smooth" and fillOpacity="0.85" give the layers a blended look. ChartLegend toggles any source on or off, and the show-all tooltip reports every source's TWh contribution plus the annual total.
#US Treasury Yield Curve 2019–2024
Three overlapping area series with subtle fillOpacity make the spread between tenors visible. ChartZoom and ChartNavigator isolate any window; drag the brush to focus the COVID rate collapse, the 2022 hiking cycle, or the 2023 normalization. The tooltip computes the live 10Y–2Y spread on each hover.