BarChart

barchart-1779393693157.tsx

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

const DATA = [
  { label: 'Mon', value: 65 },
  { label: 'Tue', value: 82 },
  { label: 'Wed', value: 45 },
  { label: 'Thu', value: 91 },
  { label: 'Fri', value: 78 },
  { label: 'Sat', value: 34 },
  { label: 'Sun', value: 56 },
]

export default function BarChart({ data = DATA, height = 200, color = '#6d28d9' }) {
  const [tooltip, setTooltip] = useState(null)
  const max = Math.max(...data.map(d => d.value))
  return (
    <div style={{ padding: '16px' }}>
      <div style={{ display: 'flex', alignItems: 'flex-end', gap: '8px', height: height + 'px' }}>
        {data.map((d, i) => (
          <div key={d.label} style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', height: '100%', justifyContent: 'flex-end' }}>
            {tooltip === i && (
              <div style={{
                background: '#1e1e2e', color: '#fff', padding: '4px 8px',
                borderRadius: '6px', fontSize: '12px', fontWeight: 700, marginBottom: '4px',
              }}>{d.value}</div>
            )}
            <div
              onMouseEnter={() => setTooltip(i)}
              onMouseLeave={() => setTooltip(null)}
              style={{
                width: '100%', borderRadius: '6px 6px 0 0',
                background: tooltip === i ? '#7c3aed' : color,
                height: (d.value / max * (height - 30)) + 'px',
                transition: 'all 0.3s cubic-bezier(0.4,0,0.2,1)',
                cursor: 'pointer',
              }}
            />
            <div style={{ marginTop: '6px', fontSize: '11px', color: '#94a3b8' }}>{d.label}</div>
          </div>
        ))}
      </div>
    </div>
  )
}

Component info

CategoryData Visualization

Frameworkreact

TierFREE

Copies0

About

Animated vertical bar chart with tooltips and axis labels

More from Data Visualization

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

interface Metric {
  label: string
  value: number
  max: number
  color: string
  unit: string
}

const metrics: Metric[] = [
  { label: 'CPU Usage', value: 72, max: 100, color: '#C9A84C', un

RadialProgress

Data Visualization

'use client';
import { useState, useEffect } from 'react';

export default function MetricGauge({ value = 73, max = 100, label = "Performance Score", unit = "%" }) {
  const [animated, setAnimated] = useState(0);

  useEffect(() => {
    const timer

MetricGauge

Data Visualization

'use client';
import { useState, useEffect } from 'react';

export default function SplitTestWidget() {
  const [animating, setAnimating] = useState(false);
  const tests = [
    { name: 'CTA Button Color', varA: { label: 'Blue', value: 3.2, users: 4

SplitTestWidget

Data Visualization

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

const SEGMENTS = [
  { label: 'Buttons', value: 12, color: '#C9A84C' },
  { label: 'Forms', value: 10, color: '#6366f1' },
  { label: 'Navigation', value: 8, color: '#22c55e' },
  { label: 'Dashboard', v

DonutChart

Data Visualization