Charts - Combo

#Usage

import { ChartBar, ChartCanvas, ChartLine, ChartPolar, ChartRadar, ChartScatter, ChartStacked, ChartSvg, ChartTooltip, ChartXAxis, ChartYAxis } from '@primeui/vue-chart';

<ChartSvg>
    <ChartBar :data="data" category-x-field="categoryXField" value-y-field="valueYField" />
    <ChartLine :data="data" category-x-field="categoryXField" value-y-field="valueYField" />
    <ChartXAxis />
    <ChartYAxis />
</ChartSvg>

Combo charts combine multiple series types on a shared category axis. Each series is an independent component; place as many as needed. Bind series to separate Y-axes with yAxisId when units differ.

#Bar & Line

Place ChartBar and ChartLine as siblings inside a single ChartSvg or ChartCanvas. Both series share the same category axis and Y scale. Set name on each dataset to label them in the legend and tooltip. Use lineDash on ChartLine to distinguish a target or forecast from the actual bars.

#Dual Axis

When combining series with incompatible units (such as volume and temperature, or revenue and a rate) bind each to its own Y-axis using yAxisId. Add a ChartYAxis for each axis, set position to left or right, and use label and tickFormat to annotate each scale independently. The category axis remains shared.

#Bar & Area

Overlay a smoothed area line on top of bars to show a moving average or trend. Set fillOpacity on ChartLine to a low value (0.05–0.10) to hint at the fill without obscuring the bars beneath. Use connectNulls="false" when the line series has leading nulls, for example a 3-month moving average that only becomes valid from the third data point onward.

#Stacked Bar & Line

Wrap ChartBar series inside ChartStacked and place a standalone ChartLine as a sibling to show both a breakdown and the total in one chart. The line sits above the stacked bars and uses the same Y scale. Set fillOpacity="0" on the line to prevent it rendering as an area.

#Line & Scatter

Use ChartScatter for raw data points and ChartLine for a regression or trend line. Both plot on the same axes. The scatter shows distribution while the line shows the overall pattern. Set type="linear" on ChartXAxis when the X field is numeric rather than categorical.

#Line & Scatter on a Category Axis

Both ChartLine and ChartScatter can share a single category axis using the axis-tagged accessors category-x-field and value-y-field. The scatter points land on the same band positions as the line vertices.

#Polar & Radar

Place ChartPolar and ChartRadar as siblings inside a single chart. Both share a unified radial grid, and categories are merged. Assign distinct color values to create visual hierarchy: a neutral fill for the background series and a strong accent for the foreground outline.

#Shared Tooltip

Set mode="shared" on ChartTooltip to show all series values at the hovered category in a single tooltip, so actual, forecast, and prior-year series can be compared at once. Add crosshair to display a dashed reference line across the chart. All series must share a common Y scale; use yAxisId to split series with incompatible units.

#API

#Shared Props

All dataset components (ChartBar, ChartLine, ChartScatter, etc.) accept these props in a combo context:

#ChartYAxis (multi-axis)

Add multiple ChartYAxis components with unique id values to create independent Y scales. Bind datasets to their axis via yAxisId.

#Related Docs

• Combo Examples
• Column & Bar
• Line & Area
• Scatter & Bubble
• Axes
• Tooltip
• Legend