<!-- GENERATED by scripts/build-llms.mjs from llms/charts.md — do not edit this file. -->

# `lr-bar-chart`

- **Import** `import '@aceshooting/lyra-ui/components/lr-bar-chart.js';` (stable tag alias; registers the tag)
- **Class** `LyraBarChart`, also available unregistered from `@aceshooting/lyra-ui/components/charts/chart/bar-chart.class.js`
- **Family** `components/charts/` — see `llms/index.md` for its siblings
- **Status** `stable` since `4.0.0` — see the maturity and deprecation policy in `llms/shared.md`
- **Release history** [CHANGELOG.md](../../CHANGELOG.md); family-wide breaking-change summaries: [llms-full.txt](../../llms-full.txt)
- **Deprecations** none
- **Optional peers** `chart.js`, `chartjs-plugin-annotation`, `chartjs-plugin-datalabels`, `chartjs-plugin-zoom` — see `llms/peers.md`
- **Themeable via** 16 parts, 37 custom properties — see this component's own `@csspart`/`@cssprop` list below
- **Documented with** `lr-line-chart`, `lr-pie-chart`, `lr-doughnut-chart`, `lr-radar-chart`, `lr-polar-area-chart`, `lr-bubble-chart`, `lr-scatter-chart` (same section below)
- **Library-wide behavior** (events, form association, `locale`/`strings`, tokens, TS types): `llms/shared.md`

---

## Typed subclasses: `lr-line-chart`, `lr-bar-chart`, `lr-pie-chart`, `lr-doughnut-chart`, `lr-radar-chart`, `lr-polar-area-chart`, `lr-bubble-chart`, `lr-scatter-chart`

Each is `LyraChart` with a named default `type` — respectively `line`, `bar`, `pie`, `doughnut`,
`radar`, `polarArea`, `bubble`, `scatter`. In parity with the mirrored tags, `type` remains writable
and accepts the full `LyraChartType` vocabulary; the tag name is a convenient default, not a lock.

Everything else is inherited verbatim from `lr-chart`; each name below has the same type, default,
and behavior there. **See `llms/components/lr-chart.md` for the details, code example, and gotchas
of every entry in these lists.**

**Properties:** `description`, `grid`, `axes`, `compact`, `indexAxis` (`index-axis`), `label`, `hiddenDatasets`, `legendPosition`
(`legend-position`), `hiddenDatums`, `legendMode` (`legend-mode`), `legendDisplay` (`legend-display`),
`max`, `min`, `plugins`, `scaleType` (`scale-type`), `annotations`,
`stacked`, `stackedAxes`, `withoutAnimation` (`without-animation`),
`withoutLegend` (`without-legend`), `withoutTooltip` (`without-tooltip`), `xLabel` (`x-label`),
`yLabel` (`y-label`), plus additive `labels`, `datasets`, `valueFormatter`, `formatter`,
`tooltipTitleFormatter`, `tooltipFooterFormatter`, `area`, `zoom`,
`height`, `y2Label` (`y2-label`), `beginAtZero` (`begin-at-zero`), `dataLabels`
(`data-labels`), `stackTotals` (`stack-totals`), `config`, `showDataTable`
(`show-data-table`), `dataTableToggle` (`data-table-toggle`), `chartArea` (readonly), and `chart`.
`type` differs only in its initial value.

**Methods:** `appendData(label, values, maxPoints?)`, `exportData('csv' | 'png')`, `renderChart()`, `resetZoom()`,
`refreshTheme()`.

**Events:** `lr-zoom` (`detail: { zoomed: boolean }`), `lr-datum-activate`, `lr-point-click` (`detail: { datasetIndex,
index, label, value }`), `lr-before-legend-visibility-change` (cancelable), and
`lr-legend-visibility-change` (commit; both legend events carry `datasetIndex`, `visible`, and the
complete `hiddenDatasets` snapshot).
Radial category legends additionally emit `lr-before-datum-visibility-change` (cancelable) and
`lr-datum-visibility-change`, carrying `index`, `visible` and the frozen `hiddenDatums` snapshot.

**Slots:** default JSON configuration script, `data-table`, `center`.

**CSS parts:** `base`, `plot`, `canvas`, `legend`, `legend-item`, `legend-item-hidden`, `legend-swatch`,
`reset-zoom-button`, `description`, `notices`, `data-table`, `data-table-toggle`, `data-truncation`, `feature-warning`, `center`, `error` (neutral visible message
rendered in place of `canvas` when the optional `chart.js` peer dependency fails to load; the
failure transition is announced through the shared document-level light-DOM assertive sink — see
`llms/components/lr-chart.md`).

**Themeable custom properties:** `--lr-chart-height`, `--lr-chart-grid-color`,
`--lr-chart-tick-color`, `--lr-chart-tick-font-size`, `--lr-chart-legend-color`, `--lr-chart-tooltip-bg`,
`--lr-chart-tooltip-text`, `--lr-chart-legend-item-hover-bg`,
`--lr-chart-legend-item-active-bg`, `--lr-chart-data-table-button-hover-bg`,
`--lr-chart-data-table-button-active-bg`, `--lr-chart-data-table-toggle-hover-bg`,
`--lr-chart-data-table-toggle-active-bg`, `--lr-chart-reset-zoom-button-hover-bg`,
`--lr-chart-reset-zoom-button-active-bg`, `--lr-chart-canvas-hover-outline-width`, and
`--lr-chart-canvas-hover-outline-color`, `--lr-chart-pattern-step`, plus `--lr-chart-legend-side-max` — all inherited from `LyraChart`, identical in meaning and default (see
`lr-chart` above); each of the eight variants below reads the same set, so one rule retunes them
together. The mirrored hooks are `--border-color-1`,
`--border-color-2`, `--border-color-3`, `--border-color-4`, `--border-color-5`,
`--border-color-6`, `--fill-color-1`, `--fill-color-2`, `--fill-color-3`, `--fill-color-4`,
`--fill-color-5`, `--fill-color-6`, `--border-radius`, `--border-width`, `--grid-border-width`,
`--grid-color`, `--line-border-width`, and `--point-radius`, also identical to the core chart.

**Optional peer deps:** same as `lr-chart` — `chart.js`, plus `chartjs-plugin-zoom` only once
`zoom` is set, `chartjs-plugin-datalabels` only once `data-labels`/`stack-totals` is set, and
`chartjs-plugin-annotation` only once `annotations` contains a usable entry.

```html
<lr-bar-chart></lr-bar-chart>
<lr-pie-chart></lr-pie-chart>
<script>
  document.querySelector('lr-bar-chart').labels = ['A', 'B'];
  document.querySelector('lr-bar-chart').datasets = [{ label: 'Count', data: [4, 9] }];

  document.querySelector('lr-pie-chart').labels = ['A', 'B', 'C'];
  document.querySelector('lr-pie-chart').datasets = [{ label: 'Share', data: [30, 45, 25], color: ['#2563eb', '#16a34a', '#dc2626'] }];
</script>
```

**Known gotchas (in addition to the core `lr-chart` list in `llms/components/lr-chart.md`):**
- Changing `type` after construction may rebuild the underlying Chart.js instance; any active zoom
  state is reset and announced before the new type renders.
- `lr-bubble-chart` consumes the exported `LyraChartPoint` shape directly. Set `x`/`y`, optional `r`
  for bubble radius, and optional `label` for the point-level accessible/event/export label; no
  runtime cast is needed.

---