Charts & Data Visualization Components

Modern, responsive analytics components using pure HTML, CSS, and Vanilla JavaScript. No heavy frameworks.

Dashboard Stat Cards

Premium stat cards with mini sparklines.

Total Revenue
$45,231
+12.5% this month
Active Users
2,845
-2.4% this week 
<!-- Add charts.css for styles -->
<div class="stat-card-container">
  <div class="stat-item">
    <div class="chart-subtitle">Total Revenue</div>
    <div class="stat-value">$45,231</div>
    <div class="stat-change positive">
      <i class="fa-solid fa-arrow-trend-up"></i> +12.5%
    </div>
  </div>
</div>

Sunburst Chart

Radial hierarchy visualization.

Chord Diagram

Visualize data flow between groups.

Stream Graph

Flowing stacked trends over time.

Stacked Area Chart

Multi-series trend visualization with layered data flow.

User Growth

Organic vs Paid vs Referral

Parallel Coordinates

Multi-dimensional comparison.

Box Plot

Distribution and quartile analysis.

Violin Plot

Density distribution chart.

Gantt Chart

Project planning timeline.

Design
Development

Cohort Retention

User retention heatmap.

Forecast Chart

Predicted future growth.

Candlestick + Volume

Professional trading dashboard.

World Analytics Map

Traffic by country.

Waterfall Revenue Chart

Visualize gains and losses across a process.

+12k
-4k
+8k
16k

Treemap Analytics

Hierarchical performance visualization.

Marketing
Sales
Support
SEO

Polar Area Chart

Segment-based radial comparison.

Scatter Plot

Relationship between two variables.

Timeline Performance

Milestone-based growth tracking.

Q1
Q2
Q3
Q4

Radial Progress Group

Multiple KPI progress indicators.

82%
Sales
65%
Users

Sankey Flow Diagram

Visualize user movement between stages.

Speedometer Gauge

Half-circle KPI indicator.

72%

Network Relationship Graph

Visualize connections between nodes.

3D Isometric Bars

Modern dashboard-style visualization.

Multi-Ring KPI Tracker

Nested circular progress for multiple metrics.

KPIs

Multi Metric

Benchmark Comparison

Horizontal performance comparison across teams.

Team A
Team B
Team C

Calendar Heatmap

GitHub-style activity visualization.

Financial Candlestick Chart

Modern trading-style market activity chart.

BTC / USD

24 Hour Market Trend

Gradient Bar Chart

Stylized bar chart with gradient-filled bars for visual impact.

Performance Metrics

Quarterly comparison

Q1
Q2
Q3
Q4
<div class="bar-grid">
  <div class="bar-node bar-lg red">Q1</div>
  <div class="bar-node bar-md blue">Q2</div>
  <div class="bar-node bar-sm green">Q3</div>
  <div class="bar-node bar-lg orange">Q4</div>
</div>

Line Chart

Animated line chart for trend visualization.

<svg class="line-chart" viewBox="0 0 200 100">
  <polyline points="0,80 40,60 80,40 120,50 160,20 200,40" />
</svg>

Pie Chart

Segmented pie chart for distribution.

<div class="pie-chart"></div>

Donut Chart

Ring-style chart for proportional data.

<div class="donut-chart"></div>

Radar Chart

Polygon chart for multi-dimensional data.

<svg class="radar-chart" viewBox="0 0 200 200">
  <polygon points="100,20 180,60 160,160 40,160 20,60" />
</svg>

Progress Circle

Circular progress indicator.

<svg class="progress-circle" viewBox="0 0 100 100">
  <circle cx="50" cy="50" r="45" />
</svg>

Heatmap Grid

Color-coded grid for intensity visualization.

<svg class="progress-circle" viewBox="0 0 100 100">
  <circle cx="50" cy="50" r="45" />
</svg>

Stacked Bar Chart

Layered bars showing category breakdowns.

40%
30%
30%
<div class="stacked-bar">
  <div class="segment red" style="width:40%">40%</div>
  <div class="segment blue" style="width:30%">30%</div>
  <div class="segment green" style="width:30%">30%</div>
</div>

Polar Area Chart

Radial segments for proportional data.

<div class="polar-chart"></div>

Sparkline Chart

Minimal line chart for quick trends.

<svg class="sparkline" viewBox="0 0 200 50">
  <polyline points="0,40 40,30 80,20 120,25 160,10 200,20" />
</svg>

Funnel Chart

Step-down funnel for conversion stages.

Stage 1
Stage 2
Stage 3
<div class="funnel">
  <div class="funnel-step step1">Stage 1</div>
  <div class="funnel-step step2">Stage 2</div>
  <div class="funnel-step step3">Stage 3</div>
</div>

Timeline Chart

Sequential events displayed along a line.

Start
Milestone
Finish

Timeline Chart

Sequential events displayed along a line.

Start
Milestone
Finish

Responsive Bar Chart

Dynamic CSS bar chart with JS animation.

Weekly Traffic

Unique visitors over 7 days

<!-- CSS Bar Chart Container -->
<div class="chart-card">
  <h3 class="chart-title">Weekly Traffic</h3>
  <div class="bar-chart" id="bar-chart-bars"></div>
</div>
<!-- See charts.js for injection logic -->

Gradient Donut Chart

CSS Conic-gradient based donut chart.

Device Usage

100%
Total Visits
Mobile
Desktop
Tablet 
<div class="donut-container">
  <div class="donut-chart" style="background: conic-gradient(#8b5cf6 0% 45%, #06b6d4 45% 75%, #ec4899 75% 100%);">
    <div class="donut-hole">
      <div class="donut-total">100%</div>
    </div>
  </div>
