BarChart

"use client"

import { BarChart } from "@/registry/warren/bar-chart/bar-chart"
import { BENCHMARK_DELTAS } from "@/apps/docs/demo/data"

export default function BarChartDemo() {
  return <BarChart data={BENCHMARK_DELTAS} />
}

Installation

npx shadcn@latest add https://warren.eduard3v.com/r/bar-chart.json

Usage

import { BarChart } from "@/components/ui/bar-chart"

<BarChart data={BENCHMARK_DELTAS} />

Horizontal

Signed values center the baseline on the track: positive rows extend right, negative rows extend left, and the tip label takes the row's text-grade tone. Square-edged flat bars, hard cut; the value format prefixes positives with + (+10.4, -7.5).

Vertical

Square SVG columns rise from a hairline baseline; marker bars cap the tip with a 4×4 square in the same fill — the router-load "active expert" marker. The fixture shows 24 groups with exactly 8 active; inactive groups render muted.

"use client"

import { BarChart } from "@/registry/warren/bar-chart/bar-chart"
import { routerLoad } from "@/apps/docs/demo/data"

export default function BarChartVertical() {
  return (
    <BarChart
      data={routerLoad(0)}
      orientation="vertical"
      height={150}
      max={10}
      showValues={false}
      showTooltips
    />
  )
}

scale()

The exported scale(data, max?) helper returns the chart's maximum bar magnitude. Pass max to pin the scale to a fixed value (e.g. 100 to show a bar as half full); otherwise it falls back to the largest absolute value in the data, with a floor of 1. Every bar is drawn as abs(value) / scale of the track, so changing the scale rescales the whole chart. It is a pure function — unit-test it directly.

API Reference

BarDatum