Charts - Synced Charts
Coordinate multiple independent charts with synchronized crosshairs, zoom ranges, and legend visibility using ChartGroup.
#Usage
import { ChartCanvas, ChartGroup, ChartLegend, ChartSvg, ChartTooltip, ChartZoom } from '@primeui/vue-chart';<ChartGroup>
<ChartSvg :sync="true">
<!-- series and axes -->
</ChartSvg>
<ChartSvg :sync="true">
<!-- series and axes -->
</ChartSvg>
</ChartGroup>Synced charts coordinate multiple independent charts through ChartGroup. Set :sync="true" on each chart to share crosshairs, zoom ranges, and legend visibility. Each chart renders its own data; the group handles the coordination layer.
#Crosshair Sync
Wrap multiple charts in ChartGroup and set :sync="true" on each ChartSvg or ChartCanvas. Hovering one chart shows a crosshair at the same category position on all other charts in the group. Add ChartTooltip with crosshair to display the vertical guide line.
#Shared Legend
Place ChartLegend outside the individual charts but inside ChartGroup to create a single legend that controls all synced charts. Toggling a series in the shared legend hides it across every chart simultaneously. Set mode on ChartLegend to dataset for one entry per series, category for one entry per shared category label, or both for combined entries.
#Synced Zoom
Add ChartZoom to each chart and :sync="true" to synchronize zoom and pan ranges. Zooming or panning one chart automatically updates all others to the same visible range, keeping every metric on the same period.
#Dashboard
Combine four or more charts in a grid layout with synced crosshairs. Hovering any chart highlights the same time period across all panels, so temporal patterns line up across metrics.
#Full Sync
Combine crosshair sync, shared legend, and synced zoom in a single layout. The shared legend at the bottom controls visibility for all charts while crosshairs and zoom stay synchronized across every panel.
#API
#ChartGroup
Wrap any number of ChartSvg or ChartCanvas components inside ChartGroup to create a synchronization bus. Place ChartLegend inside ChartGroup but outside individual charts to create a shared legend.
ChartGroup accepts no props; synchronization is controlled via the sync prop on each child chart container.
#sync prop
Set sync on ChartSvg or ChartCanvas to opt into synchronization. Charts without sync inside a ChartGroup are unaffected by other charts' interactions.
| Value | Description |
|---|---|
true | Enable all sync behaviors: extremes, highlight, and visibility |
false | Disable sync, chart operates independently |
SyncConfig object | Fine-grained control per behavior |
#SyncConfig
| Prop | Type | Default | Description |
|---|---|---|---|
extremes | boolean | 'x' | 'y' | 'xy' | 'x' | Sync zoom and pan ranges. 'x' syncs the category/time axis only |
highlight | boolean | 'x' | 'y' | 'xy' | 'x' | Sync crosshair and hover position across charts |
visibility | boolean | true | Sync series visibility, toggling a legend item affects all charts |
#ChartLegend (shared mode)
When placed inside ChartGroup outside individual charts, ChartLegend acts as a shared legend controlling all synced charts.
| Prop | Type | Default | Description |
|---|---|---|---|
mode | 'dataset' | 'category' | 'both' | 'dataset' | dataset = one entry per series. category = one entry per shared category label. both = dataset entries followed by category entries |
For full ChartLegend configuration see Legend.