Bar Chart

pnpm dlx shadcn@latest add https://ui.vllnt.com/r/bar-chart.json

import * as React from 'react'

import { cn } from '../../lib/utils'

type Datum = {
  label?: string
  value: number
}

export type BarChartProps = {
  color?: string
  data: Datum[]
  gap?: number
  gradientId?: string
  height?: number
  width?: number
} & React.HTMLAttributes<HTMLDivElement>

const DEFAULT_WIDTH = 320
const DEFAULT_HEIGHT = 140
const DEFAULT_GAP = 12

export const BarChart = React.forwardRef<HTMLDivElement, BarChartProps>(
  (
    {
      className,
      color = 'currentColor',
      data,
      gap = DEFAULT_GAP,
      gradientId = 'bar-chart-gradient',
      height = DEFAULT_HEIGHT,
      width = DEFAULT_WIDTH,
      ...props
    },
    reference,
  ) => {
    if (data.length === 0) {
      return null
    }

    const values = data.map((point) => point.value)
    const maxValue = Math.max(...values, 0)
    const normalizedMax = maxValue || 1
    const totalGap = gap * Math.max(data.length - 1, 0)
    const barWidth = Math.max((width - totalGap) / data.length, 6)

    return (
      <div
        className={cn('rounded-lg border border-border bg-background/40 p-3', className)}
        ref={reference}
        {...props}
      >
        <svg
          aria-label="Bar chart"
          className="h-full w-full"
          height={height}
          role="img"
          viewBox={`0 0 ${width} ${height}`}
          width={width}
        >
          <defs>
            <linearGradient id={gradientId} x1="0" x2="0" y1="0" y2="1">
              <stop offset="0%" stopColor={color} stopOpacity="0.9" />
              <stop offset="100%" stopColor={color} stopOpacity="0.4" />
            </linearGradient>
          </defs>
          {data.map((point, index) => {
            const barHeight = (point.value / normalizedMax) * (height - 12)
            const x = index * (barWidth + gap)
            const y = height - barHeight
            return (
              <rect
                fill={`url(#${gradientId})`}
                height={barHeight}
                key={`${point.label ?? index}-${point.value}`}
                rx={4}
                width={barWidth}
                x={x}
                y={y}
              >
                <title>
                  {point.label ? `${point.label}: ` : ''}
                  {point.value.toLocaleString()}
                </title>
              </rect>
            )
          })}
        </svg>
      </div>
    )
  },
)

BarChart.displayName = 'BarChart'