GaugeChart

gaugechart-1779394345207.tsx

'use client'
export default function GaugeChart({ value = 72, min = 0, max = 100, label = 'Performance Score' }) {
  const pct = (value - min) / (max - min)
  const startAngle = -Math.PI * 0.75
  const endAngle = Math.PI * 0.75
  const angle = startAngle + pct * (endAngle - startAngle)
  const R = 80, cx = 100, cy = 100
  const toXY = (a) => ({ x: cx + R * Math.cos(a), y: cy + R * Math.sin(a) })
  const arcPath = (r, a1, a2) => {
    const s = toXY(a1), e = { x: cx + r * Math.cos(a2), y: cy + r * Math.sin(a2) }
    const large = a2 - a1 > Math.PI ? 1 : 0
    return 'M' + s.x + ',' + s.y + ' A' + r + ',' + r + ' 0 ' + large + ',1 ' + e.x + ',' + e.y
  }
  const color = pct < 0.33 ? '#ef4444' : pct < 0.66 ? '#f59e0b' : '#10b981'
  const needle = toXY(angle)
  return (
    <div style={{ textAlign:'center' }}>
      <svg width="200" height="130" style={{ overflow:'visible' }}>
        <path d={arcPath(R, startAngle, endAngle)} fill="none" stroke="#e2e8f0" strokeWidth="16" strokeLinecap="round"/>
        <path d={arcPath(R, startAngle, angle)} fill="none" stroke={color} strokeWidth="16" strokeLinecap="round"/>
        <line x1={cx} y1={cy} x2={needle.x} y2={needle.y} stroke="#1e293b" strokeWidth="2.5" strokeLinecap="round"/>
        <circle cx={cx} cy={cy} r="6" fill="#1e293b"/>
        <text x={cx} y={cy+20} textAnchor="middle" fontSize="24" fontWeight="800" fill="#1e293b">{value}</text>
      </svg>
      <div style={{ fontSize:'13px', fontWeight:600, color:'#64748b', marginTop:'4px' }}>{label}</div>
    </div>
  )
}

Component info

CategoryData Visualization

Frameworkreact

TierFREE

Copies0

About

SVG gauge chart for displaying single metric with color zones

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