PixelBarChart

Pure-SVG bar chart that renders one rect per data point (none for a value that is not finite), in vertical (default) or horizontal orientation, with crisp pixel edges or smoothed linear corners.

  • Tone-aware fills via retro-* token classes — matches the rest of the kit.
  • Three sizes (sm/md/lg) with sensible inner padding and gap math.
  • Vertical or horizontal orientation with auto-normalized [yMin..yMax] scale.
  • Optional inline value labels above (vertical) or after (horizontal) each bar.
  • Surface-aware: pixel uses crispEdges + square corners, linear smooths to rx=2.
Status
stable
Category
data
Since
v1.9.0

API

import { PixelBarChart } from '@pxlkit/ui-kit';
PropTypeDefaultDescription
data (required)PixelChartDataPoint[]—The series, one bar per point; one whose y is not finite leaves its slot empty.
tone'neutral' | 'green' | 'cyan' | 'gold' | 'red' | 'purple' | 'pink''cyan'Colour of the bars and their labels.
size'sm' | 'md' | 'lg''md'160×64, 280×120 or 420×180 px.
orientation'vertical' | 'horizontal''vertical'Bars growing up, or to the right.
showValuesbooleanfalseLabels each bar with its value.
surface'pixel' | 'linear'—Surface override; defaults to the nearest provider.
borderedbooleanfalseRender with surface-aware border + radius chrome. Defaults to false (no chrome).

Also takes the native attributes and event handlers of <svg> (SVGAttributes<SVGSVGElement>).

ref points to <svg>.

Accessibility

WCAG target: 2.1 AA

  • img

The SVG renders as role="img" with an auto-derived aria-label summarizing the series (kind, point count and min..max range of its finite values — a point whose y is NaN or ±Infinity is left out of the chart and of the summary, which reads "bar chart, no data" when no value is finite). Pass a custom aria-label for richer context. For full data accessibility, render a visually-hidden <table> sibling with sr-only that mirrors the data points — assistive tech then has a tabular fallback to read.

Usage

import { PixelBarChart } from '@pxlkit/ui-kit';

const sample = [
  { x: 'Mon', y: 12 },
  { x: 'Tue', y: 18 },
  { x: 'Wed', y: 9 },
  { x: 'Thu', y: 24 },
  { x: 'Fri', y: 16 },
  { x: 'Sat', y: 21 },
  { x: 'Sun', y: 14 },
];

export function Default() {
  return <PixelBarChart data={sample} />;
}

Examples

Default

import { PixelBarChart } from '@pxlkit/ui-kit';

const sample = [
  { x: 'Mon', y: 12 },
  { x: 'Tue', y: 18 },
  { x: 'Wed', y: 9 },
  { x: 'Thu', y: 24 },
  { x: 'Fri', y: 16 },
  { x: 'Sat', y: 21 },
  { x: 'Sun', y: 14 },
];

export function Default() {
  return <PixelBarChart data={sample} />;
}

Tones

import { PixelBarChart } from '@pxlkit/ui-kit';

const sample = [
  { x: 'Mon', y: 12 },
  { x: 'Tue', y: 18 },
  { x: 'Wed', y: 9 },
  { x: 'Thu', y: 24 },
  { x: 'Fri', y: 16 },
  { x: 'Sat', y: 21 },
  { x: 'Sun', y: 14 },
];

export function Tones() {
  return (
    <div className="flex flex-wrap items-end gap-4">
      <PixelBarChart data={sample} tone="cyan" />
      <PixelBarChart data={sample} tone="green" />
      <PixelBarChart data={sample} tone="gold" />
      <PixelBarChart data={sample} tone="red" />
      <PixelBarChart data={sample} tone="purple" />
      <PixelBarChart data={sample} tone="pink" />
    </div>
  );
}

Sizes

import { PixelBarChart } from '@pxlkit/ui-kit';

const sample = [
  { x: 'Mon', y: 12 },
  { x: 'Tue', y: 18 },
  { x: 'Wed', y: 9 },
  { x: 'Thu', y: 24 },
  { x: 'Fri', y: 16 },
  { x: 'Sat', y: 21 },
  { x: 'Sun', y: 14 },
];

export function Sizes() {
  return (
    <div className="flex flex-wrap items-end gap-4">
      <PixelBarChart data={sample} size="sm" tone="cyan" />
      <PixelBarChart data={sample} size="md" tone="cyan" />
      <PixelBarChart data={sample} size="lg" tone="cyan" />
    </div>
  );
}

Horizontal

import { PixelBarChart } from '@pxlkit/ui-kit';

const sample = [
  { x: 'Mon', y: 12 },
  { x: 'Tue', y: 18 },
  { x: 'Wed', y: 9 },
  { x: 'Thu', y: 24 },
  { x: 'Fri', y: 16 },
  { x: 'Sat', y: 21 },
  { x: 'Sun', y: 14 },
];

export function Horizontal() {
  return <PixelBarChart data={sample} orientation="horizontal" tone="green" />;
}

With Values

import { PixelBarChart } from '@pxlkit/ui-kit';

const sample = [
  { x: 'Mon', y: 12 },
  { x: 'Tue', y: 18 },
  { x: 'Wed', y: 9 },
  { x: 'Thu', y: 24 },
  { x: 'Fri', y: 16 },
  { x: 'Sat', y: 21 },
  { x: 'Sun', y: 14 },
];

export function WithValues() {
  return <PixelBarChart data={sample} tone="gold" showValues />;
}

Surfaces

import { PixelBarChart } from '@pxlkit/ui-kit';

const sample = [
  { x: 'Mon', y: 12 },
  { x: 'Tue', y: 18 },
  { x: 'Wed', y: 9 },
  { x: 'Thu', y: 24 },
  { x: 'Fri', y: 16 },
  { x: 'Sat', y: 21 },
  { x: 'Sun', y: 14 },
];

export function Surfaces() {
  return (
    <div className="flex flex-wrap items-end gap-4">
      <PixelBarChart data={sample} surface="pixel" tone="purple" />
      <PixelBarChart data={sample} surface="linear" tone="purple" />
    </div>
  );
}

Related