BarChart

BarChart renders a token-colored SVG bar series suitable for dashboard cards and inline data summaries. It does not depend on a chart engine and stays accessible through an explicit label.

#Default usage

<BarChart
  data={[
    { value: 4 },
    { value: 8 },
    { value: 6 },
    { value: 12 },
    { value: 9 },
    { value: 14 },
    { value: 11 },
  ]}
  label="Deployments per day"
/>

#Import

import { BarChart } from "@froggdesign/enter-ui-react";

#Accessibility

Provide an aria-label or label to name the chart group. Each bar exposes its category and value as a focusable button. Tab enters the bars; Left and Right Arrow move between adjacent values. Enter or Space reveals the focused value, and Escape dismisses the tooltip. Bar values remain exposed to assistive technology if the chart label is omitted; always supply a meaningful label in product screens.

#Scale and tooltips

The axis starts at zero and rounds the largest value up to a nearby readable bound: a largest value of 47 produces a maximum of 50. The plot uses the same bound as its labels, so bars remain inside the plot without excess empty space. BarChart displays nonnegative values; use LineChart or AreaChart for signed values. Non-finite values are treated as zero.

#API

• data: array of { value, label? } entries.
• label or aria-label: accessible name for the chart group.
• height: pixel height (default 80).
• color: optional CSS colour for bars (default uses the chart blue gradient).
• showAxis: toggle the baseline axis (default true).
• showGrid: toggle the dashed horizontal grid (default true).
• Data labels appear beneath the plot when entries provide label; bars reveal values on hover and keyboard focus.

#Styling

Use height, showAxis, and showGrid to compose the chart. EnterUI owns its plot, axis, focus, and tooltip styling through .eui-* classes and --eui-* theme tokens.

Tooltips show exact values. A single series does not display a percentage share.

#Repeated axis labels

Repeated labels, such as the same hour on consecutive days, retain one axis entry per sample without React key warnings. Label text is presentation, not sample identity. The chart keeps its existing keyboard controls and tooltips.

Dense category axes show at most six labels while retaining every sample and keyboard tooltip. Below 600px, intermediate labels are reduced further and the first and final labels stay visible.