LineChart

linechart-1779394345070.tsx

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

const DATA = [120,185,90,247,163,312,198,280,156,340,220,390]
const MONTHS = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec']

export default function LineChart({ data = DATA, labels = MONTHS, color = '#6d28d9' }) {
  const [tooltip, setTooltip] = useState(null)
  const W = 400, H = 200, PAD = 30
  const max = Math.max(...data)
  const pts = data.map((v, i) => ({
    x: PAD + (i / (data.length - 1)) * (W - PAD * 2),
    y: H - PAD - (v / max) * (H - PAD * 2),
    v, label: labels[i],
  }))
  const path = pts.map((p, i) => (i === 0 ? 'M' : 'L') + p.x + ',' + p.y).join(' ')
  const area = path + ' L' + pts[pts.length-1].x + ',' + (H-PAD) + ' L' + PAD + ',' + (H-PAD) + ' Z'
  return (
    <div style={{ position:'relative' }}>
      <svg width={W} height={H} style={{ overflow:'visible' }}>
        {[0.25,0.5,0.75,1].map(t => (
          <line key={t} x1={PAD} y1={H-PAD-(t*(H-PAD*2))} x2={W-PAD} y2={H-PAD-(t*(H-PAD*2))} stroke="#f1f5f9" strokeWidth="1" />
        ))}
        <defs>
          <linearGradient id="grad" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0%" stopColor={color} stopOpacity="0.3"/>
            <stop offset="100%" stopColor={color} stopOpacity="0"/>
          </linearGradient>
        </defs>
        <path d={area} fill="url(#grad)" />
        <path d={path} fill="none" stroke={color} strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" />
        {pts.map((p, i) => (
          <g key={i}>
            <circle cx={p.x} cy={p.y} r="5" fill={tooltip?.i===i ? color : '#fff'} stroke={color} strokeWidth="2"
              style={{ cursor:'pointer' }}
              onMouseEnter={() => setTooltip({ ...p, i })}
              onMouseLeave={() => setTooltip(null)}
            />
            <text x={p.x} y={H-8} textAnchor="middle" fontSize="10" fill="#94a3b8">{p.label}</text>
          </g>
        ))}
      </svg>
      {tooltip && (
        <div style={{
          position:'absolute', left:tooltip.x, top:tooltip.y-40, transform:'translateX(-50%)',
          background:'#1e1e2e', color:'#fff', padding:'6px 10px', borderRadius:'8px',
          fontSize:'12px', fontWeight:700, pointerEvents:'none', whiteSpace:'nowrap',
        }}>{tooltip.label}: {tooltip.v}</div>
      )}
    </div>
  )
}

Component info

CategoryData Visualization

Frameworkreact

TierFREE

Copies0

About

SVG line chart with grid, tooltips and animated path drawing

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