Charts - Synced Charts Examples

#Usage

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

<ChartGroup>
    <ChartSvg :sync="true">
        <ChartLine :data="data" category-x-field="date" value-y-field="price" />
        <ChartXAxis />
        <ChartYAxis />
        <ChartTooltip crosshair />
        <ChartZoom mode="x" />
    </ChartSvg>
    <ChartSvg :sync="true">
        <ChartBar :data="data" category-x-field="date" value-y-field="volume" />
        <ChartXAxis />
        <ChartYAxis />
        <ChartTooltip crosshair />
    </ChartSvg>
</ChartGroup>

Use ChartGroup when independent chart roots should share hover, visibility, or zoom state. Add :sync="true" or a SyncConfig to each participating root.

#Climate Overview

ChartGroup with :sync="true" wraps four panels using different chart types: line, bar, radar, and calendar heatmap. Hovering any month on one cartesian chart highlights the same category on the others; the heatmap and radar participate via category-hover sync even though their axes differ.

#Trading Watchlist: Sparklines in Table

Each table row embeds two ChartSvg sparklines inside a shared ChartGroup; axes are hidden on each mini chart. Hovering one row's price sparkline highlights the same trading day on every other row's sparklines, creating a cross-row time crosshair.

#Fleet Telemetry: KPI Strip

Four tiles each pair a numeric KPI readout with a mini spline; a detail chart below plots all four signals for the selected vehicle. ChartGroup syncs crosshair position so hovering any tile's sparkline drops a marker at the same timestamp in the detail chart and the other tiles. Click a vehicle button to swap the data source.

#E-commerce Funnel: Category Sync

Four mixed-type panels sit below a KPI header row: funnel bars, a traffic-source donut, top-products bars, and a revenue treemap. Sync here is categorical; hovering a traffic source slice highlights the corresponding row or segment in every other panel. ChartGroup sync works for any shared dimension, including categorical keys.

#Server Metrics Monitor

Four full-width line strips stacked vertically share a 24-hour time axis; ChartZoom mode="x" on the bottom strip zooms all four panels in lockstep. Each strip includes a ChartReferenceLine at its warning threshold. The right-hand rail shows current, min, avg, and max per metric, and crosshair position syncs across all panels.

#Energy Grid Operations

A stacked area, radar panel, calendar heatmap, and horizontal bar are combined in a single ChartGroup. Time-axis panels sync crosshair across hours; the radar and bar participate via category-hover sync.

#Candlestick + Volume: Stacked Panes

Two ChartCanvas instances inside ChartGroup create a stacked pane layout: a price pane (70%) with candlesticks and SMA line overlays, and a volume pane (30%) with directional bars colored by close vs. previous close. Dragging on either pane zooms both in lockstep via the group's X-axis extremes sync. The shared crosshair drops a vertical marker on both panes simultaneously.

#Financial Workstation: Price, Volume, Spread

Three coordinated panes track an execution desk view: price candles with VWAP, volume bars, and quoted spread in basis points. Every pane opts into ChartGroup with X-axis sync, so crosshair position and drag-zoom ranges stay aligned across price, volume, and spread. The price pane includes ChartExportMenu, so image and CSV export come from the current chart data rather than a fake wrapper control.

#Related Docs

• Synced Charts Overview
• Combo Examples
• Heatmap
• Zoom & Pan
• Tooltip