import * as React from "react"

import { cn } from "@/lib/utils"

type BarChartDatum = {
  label: string
  value: number
}

interface BarChartProps extends React.HTMLAttributes<HTMLDivElement> {
  data: BarChartDatum[]
  height?: number
  maxValue?: number
  showValues?: boolean
  barClassName?: string
}

function BarChart({
  data,
  height = 160,
  maxValue,
  showValues = true,
  barClassName,
  className,
  ...props
}: BarChartProps) {
  const safeMax = maxValue ?? Math.max(1, ...data.map((item) => item.value))

  return (
    <div
      className={cn("rounded-2xl border border-border bg-card p-4", className)}
      {...props}
    >
      <div className="flex items-end gap-4" style={{ height }}>
        {data.map((item) => {
          const heightPercent = Math.min(
            100,
            Math.max(0, (item.value / safeMax) * 100)
          )

          return (
            <div key={item.label} className="flex flex-1 flex-col items-center gap-2">
              <div className="flex h-full w-full items-end rounded-xl bg-muted px-2 pb-2">
                <div
                  className={cn("w-full rounded-lg bg-primary", barClassName)}
                  style={{ height: `${heightPercent}%` }}
                />
              </div>
              <span className="text-xs text-muted-foreground">{item.label}</span>
              {showValues ? (
                <span className="text-xs font-semibold text-foreground tabular-nums">
                  {item.value}
                </span>
              ) : null}
            </div>
          )
        })}
      </div>
    </div>
  )
}

export { BarChart }
export type { BarChartProps, BarChartDatum }
Bar Chart

Dependencies

Files

Installation
