Bar Chart

Demo & usage

More examples

<sv-bar-chart
  [categories]="months"
  [datasets]="revenue"
  orientation="horizontal"
  title="Revenue by month"
  [height]="320" />

<sv-bar-chart
  [categories]="months"
  [datasets]="revenue"
  (barSelect)="drillDown($event)" />

When to use

• Comparing a value across discrete categories (revenue by month, sales by region).
• You want grouped or stacked series for category comparisons.
• For trends over a continuous axis, use the Line Chart.

Async states

• loading
• empty
• error
• retry

Outputs

<sv-bar-chart-pro>

Also in this family — SvBarChartProComponent from @styloviz-pro/charts.

Inputs

Outputs

<sv-cylindrical-column-chart>

Also in this family — SvCylindricalColumnChartComponent from @styloviz/charts.

Inputs

Outputs

<sv-cylindrical-column-chart-pro>

Also in this family — SvCylindricalColumnChartProComponent from @styloviz-pro/charts.

Inputs

Outputs

<sv-gradient-bar-chart>

Also in this family — SvGradientBarChartComponent from @styloviz/charts.

Inputs

Outputs

<sv-gradient-bar-chart-pro>

Also in this family — SvGradientBarChartProComponent from @styloviz-pro/charts.

Inputs

Outputs

<sv-column-drilldown-chart>

Also in this family — SvColumnDrilldownChartComponent from @styloviz/charts.

Inputs

Outputs

<sv-column-drilldown-chart-pro>

Also in this family — SvColumnDrilldownChartProComponent from @styloviz-pro/charts.

Inputs

Outputs

<sv-range-column-chart>

Also in this family — SvRangeColumnChartComponent from @styloviz/charts.

Inputs

Outputs

<sv-range-column-chart-pro>

Also in this family — SvRangeColumnChartProComponent from @styloviz-pro/charts.

Inputs

Outputs

<sv-range-bar-chart>

Also in this family — SvRangeBarChartComponent from @styloviz-pro/charts.

Inputs

Outputs

<sv-column-placement-chart>

Also in this family — SvColumnPlacementChartComponent from @styloviz-pro/charts.

Inputs

Outputs

<sv-negative-stack-chart>

Also in this family — SvNegativeStackChartComponent from @styloviz-pro/charts.

Inputs

Outputs

<sv-stacked-bar-chart>

Also in this family — SvStackedBarChartComponent from @styloviz-pro/charts.

Inputs

Outputs

<sv-stacked-bar-percent-chart>

Also in this family — SvStackedBarPercentChartComponent from @styloviz-pro/charts.

Inputs

Outputs

<sv-stacked-column-chart>

Also in this family — SvStackedColumnChartComponent from @styloviz-pro/charts.

Inputs

Outputs

<sv-stacked-column-percent-chart>

Also in this family — SvStackedColumnPercentChartComponent from @styloviz-pro/charts.

Inputs

Outputs

Wire it to your API

This component is headless about transport: it renders what you give it and reports what the user asks for. Nothing below requires @styloviz/data — drive it from whatever you already use.

<sv-bar-chart
  [categories]="data.items()"
  [loading]="data.loading()"
  [error]="data.error()"
  [filtered]="data.filtered()"
  (retry)="data.reload()"
/>

// This component reports its state but does not emit a query, so drive
// it from your own fetch and bind the three async inputs.
readonly items = signal<Row[]>([]);
readonly loading = signal(false);
readonly error = signal<SvDataError | null>(null);

async load(): Promise<void> {
  this.loading.set(true);
  this.error.set(null);
  try {
    this.items.set(await this.api.fetchRows());
  } catch (e) {
    this.error.set(toSvDataError(e));
  } finally {
    this.loading.set(false);
  }
}

• This component does not emit a query, so it renders what you give it. Fetch on your own trigger and bind `categories`, `loading` and `error`.
• Set `filtered` when a search or filter is active. It is the difference between "you have no orders" and "no orders match this filter" — telling a customer with 4,000 orders the first one reads as a bug.
• Normalize failures with `toSvDataError()` from `@styloviz/core`. It derives `retryable` from the status, so a 404 does not get a "Try again" button that can only fail again.

Full walkthrough: Connecting to a backend.

Customization & theming

• Vertical or horizontal orientation.
• Grouped, stacked and 100%-stacked modes, with each category's absolute total drawn beside its bar on the normalised ones (`showCategoryTotals`, on by default).
• Animated entrance with configurable colors.
• Handle `barSelect` for drill-down or selection.
• `valuePolicy` decides what happens to a bar this chart cannot draw — a negative, `NaN` or `Infinity`. `clamp` (default) draws it as a marked 3px stub at the baseline; `reject` refuses the dataset and shows the error state. `omit` is not offered: a bar's position is its index within its group, so dropping one would slide every later bar out from under its own category label. The cylindrical, placement and drilldown columns take the same `clamp`/`reject` choice. The stacked and range variants default to `omit` instead — a segment or a range keeps its own slot, so leaving one out moves nothing else — and count what they left out under the plot. For data that genuinely goes below zero use `<sv-negative-stack-chart>`.

Best practices

• Do: Order categories meaningfully (by value or time), not arbitrarily.
• Do: Use horizontal orientation when category labels are long.
• Don't: Don't truncate the value axis baseline away from zero — it distorts comparisons.
• Do: Leave showCategoryTotals on for the 100 %-stacked variants. Normalising is what those charts are for and also the one thing they hide: every bar is drawn the same length, so two categories look identical when one is ten times the other. The total beside each bar is the only thing in the picture that says which — a tooltip does not count, because the reader who is misled here is precisely the one who thinks the bars are comparable and therefore never hovers.
• Don't: Do not compare two bars in a 100 % stack by eye and conclude anything about volume. Their lengths are equal by construction. Read the composition off the segments and the magnitude off the total.

Accessibility

• The SVG is a `role="group"` with an auto-generated data summary as its name (override via `ariaLabel`) — `group`, not `img`, because focusable bars inside an `img` are invisible to a screen reader, which prunes its subtree.
• A bar's height is its value, so `sv-data-summary-table` publishes the numbers beside it: one row per category, one column per series, captioned with the chart title. There is deliberately no overview line above it — the SVG's own name already states the series and the category count, and repeating it is the same sentence twice.
• Numeric value labels accompany bars; respects reduced-motion for animations.
• A clamped bar is disclosed three ways, because the stub alone is only visual: a sentence under the plot naming how many bars and their real values, "not drawn to scale" appended to the bar's own `aria-label`, and the same phrase in its table cell. The table keeps the REAL number — it is the data, not a transcript of the drawing.
• A blank source cell reads as "no value", not `NaN`. `Math.max(10, NaN)` is `NaN`, so one blank used to take the axis, every bar height and every grid tick with it — and SVG drops a `NaN` dimension silently, blanking the plot with no error anywhere.
• On a 100 %-stacked chart the absolute total is drawn beside every bar, so the magnitude that normalising removes is present as text rather than only in a tooltip. A negative contribution is excluded from the total exactly as it is from the segments, so the caption always equals the sum of what is actually drawn.
• The Gradient Bar variant publishes the same table. Its bars are not focusable, so a per-bar `aria-label` had nothing to attach to and the SVG's name says only how many series there are — every number on it reached the page as a gradient length and nothing else.