</div>

Target Progress Metrics

Animated shimmer progress bars.

Monthly Goals

New Signups 80%
Revenue Target 65%
Customer Retention 92% 
<div class="progress-item">
  <div class="progress-info">
    <span>New Signups</span><span>80%</span>
  </div>
  <div class="progress-track">
    <div class="progress-fill" style="width: 80%; background: #06b6d4;"></div>
  </div>
</div>

SVG Line Activity Tracker

Interactive smooth SVG line graph.

Server Activity

<svg class="svg-line-chart" viewBox="0 0 400 120">
  <path class="svg-line" d="M0,80 Q50,40 100,60 T200,30 T300,70 T400,20"></path>
  <circle class="svg-point" cx="100" cy="60" r="4"></circle>
</svg>

Interactive Area Chart

Smooth SVG area chart with real-time mouse hover tracking.

12:00 PM 580 Users 
<div class="chart-card interactive-area-chart">
  <div class="area-tooltip">
    <span class="tooltip-time">12:00 PM</span>
    <span class="tooltip-val">580 Users</span>
  </div>
  <div class="marker-line"></div>
  <svg class="area-svg" viewBox="0 0 500 160">
    <path d="M0,160 L0,110 Q100,50 200,90 T400,30 L500,60 L500,160 Z" fill="url(#areaGrad)"></path>
    <path d="M0,110 Q100,50 200,90 T400,30 L500,60" fill="none" stroke="#06b6d4" stroke-width="3"></path>
  </svg>
</div>

Glassmorphism Pie Chart

Premium frosted glass conic-gradient pie layout with core overlay.

45% Chrome
Chrome Safari Firefox Edge 
<div class="chart-card glass-pie-card">
  <div class="pie-container">
    <div class="glass-pie" style="background: conic-gradient(#8b5cf6 0% 45%, #06b6d4 45% 75%, #ec4899 75% 90%, #f59e0b 90% 100%);"></div>
    <div class="glass-pie-center">
      <span>45%</span>
      <span>Chrome</span>
    </div>
  </div>
</div>

Animated Radar Chart

Concentric SVG pentagon axes with dynamic profile selector triggers.

ATK SPD DEF STM TEC 
<svg class="radar-svg" viewBox="0 0 200 200">
  <polygon points="100,10 185,72 153,171 47,171 15,72" class="radar-grid"></polygon>
  <polygon points="100,30 176,82 121,128 73,128 40,78" class="radar-active-poly"></polygon>
</svg>

Real-Time Analytics Graph

Smooth crawling streaming graph using progressive coordinate injection.

LIVE STREAMS 45.2 MB/s 
<div class="chart-card real-time-card">
  <span class="live-dot-tag"><span class="live-pulse"></span>LIVE</span>
  <svg viewBox="0 0 400 120">
    <path id="realtime-line-path" fill="none" stroke="#8b5cf6" stroke-width="3"></path>
  </svg>
</div>

Heatmap Activity Grid

Interactive calendar grid tracking 364 annual commit contribution details.

Activity Log (2026)
Less More
Hover over cells to see activity 
<div class="chart-card annual-heatmap-card">
  <div class="annual-grid" id="annual-grid"></div>
  <div class="heatmap-detail-card">Hover over cells to see activity</div>
</div>

Revenue Split Bars

Compact stacked share bars for channel mix and product splits.

Revenue by Channel

Last 30 days

Direct
42%
Paid
28%
Organic
18%
Referral
12% 
<div class="chart-card split-card">
  <div class="split-row">
    <span class="split-label">Direct</span>
    <div class="split-track"><div class="split-fill split-cyan" style="width: 42%"></div></div>
    <span class="split-value">42%</span>
  </div>
</div>

Circular KPI Gauge

Quick performance dial with a bright center readout.

Conversion Health

Pipeline score

78% On Track
Target100%
<div class="chart-card gauge-card">
  <div class="gauge-ring" style="background: conic-gradient(#10b981 0% 78%, rgba(255,255,255,0.08) 78% 100%);">
    <div class="gauge-center">
      <span class="gauge-value">78%</span>
      <span class="gauge-label">On Track</span>
    </div>
  </div>
</div>

Dual Trend Comparison

Side-by-side line comparison for current and previous period.

Sales Trend

This month vs last month

Current Previous 
<svg class="comparison-svg" viewBox="0 0 420 150">
  <path d="M0,110 Q60,70 105,82 T210,52 T315,64 T420,28" stroke="#06b6d4" stroke-width="4" fill="none"></path>
  <path d="M0,125 Q60,110 105,118 T210,96 T315,104 T420,80" stroke="#8b5cf6" stroke-width="4" fill="none" stroke-dasharray="8 8"></path>
</svg>

Funnel Conversion Flow

Clear step-down funnel for conversions and drop-off analysis.

Signup Funnel

Live conversion overview

Visits12.4K
Signups6.8K
Trials3.5K
Paid1.9K
<div class="funnel-stack">
  <div class="funnel-step step-1"><span>Visits</span><strong>12.4K</strong></div>
  <div class="funnel-step step-2"><span>Signups</span><strong>6.8K</strong></div>
</div>

Bubble Insight Matrix

Quick-glance bubble sizing for engagement, impact, and priority.

Engagement Matrix

Audience touchpoints

A
B
C
D
E
F
<div class="bubble-grid">
  <div class="bubble-node size-lg cyan">A</div>
  <div class="bubble-node size-md purple">B</div>
  <div class="bubble-node size-sm green">C</div>
</div>
Copied to clipboard!