Charts - Bar Examples
Bar chart demos built on real datasets. Each highlights a different rendering or theming capability.
#Usage
import { ChartBar, ChartDataLabels, ChartLegend, ChartSvg, ChartTooltip, ChartXAxis, ChartYAxis } from '@primeui/vue-chart';<ChartSvg>
<ChartBar :data="data" category-x-field="country" value-y-field="gold" />
<ChartXAxis />
<ChartYAxis />
<ChartDataLabels />
<ChartTooltip />
</ChartSvg>Use these examples after the Column & Bar overview when you need realistic ranking, horizontal labels, custom colors, or PrimeUI token styling. Choose horizontal bars when category labels need room.
#Paris 2024 Summer Olympics, Gold Medals, Top 12 Countries
A four-stop ranking gradient passed to color gives every bar a polished competitive scale without tying the chart to medal-metal colors. ChartAnnotation uses xScale/yScale to place rank badges above the podium bars in place of data labels. Hover any bar to see rank and medal count.
#World's Largest Metropolitan Areas by Population, 2024
categoryYField and valueXField put categories on the Y axis, keeping long city names flush without rotation. A color callback assigns a distinct tint per continent, and a custom render on ChartLegend turns the single series into a continent swatch key. sort="value-desc" orders from largest to smallest, and ChartDataLabels uses a compact millions formatter.
#World's Most-Visited Art Museums, 2023
ChartReferenceBand draws a shaded threshold strip so bars that clear it stand out visually. A color callback applies an ordered cool palette so rank encodes in both bar height and fill. ChartDataLabels labels each bar directly, and the tooltip adds city, year-over-year change, and a conditional tier flag.
#PrimeUI-Themed Bar Chart
CSS variables on the chart wrapper (--p-chart-color-1, --p-chart-axis, --p-chart-grid) are written directly onto SVG fill= and stroke= attributes, so the browser resolves them natively without a palette prop. Toggle dark mode or switch the PrimeUI theme and the chart recolors without a re-render.