Bar Chart

Compare discrete categories by magnitude with one or more numeric series.

Use a bar chart when category totals or side-by-side comparisons are the story. Bind a shared Dataset via x_field and y_fields, or pass inline series and x_axis for standalone demos.

Comparing revenue, cost, or counts across quarters, regions, or product lines.
Grouped or stacked bars when multiple series share the same categories.
Horizontal bars when category labels are long — set orientation=ChartOrientation::Horizontal.

Bind a Dataset with x_field (category column) and y_fields (value columns), or pass inline series + band x_axis.
Set width and height for dashboard tiles; tune plot inset via margin when legends need room.
Enable legend and tooltip for interactive dashboards — see charts-legend and charts-tooltip previews for patterns.
Leave skip_animation unset to honor reduced-motion preferences; set it explicitly only when you need instant updates.
Wrap the chart in a native element with data-testid for E2E hooks.

Grouped quarterly bars

Compare revenue and cost per quarter with grouped bars. corner_radius softens bar ends; bar_label surfaces values without hover. Use this as the default dashboard starting point.

Dataset binding

Bind a processed Dataset from a DataTable with x_field and y_fields instead of inline arrays. Field keys must match orbital_data::FieldDef::key on your columns. For live table sync (filter/sort updates the chart), see the Dataset Integration preview (data-table-charts-integration) — this example uses static fixtures for charts-only binding.

Horizontal bars

Flip to horizontal layout when category labels are long. The band axis moves to the y-axis; set orientation=ChartOrientation::Horizontal on the chart root.