ChartBar

Bar charts: comparisons, horizontal rankings, stacked totals, category and value colors, negative values, and bar + line combos.

Introduction

ChartBar draws bars over a shared set of categories. Compose it with ChartBarSeries, ChartAxis, ChartLegend, and ChartTooltip, and add a ChartLineSeries to draw a line over the bars. Shared parts, colors, and accessibility are in Chart.

When to use: Comparing amounts between categories, rankings, stacked totals, and values that go below zero.

Compared to similar components:

• ChartLine — The trend matters more than each amount.
• ChartPie — A few parts of one whole. Prefer bars when there are many categories or exact comparisons matter.

Use the framework selector in the site header to switch between React and Vue.

Import

import { ChartBar } from "@bridge-ui/vue/Components/ChartBar";
import { ChartBarSeries } from "@bridge-ui/vue/Components/ChartBarSeries";
import { ChartLineSeries } from "@bridge-ui/vue/Components/ChartLineSeries";

import { ChartBar } from "@bridge-ui/react/Components/ChartBar";
import { ChartBarSeries } from "@bridge-ui/react/Components/ChartBarSeries";
import { ChartLineSeries } from "@bridge-ui/react/Components/ChartLineSeries";

Add ChartAxis, ChartLegend, and ChartTooltip from Chart.

Basic usage

Pass the category labels as categories and add a ChartBarSeries per data set.

Horizontal

orientation="horizontal" lists the categories top to bottom on the y axis. x stays the horizontal axis, so value formatting moves to ChartAxis position="x".

Stacked

Series with the same stack key stack. Only the outermost bar of each stack is rounded. With labels, inside labels that do not fit their segment are hidden.

Bar and line

A ChartLineSeries inside ChartBar draws a line over the bars on the same value axis, with the points centered on each category. Line options (dashed, showPoints, curve, area, reference) work as in ChartLine.

The ChartBar stack applies to bars only: a line stays on its own values (a target, an average) unless you give it a stack. ChartBar loads the ECharts line series too, so bar + line charts need no extra setup.

Category colors

categoryColors gives each category its own bar color. Every bar series in a category shares that color; tone="muted" tells a comparison series apart with a lighter shade of the same color.

categoryColors takes a record keyed by category label, an array in category order, or true to use the palette in category order. Categories without a color take the palette entry at their index.

With category colors the legend shows each series in a neutral color (muted series in a lighter shade), and the tooltip shows the bar colors. A ChartLineSeries inside keeps its own color.

tone="muted" also works without categoryColors: it lightens the series color, for example a previous period next to the current one. Muted shades mix toward the background behind the chart, so they follow light and dark mode.

Color by value

colorRanges recolors single bars by value. A value in [min, max) takes the range color; bars outside every range keep the series color. Range labels show in the tooltip, the data table, and the keyboard announcements.

With colorBy="category", min and max are category indices (both included) instead of values. Ranges win over categoryColors.

Negative values, labels, and reference lines

Bars round the end that points away from zero. labels draws the value of each bar, formatted by formatLabel. reference draws a dashed line for a statistic of the series (average, min, max) or a fixed value.

radius sets the corner radius on the value end (default 4); radius={0} draws square corners. Dates as categories place the bars on a time axis.

Keyboard and accessibility

Arrow keys move between categories. The root generates a summary with the series names and the category range. See Chart for the shared keyboard and accessibility behavior.

Related components

Chart, ChartLine, ChartPie, DataTable

API

ChartBar

Shared root props (height, palette, loading, summary, …) are listed in Chart.

ChartBarSeries

Unset options fall back to the ChartBar props. See ChartLine for ChartLineSeries.