EEnterUI
DocsComponentsThemesDonation
Get Started
      • BarChart
      • DonutChart
      • Legend
EnterUIDocsData AnalyticsMetrics and ChartsChart PrimitivesBarChart
Data AnalyticsUpdated 6 May 2026

BarChart

Compact SVG bar chart for ordered numeric series, deployments per day, and dashboard tiles.

BarChart renders a compact 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

Deployments per day

One bar per data point; an optional baseline axis appears at the bottom.

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

#Import

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

#Accessibility

Provide an aria-label or label so screen readers announce the chart. Without one, the SVG is marked aria-hidden.

#API

  • data: array of { value, label? } entries.
  • height: pixel height (default 80).
  • color: optional CSS colour for bars (default uses brand green token).
  • showAxis: toggle the baseline axis (default true).

#Styling

Every exported component accepts className when it renders an element. EnterUI styles use .eui-* classes and --eui-* variables mapped from FroggDesign theme tokens.

PreviousComparisonMetric
NextDonutChart

On this page

  1. Default usage
  2. Import
  3. Accessibility
  4. API
  5. Styling