Charts - Column & Bar

#Usage

import { ChartBar, ChartCanvas, ChartItem, ChartOverlap, ChartStacked, ChartSvg, ChartWaterfall, ChartXAxis, ChartYAxis } from '@primeui/vue-chart';

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

Bar charts compare categories by length and work well for rankings, period breakdowns, and distributions. Data and styling live on ChartBar; axes frame the scale. Wrapper components like ChartStacked, ChartWaterfall, and ChartOverlap add composite behavior without changing the bar's own props.

#Basic

Set categoryXField and valueYField to bind data. Add ChartXAxis and ChartYAxis for axes and gridlines.

#Colors

Pass an array to color to assign a custom palette. Bars cycle through colors by index. For conditional coloring, pass a function that receives each data item and returns a color string.

#Gradient Color

Pass a linear gradient object to the color prop to apply a gradient fill across all bars. For per-bar gradients, pass an array of gradient objects to color.

#Grouped

Place multiple ChartBar components as siblings. Each series positions itself within the category group. barGap and categoryGap both accept a fraction between 0 and 1, relative to the category band width.

#Horizontal

Bind categoryYField and valueXField instead of categoryXField and valueYField to render bars horizontally. The category axis moves to Y, which keeps long labels readable without rotation.

#Sorted

Set sort to reorder bars before rendering. value-desc places the highest value first; value-asc reverses it. label-asc and label-desc sort alphabetically by category name. For multi-series charts, sortAggregate controls how series values combine to determine rank. The default is sum.

#Negative Values

Bars extend below the zero line for negative values. Pass a function to color to color positive and negative bars differently.

#Null Values

By default, null values leave an empty category slot with no bar drawn ('gap'). Set connectNulls="zero" to treat nulls as zero and draw a bar at the baseline instead. Unlike line charts, there is no path-bridging mode for bars. 'connect' behaves the same as 'zero'.

#Floating / Range

Set openField to anchor each bar at a specific starting value instead of zero. The bar spans from openField to valueYField. This is the standard approach for Gantt-style timelines and range charts.

#Variwide

Set weightField to a numeric data field to make each bar's width proportional to that value. Wider bars represent larger weight values. Useful for Marimekko charts where two dimensions are encoded at once.

#Custom Shape

Set renderShape to replace the default rectangle with a custom SVG path. The callback receives the computed bar geometry (x, y, width, height, value, category, dataIndex, and isNegative) and returns an SVG path d string. Works in both SVG and Canvas renderers via Path2D.

#Border

Set borderStrokeWidth and borderColor to stroke each bar. borderRadius rounds the corners: pass a number for uniform rounding or { topLeft, topRight, bottomLeft, bottomRight } for per-corner control. Use borderDash for a dashed stroke and borderSkipped to drop the border on specific edges.

#Bar Sizing

Set barThickness to fix bar width in pixels. maxBarThickness caps the auto-calculated width when the chart is wide. minBarLength ensures bars for very small values stay visible. Use categoryGap to control spacing between groups.

#Stacked

Wrap multiple ChartBar components inside ChartStacked to stack bars vertically. Each series accumulates on top of the previous one. Negative values stack downward from zero.

#Percent Stacked

Set mode="percent" on ChartStacked to normalize each category to 100%. The axis always spans 0–100% regardless of the underlying data magnitude.

#Waterfall

Wrap ChartBar inside ChartWaterfall to create a waterfall chart. Each bar floats from the running total of previous values. Set totalField to a boolean field on the data items to mark summary bars. Total bars reset from zero and display the cumulative sum.

#Overlap

Wrap multiple ChartBar components inside ChartOverlap to layer bars at the same category position. The first child renders widest at the back, the last renders narrowest at the front. This creates target vs. actual comparisons without side-by-side grouping.

#Declarative

Define bars inline using ChartItem children instead of a data array. Each ChartItem accepts category-x and value-y, or category-y and value-x for horizontal bars, and optionally open for floating bar definitions.

#Title & Caption

Add ChartTitle to display a title above the chart and ChartCaption for a descriptive line beneath it. Adding both reduces the available chart area.

For full configuration see Title & Caption.

#Hover

ChartHover brightens the hovered bar while the rest stay at normal opacity. Category snapping keeps the selected category obvious when the chart is dense.

For full configuration see Hover.

#Tooltip

Add ChartTooltip to show data details on hover. Shared tooltips are useful when grouped bars compare values at the same category.

For full configuration see Tooltip.

#Legend

Add ChartLegend to display an interactive legend. Use a legend when grouped, stacked, overlap, or percent-stacked bars need series toggles.

For full configuration see Legend.

#Axes

Use label on ChartXAxis and ChartYAxis to add axis titles. Use a secondary Y axis when mixed units would otherwise flatten one series. Reverse the value axis for depth, ranking, or scorecards where the visual direction has domain meaning.

For full configuration see Axes.

#Data Labels

Add ChartDataLabels to display values on each bar. Label bars when the exact value is the point of the chart. Dense rankings and stacked segments usually read better with tooltip access.

For full configuration see Data Labels.

#Zoom & Navigator

Add ChartZoom and ChartNavigator to control a category window when the chart has more bars than can be read at once.

For full configuration see Zoom & Pan and Navigator.

#Annotation

Use ChartAnnotation to render custom content overlaid on the chart area. Use for targets, capacity limits, and callouts tied to category groups or value thresholds.

For full configuration see Annotation.

#Reference Lines & Bands

Add ChartReferenceLine for threshold and divider lines. Add ChartReferenceBand to highlight value ranges such as targets, capacity limits, or threshold zones.

For full configuration see Reference Lines & Bands.

#Animation

Pass the chart-root animation prop to control entrance and update transitions. Bars create one mark per category, so large category sets often benefit from Canvas rendering.

For full configuration see Animation.

#Export

Add ChartExportMenu to let users download the chart as PNG, SVG, or PDF.

See Export for format options and programmatic export.

#Responsive

See Responsive for container sizing, aspect ratio, and breakpoint configuration.

#Accessibility

See Accessibility for ARIA labels, keyboard navigation, and screen reader support.

#API

#ChartBar

Visual styling props with type accessor → R accept a static value, a per-item array, a field name (keyof T), or a callback (ctx: ItemContext<T>) => R | undefined. Color-family arrays cycle modulo length; other accessor arrays clip and fall back to the series default.

#ItemContext

Passed to every accessor → R callback. Return undefined to fall back to the series-level default for that item.

#BarShapeInfo

#ChartStacked

Wrap ChartBar children inside ChartStacked to stack bars. Without this wrapper, multiple ChartBar components render as grouped side-by-side bars.

#ChartWaterfall

Wrap ChartBar inside ChartWaterfall to create a waterfall chart. Composable with ChartStacked for stacked waterfall charts.

#ChartOverlap

Wrap multiple ChartBar components inside ChartOverlap to layer them at the same category position. No configuration required. Render order determines depth: first child renders widest (background), last child renders narrowest (foreground).

#ChartItem

Use ChartItem as children of ChartBar instead of a data array for inline bar definitions.

#Related Docs

• Grouped Examples
• Stacked Examples
• Waterfall Examples
• Legend
• Tooltip
• Hover
• Data Labels
• Annotation
• Zoom & Pan
• Navigator
• Reference Lines & Bands
• Animation
• Axes