Charts - Combo Examples
Combo chart demos on real data. Each combines multiple chart types to show complementary data views.
#Usage
import { ChartBar, ChartLegend, ChartLine, ChartReferenceLine, ChartSvg, ChartTooltip, ChartXAxis, ChartYAxis } from '@primeui/vue-chart';<ChartSvg>
<ChartBar :data="data" category-x-field="month" value-y-field="revenue" name="Revenue" />
<ChartLine :data="data" category-x-field="month" value-y-field="target" name="Target" :line-dash="[6, 4]" />
<ChartXAxis />
<ChartYAxis />
<ChartLegend />
<ChartTooltip mode="shared" />
</ChartSvg>Use combo charts when one view needs complementary encodings, such as bars for volume and lines for rates or targets. Keep incompatible units on separate axes and label them clearly.
#Climate Dashboard: Rainfall + Temperature
A dual-axis combo where two variables with incompatible units share a category axis. Rainfall renders as bars against the left axis (y-axis-id="rainfall", formatted as mm), while max and min temperature render as smoothed lines against the right axis (y-axis-id="temperature", formatted as °C). A ChartReferenceLine pins the annual mean temperature on the temperature axis. Shared-mode tooltip aligns all three readings on hover.
#Stock Price + Volume
ChartCandlestick on the right axis renders OHLC candles; ChartBar on the left axis plots daily volume with an elevated max so volume sits below the price action without overlapping. A dashed ChartReferenceLine shows the rolling 20-day average volume. ChartZoom enables drag-to-zoom, and the X axis rotates tick labels so dates don't overlap.
#Revenue Mix vs Target with Growth Overlay
ChartStacked combines three ChartBar series into a single stack per quarter. A dashed ChartLine overlays the quarterly revenue target on the same left axis, and a second ChartLine on the right axis tracks YoY growth with its own scale and tick formatter. ChartDataLabels shows values on the bars; a display predicate suppresses labels for the target line.
#Channel Efficiency Quadrants
ChartScatter plots each channel at (spend, conversion) with bubble radius proportional to attributed revenue. Four ChartReferenceBand rectangles tint the quadrants split at the portfolio medians: efficient channels sit top-left, underperforming channels bottom-right. A ChartLine shows the least-squares regression of the raw data.
#Economic Forecast Envelope
ChartRange wraps two ChartLine series (forecast high and low) to render a shaded uncertainty band. A third standalone ChartLine carries the actual GDP figures through the historical period. connect-nulls="false" keeps the actual line from extending into the forecast horizon where values are null. Two ChartReferenceBand columns call out the pandemic recession year and the forecast horizon. Reference lines mark the 0% axis and the long-run potential growth rate.
#Product Capability Benchmark: Radar + Polar
Industry-average scores render as filled ChartPolar sectors; the product's scores overlay as a ChartRadar outline. Both share the same seven capability axes with no axis configuration needed. Where the radar outline sits outside the polar fill, the product is above average on that capability.