BarChart

barchart-1779378816999.tsx

'use client'
import { useState } from 'react'

const DATA = [
  { label: 'Jan', value: 4200 }, { label: 'Feb', value: 5800 }, { label: 'Mar', value: 3900 },
  { label: 'Apr', value: 7200 }, { label: 'May', value: 6100 }, { label: 'Jun', value: 8400 },
  { label: 'Jul', value: 9100 }, { label: 'Aug', value: 7600 }, { label: 'Sep', value: 5300 },
  { label: 'Oct', value: 8800 }, { label: 'Nov', value: 10200 }, { label: 'Dec', value: 11400 },
]

export default function BarChart() {
  const [hovered, setHovered] = useState<number | null>(null)
  const W = 520, H = 260, PL = 48, PR = 16, PT = 20, PB = 40
  const max = Math.max(...DATA.map(d => d.value)) * 1.1
  const chartW = W - PL - PR
  const chartH = H - PT - PB
  const barW = (chartW / DATA.length) * 0.6
  const barGap = chartW / DATA.length

  const grids = [0, 0.25, 0.5, 0.75, 1].map(p => ({ y: PT + chartH * (1 - p), val: Math.round(max * p) }))

  return (
    <div style={{ background: '#0D0D0D', padding: 24, borderRadius: 16, border: '1px solid rgba(255,255,255,0.06)' }}>
      <div style={{ color: '#F5F5F0', fontSize: 15, fontWeight: 600, marginBottom: 4 }}>Monthly Revenue</div>
      <div style={{ color: 'rgba(255,255,255,0.4)', fontSize: 12, marginBottom: 16 }}>FY 2024 — All amounts in USD</div>
      <svg width="100%" viewBox={`0 0 ${W} ${H}`} style={{ overflow: 'visible' }}>
        <defs>
          <linearGradient id="barGrad" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0%" stopColor="#C9A84C" stopOpacity="1" />
            <stop offset="100%" stopColor="#C9A84C" stopOpacity="0.3" />
          </linearGradient>
          <linearGradient id="barHov" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0%" stopColor="#f0c060" stopOpacity="1" />
            <stop offset="100%" stopColor="#f0c060" stopOpacity="0.4" />
          </linearGradient>
        </defs>

        {grids.map(g => (
          <g key={g.val}>
            <line x1={PL} y1={g.y} x2={W - PR} y2={g.y} stroke="rgba(255,255,255,0.06)" strokeWidth={1} />
            <text x={PL - 6} y={g.y + 4} textAnchor="end" fontSize={10} fill="rgba(255,255,255,0.3)">
              {g.val >= 1000 ? `${(g.val/1000).toFixed(0)}k` : g.val}
            </text>
          </g>
        ))}

        {DATA.map((d, i) => {
          const bh = (d.value / max) * chartH
          const x = PL + i * barGap + (barGap - barW) / 2
          const y = PT + chartH - bh
          const isHov = hovered === i
          return (
            <g key={i} onMouseEnter={() => setHovered(i)} onMouseLeave={() => setHovered(null)} style={{ cursor: 'pointer' }}>
              <rect x={x} y={y} width={barW} height={bh} fill={isHov ? 'url(#barHov)' : 'url(#barGrad)'} rx={4} style={{ transition: 'fill 0.15s' }} />
              <text x={x + barW / 2} y={H - PB + 16} textAnchor="middle" fontSize={10} fill="rgba(255,255,255,0.4)">{d.label}</text>
              {isHov && (
                <g>
                  <rect x={x + barW / 2 - 32} y={y - 32} width={64} height={24} fill="#1a1a1a" stroke="rgba(255,255,255,0.15)" rx={6} />
                  <text x={x + barW / 2} y={y - 14} textAnchor="middle" fontSize={11} fill="#F5F5F0" fontWeight="600">
                    ${(d.value / 1000).toFixed(1)}k
                  </text>
                </g>
              )}
            </g>
          )
        })}
      </svg>
    </div>
  )
}

Component info

CategoryCharts

Frameworkreact

TierFREE

Copies0

About

Animated SVG bar chart with hover tooltips, grid lines, and gradient fills

More from Charts

'use client'
import { useState, useRef } from 'react'

const DATASETS = {
  Users: [120, 185, 140, 210, 190, 280, 260, 340, 310, 420, 390, 510],
  Revenue: [3200, 4100, 3800, 5200, 4800, 6100, 5700, 7400, 6900, 8800, 8200, 10500],
}
const MONTHS = ['

LineChart

Charts