Radar Chart HTML CSS JS — SVG Spider Chart

<div class="app">
  <div class="card">
    <div class="card-header">
      <h3>Player Comparison</h3>
      <div class="legend">
        <span class="legend-item"><span class="swatch" style="background:#4a90d9"></span>Player A</span>
        <span class="legend-item"><span class="swatch" style="background:#f5a623"></span>Player B</span>
      </div>
    </div>
    <div class="chart-wrap">
      <svg id="radar" viewBox="0 0 440 400" xmlns="http://www.w3.org/2000/svg"></svg>
    </div>
    <p class="hint">Drag dots to adjust values</p>
  </div>
</div>

* { margin: 0; padding: 0; box-sizing: border-box; }
body { background: #1a1a2e; color: #e0e0e0; font-family: system-ui, sans-serif; min-height: 100vh; display: flex; align-items: center; justify-content: center; }
.app { padding: 20px; }
.card {
  background: #16213e; border: 1px solid #0f3460; border-radius: 16px;
  padding: 24px; max-width: 500px; width: 100%;
  box-shadow: 0 20px 60px rgba(0,0,0,0.4);
}
.card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; flex-wrap: wrap; gap: 10px; }
h3 { font-size: 17px; color: #e0e0ff; font-weight: 600; }
.legend { display: flex; gap: 16px; }
.legend-item { display: flex; align-items: center; gap: 6px; font-size: 13px; color: #a0a0c0; }
.swatch { width: 12px; height: 12px; border-radius: 3px; flex-shrink: 0; }
.chart-wrap { overflow: hidden; }
#radar { width: 100%; display: block; }
.hint { text-align: center; font-size: 12px; color: #404060; margin-top: 10px; }

const svg = document.getElementById('radar');
const NS = 'http://www.w3.org/2000/svg';
const CX = 220, CY = 200, RADIUS = 150;
const AXES = ['Speed','Power','Defense','Stamina','Agility','Technique'];
const N = AXES.length;
const RINGS = [20,40,60,80,100];

let dataA = [85, 70, 60, 90, 75, 80];
let dataB = [60, 88, 82, 65, 70, 55];

function angle(i) { return (i / N) * 2 * Math.PI - Math.PI/2; }

function pt(val, i) {
  const a = angle(i);
  const r = (val / 100) * RADIUS;
  return { x: CX + r * Math.cos(a), y: CY + r * Math.sin(a) };
}

function tipPt(i) {
  const a = angle(i);
  return { x: CX + RADIUS * Math.cos(a), y: CY + RADIUS * Math.sin(a) };
}

function el(tag, attrs) {
  const e = document.createElementNS(NS, tag);
  Object.entries(attrs).forEach(([k,v]) => e.setAttribute(k, v));
  return e;
}

function polyPoints(data) {
  return data.map((v,i) => { const p = pt(v,i); return `${p.x},${p.y}`; }).join(' ');
}

function hexPts(pct) {
  return AXES.map((_,i) => {
    const a = angle(i);
    const r = (pct/100) * RADIUS;
    return `${CX + r*Math.cos(a)},${CY + r*Math.sin(a)}`;
  }).join(' ');
}

let dragging = null; // { dataset, idx }
let polyA, polyB, dotsA = [], dotsB = [], labelsA = [], labelsB = [];

function build() {
  svg.innerHTML = '';

  // Rings
  RINGS.forEach(pct => {
    const p = el('polygon', {
      points: hexPts(pct),
      fill: 'none',
      stroke: '#1e2d50',
      'stroke-width': '1',
    });
    svg.appendChild(p);
  });

  // Ring labels (on rightmost axis)
  RINGS.forEach(pct => {
    const a = angle(1);
    const r = (pct/100)*RADIUS;
    const t = el('text', {
      x: CX + r*Math.cos(a) + 4,
      y: CY + r*Math.sin(a) + 4,
      fill: '#404060',
      'font-size': '10',
      'text-anchor': 'start',
    });
    t.textContent = pct;
    svg.appendChild(t);
  });

  // Axis lines
  AXES.forEach((_, i) => {
    const tip = tipPt(i);
    svg.appendChild(el('line', {
      x1: CX, y1: CY, x2: tip.x, y2: tip.y,
      stroke: '#1e2d50', 'stroke-width': '1.5',
    }));
  });

  // Axis labels
  AXES.forEach((label, i) => {
    const a = angle(i);
    const r = RADIUS + 22;
    const x = CX + r * Math.cos(a);
    const y = CY + r * Math.sin(a);
    const t = el('text', {
      x, y,
      fill: '#808090',
      'font-size': '12',
      'text-anchor': 'middle',
      'dominant-baseline': 'middle',
    });
    t.textContent = label;
    svg.appendChild(t);
  });

  // Dataset A polygon
  polyA = el('polygon', {
    points: polyPoints(dataA),
    fill: 'rgba(74,144,217,0.15)',
    stroke: '#4a90d9',
    'stroke-width': '2',
    'stroke-linejoin': 'round',
  });
  svg.appendChild(polyA);

  // Dataset B polygon
  polyB = el('polygon', {
    points: polyPoints(dataB),
    fill: 'rgba(245,166,35,0.15)',
    stroke: '#f5a623',
    'stroke-width': '2',
    'stroke-linejoin': 'round',
  });
  svg.appendChild(polyB);

  // Animate polygons
  [polyA, polyB].forEach(poly => {
    const len = poly.getTotalLength ? poly.getTotalLength() : 800;
    poly.style.strokeDasharray = len;
    poly.style.strokeDashoffset = len;
    poly.style.transition = 'stroke-dashoffset 0.8s ease';
    requestAnimationFrame(() => { poly.style.strokeDashoffset = '0'; });
  });

  // Dots A
  dotsA = dataA.map((v, i) => {
    const p = pt(v, i);
    const d = el('circle', {
      cx: p.x, cy: p.y, r: '7',
      fill: '#4a90d9', stroke: '#fff', 'stroke-width': '1.5',
      cursor: 'grab',
    });
    d.addEventListener('mousedown', e => { e.preventDefault(); dragging = { ds: 'A', idx: i }; });
    d.addEventListener('touchstart', e => { e.preventDefault(); dragging = { ds: 'A', idx: i }; }, { passive: false });
    svg.appendChild(d);
    return d;
  });

  // Dots B
  dotsB = dataB.map((v, i) => {
    const p = pt(v, i);
    const d = el('circle', {
      cx: p.x, cy: p.y, r: '7',
      fill: '#f5a623', stroke: '#fff', 'stroke-width': '1.5',
      cursor: 'grab',
    });
    d.addEventListener('mousedown', e => { e.preventDefault(); dragging = { ds: 'B', idx: i }; });
    d.addEventListener('touchstart', e => { e.preventDefault(); dragging = { ds: 'B', idx: i }; }, { passive: false });
    svg.appendChild(d);
    return d;
  });

  // Value labels A
  labelsA = dataA.map((v, i) => {
    const p = pt(v, i);
    const a = angle(i);
    const off = 14;
    const t = el('text', {
      x: p.x + off*Math.cos(a), y: p.y + off*Math.sin(a),
      fill: '#4a90d9', 'font-size': '11', 'text-anchor': 'middle', 'dominant-baseline': 'middle',
    });
    t.textContent = v;
    svg.appendChild(t);
    return t;
  });

  // Value labels B
  labelsB = dataB.map((v, i) => {
    const p = pt(v, i);
    const a = angle(i);
    const off = -14;
    const t = el('text', {
      x: p.x + off*Math.cos(a), y: p.y + off*Math.sin(a),
      fill: '#f5a623', 'font-size': '11', 'text-anchor': 'middle', 'dominant-baseline': 'middle',
    });
    t.textContent = v;
    svg.appendChild(t);
    return t;
  });
}

function updateFromDrag(clientX, clientY) {
  if (!dragging) return;
  const rect = svg.getBoundingClientRect();
  const scaleX = 440 / rect.width;
  const scaleY = 400 / rect.height;
  const mx = (clientX - rect.left) * scaleX;
  const my = (clientY - rect.top) * scaleY;
  const dx = mx - CX, dy = my - CY;
  const dist = Math.sqrt(dx*dx + dy*dy);
  const val = Math.max(5, Math.min(100, Math.round((dist / RADIUS) * 100)));
  const { ds, idx } = dragging;
  if (ds === 'A') {
    dataA[idx] = val;
    const p = pt(val, idx);
    dotsA[idx].setAttribute('cx', p.x);
    dotsA[idx].setAttribute('cy', p.y);
    labelsA[idx].setAttribute('x', p.x + 14*Math.cos(angle(idx)));
    labelsA[idx].setAttribute('y', p.y + 14*Math.sin(angle(idx)));
    labelsA[idx].textContent = val;
    polyA.setAttribute('points', polyPoints(dataA));
  } else {
    dataB[idx] = val;
    const p = pt(val, idx);
    dotsB[idx].setAttribute('cx', p.x);
    dotsB[idx].setAttribute('cy', p.y);
    labelsB[idx].setAttribute('x', p.x - 14*Math.cos(angle(idx)));
    labelsB[idx].setAttribute('y', p.y - 14*Math.sin(angle(idx)));
    labelsB[idx].textContent = val;
    polyB.setAttribute('points', polyPoints(dataB));
  }
}

window.addEventListener('mousemove', e => updateFromDrag(e.clientX, e.clientY));
window.addEventListener('mouseup', () => { dragging = null; });
window.addEventListener('touchmove', e => {
  if (dragging) { e.preventDefault(); updateFromDrag(e.touches[0].clientX, e.touches[0].clientY); }
}, { passive: false });
window.addEventListener('touchend', () => { dragging = null; });

build();