Charts - Grouped Bar Examples

Grouped bar chart demos on real data. Each uses a custom tooltip to show computed values across series.

#Usage

import { ChartBar, ChartLegend, ChartReferenceLine, ChartSvg, ChartTooltip, ChartXAxis, ChartYAxis } from '@primeui/vue-chart';
<ChartSvg>
    <ChartBar :data="data" category-x-field="country" value-y-field="business" name="Business" />
    <ChartBar :data="data" category-x-field="country" value-y-field="government" name="Government" />
    <ChartXAxis />
    <ChartYAxis />
    <ChartLegend />
    <ChartTooltip mode="shared" />
</ChartSvg>

Use grouped bars when each category needs side-by-side series comparison. Keep the number of series small enough that each group remains readable.

#G7 R&D Expenditure by Funding Source, 2022

A custom ChartTooltip render callback sums all three series into a total row and adds a colored delta against a reference threshold. ChartReferenceLine marks the cohort average so each bar's position shows whether that country is above or below it. Hover any group to see the per-sector breakdown alongside the computed total.

Loading Demo...

#Labour Force Participation by Gender & Region, 2023

sort reorders groups by the gap between the two series values, placing the widest disparities first. ChartDataLabels stamps every bar with its percentage so values are readable without hovering, while a custom ChartTooltip render function computes and displays the gap between the two series. ChartAnnotation uses xScale/yScale to place a callout over the most extreme group.

Loading Demo...