AreaChart

areachart-1779394345163.tsx

'use client'
const S1 = [40,65,45,80,55,90,70,85,60,95,75,100]
const S2 = [20,35,25,50,35,60,45,55,40,65,50,70]
const MONTHS = ['J','F','M','A','M','J','J','A','S','O','N','D']

function series(data, max, W, H, PAD) {
  return data.map((v, i) => ({
    x: PAD + (i / (data.length-1)) * (W - PAD*2),
    y: H - PAD - (v/max) * (H-PAD*2),
  }))
}

export default function AreaChart({ s1 = S1, s2 = S2, labels = MONTHS }) {
  const W=400,H=180,PAD=25
  const max = Math.max(...s1,...s2)
  const pts1 = series(s1,max,W,H,PAD)
  const pts2 = series(s2,max,W,H,PAD)
  const toPath = (pts) => pts.map((p,i)=>(i===0?'M':'L')+p.x+','+p.y).join(' ')
  const toArea = (pts) => toPath(pts)+' L'+pts[pts.length-1].x+','+(H-PAD)+' L'+PAD+','+(H-PAD)+' Z'
  return (
    <svg width={W} height={H} style={{ overflow:'visible' }}>
      <defs>
        <linearGradient id="g1" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor="#6d28d9" stopOpacity="0.4"/>
          <stop offset="100%" stopColor="#6d28d9" stopOpacity="0"/>
        </linearGradient>
        <linearGradient id="g2" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor="#2563eb" stopOpacity="0.3"/>
          <stop offset="100%" stopColor="#2563eb" stopOpacity="0"/>
        </linearGradient>
      </defs>
      {[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"/>
      ))}
      <path d={toArea(pts1)} fill="url(#g1)"/>
      <path d={toArea(pts2)} fill="url(#g2)"/>
      <path d={toPath(pts1)} fill="none" stroke="#6d28d9" strokeWidth="2.5" strokeLinejoin="round"/>
      <path d={toPath(pts2)} fill="none" stroke="#2563eb" strokeWidth="2.5" strokeLinejoin="round"/>
      {pts1.map((p,i)=>(
        <text key={i} x={p.x} y={H-6} textAnchor="middle" fontSize="9" fill="#94a3b8">{labels[i]}</text>
      ))}
    </svg>
  )
}

Component info

CategoryData Visualization

Frameworkreact

TierFREE

Copies0

About

Multi-series area chart with gradient fill and legend

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