BAR CHART

CSS-only bar chart. No charting library dependency. Supports horizontal and vertical orientations with four color variants.

PREVIEW

SYSTEM LOAD

REACTOR

SHIELDS

ENGINES

COMMS

SENSORS

INSTALLATION

BASH

npx shadcn@latest add @scificn/bar-chart

USAGE

TSX

import { BarChart, type BarChartEntry } from '@/ui/bar-chart'

const data: BarChartEntry[] = [
  { label: 'ALPHA',   value: 87 },
  { label: 'BETA',    value: 45 },
  { label: 'GAMMA',   value: 72 },
]

// Horizontal (default)
<BarChart data={data} title="SIGNAL STRENGTH" variant="ACTIVE" />

// Vertical
<BarChart data={data} title="DAILY ACTIVITY" orientation="vertical" variant="WARNING" />

ORIENTATIONS

orientation="horizontal"

SYSTEM LOAD

REACTOR

SHIELDS

ENGINES

COMMS

SENSORS

orientation="vertical"

WEEKLY UPTIME

MON

TUE

WED

THU

FRI

SAT

SUN

VARIANTS

variant="ACTIVE"

REACTOR

SHIELDS

ENGINES

variant="WARNING"

REACTOR

SHIELDS

ENGINES

variant="CRITICAL"

REACTOR

SHIELDS

ENGINES

variant="DEFAULT"

REACTOR

SHIELDS

ENGINES

PROPS

PROP	TYPE	DEFAULT	DESCRIPTION
data	BarChartEntry[]	—	Array of { label, value } entries.
orientation	"horizontal" \| "vertical"	"horizontal"	Bar direction.
variant	DEFAULT \| ACTIVE \| WARNING \| CRITICAL	ACTIVE	Controls bar color and glow.
title	string	undefined	Optional header label.
showValues	boolean	true	Show value labels beside/above each bar.
max	number	max(data)	Override the scale maximum.
className	string	—	Additional classes merged via cn().