Chart.js 4 Canvas · Lightweight · Animated

Chart.js — 54 Cards
~29 native renders + N/A overlays

Chart.js renders to HTML canvas. It excels at standard types (line, bar, pie, radar, scatter, bubble) with smooth animations. Charts not supported natively show an N/A overlay. All charts use the same CHART_DATA as the Plotly portfolio, re-themed via CSS custom properties.

54 Cards ~30 Renders 12 Themes Canvas API
Basic Charts
Line
Monthly Revenue Trends

12-month multi-series line chart

Multi-Line
Tech Stock Prices

3-year daily close prices for 4 tech stocks

Horizontal Bar
Sales by Region

Ranked horizontal bars by regional revenue

Grouped Bar
Top Product Rankings

Side-by-side quarterly bars per product

Stacked Bar (h)
Quarterly Performance

Stacked horizontal performance by division

Stacked Bar
Revenue by Channel

4-channel stacked revenue over 8 quarters

Pie
Market Share 2025

Industry-wide competitive market share breakdown

Doughnut
Budget Allocation

Annual operating budget distribution by function

Drilldown Bar
Sales Drilldown by Region

Click to drill into city-level breakdown; N/A in Chart.js

N/A – Chart.js Plugin or custom SVG required
Gantt
Project Roadmap

Q1–Q2 2025 product roadmap task bars

N/A – Chart.js Plugin or custom SVG required
Lollipop
Sales vs Target

Monthly actual sales dots and dashed target line

Statistical Charts
Scatter
Marketing Spend vs Revenue

Correlation analysis with size = deal count

Histogram
Transaction Distribution

Frequency distribution of transaction amounts

Box Plot
Scores by Department

Distribution, quartiles and outliers; N/A natively

N/A – Chart.js Plugin or custom SVG required
Violin
Age Distribution by Group

KDE-smoothed distribution; N/A natively

N/A – Chart.js Plugin or custom SVG required
Area
Website Traffic Trends

Monthly visitor volume with YoY overlay

Stacked Area
User Acquisition Channels

Channel-level contribution to total user growth

Dual Axis
Revenue vs Profit Margin

Bar (revenue) + line (margin) on independent Y-axes

Error Bars
Forecast Confidence Range

Quarterly forecast with confidence interval fill band

Histogram 2D
Spend vs Revenue Density

Bivariate density; N/A in Chart.js

N/A – Chart.js Plugin or custom SVG required
Density Contour
Spend vs Revenue Contour

Smooth iso-density curves; N/A in Chart.js

N/A – Chart.js Plugin or custom SVG required
SPLOM
Business Metrics Scatter Matrix

Pairwise scatter matrix; N/A in Chart.js

N/A – Chart.js Plugin or custom SVG required
ScatterGL
Large Dataset 2,000 Points

High-volume scatter (rendered as regular scatter)

Bump
Product Rank Journey

Weekly ranking changes across 5 products

Slope
Q1 vs Q4 Revenue

Regional revenue change between Q1 and Q4

Streamgraph
User Acquisition Mix

24-month stacked stream of acquisition channel share

Dumbbell
Salary Range by Dept

P25–P75 salary spread per department

Financial Charts
Candlestick
AAPL 30-Day OHLC

Floating bar approximation of candlestick bodies

Waterfall
P&L Bridge Analysis

Floating bars showing incremental P&L contribution

Funnel
Sales Pipeline Stages

Horizontal bar funnel approximation

Candlestick (MSFT)
MSFT Open-High-Low-Close

Floating bar body approximation

Funnel Area
Marketing Conversion Funnel

Horizontal bar funnel approximation

Hierarchical Charts
Treemap
Product Revenue Hierarchy

Nested area-proportional hierarchy; N/A natively

N/A – Chart.js Plugin or custom SVG required
Sunburst
Org Budget Hierarchy

Multi-level radial hierarchy; N/A natively

N/A – Chart.js Plugin or custom SVG required
Sankey
Revenue Flow Diagram

Flow diagram showing revenue paths; N/A natively

N/A – Chart.js Plugin or custom SVG required
Bubble
GDP vs Life Expectancy

Sized bubble chart by population

Icicle
Icicle Product Hierarchy

Top-down drilldown icicle; N/A natively

N/A – Chart.js Plugin or custom SVG required
Advanced Charts
Heatmap
Weekly Activity Grid

Weekday × hour activity matrix; N/A natively

N/A – Chart.js Plugin or custom SVG required
Radar
Team Skills Assessment

Hexagonal radar skill comparison across teams

Gauge
KPI Performance Meter

Speedometer-style KPI gauge; N/A natively

N/A – Chart.js Plugin or custom SVG required
Indicator
KPI Dashboard Cards

Multi-KPI card display; N/A natively

N/A – Chart.js Plugin or custom SVG required
Heatmap Grid
Performance Score Grid

Grid heatmap of scores; N/A natively

N/A – Chart.js Plugin or custom SVG required
Chord
Deal Flow Path Analysis

Flow chord diagram; N/A natively

N/A – Chart.js Plugin or custom SVG required
Parallel Coords
Sales Rep Performance

Multi-axis parallel coordinates; N/A natively

N/A – Chart.js Plugin or custom SVG required
Wind Rose
Wind Speed & Direction

Polar area chart by wind direction and speed

Bullet
Division Performance

Stacked horizontal bars showing performance bands

Calendar Heatmap
Daily Website Activity

Full-year 2024 daily visit heatmap; N/A natively

N/A – Chart.js Plugin or custom SVG required
Marimekko
Revenue by Region & Product

Variable-width stacked bars; N/A natively

N/A – Chart.js Plugin or custom SVG required
3D & Geo Charts
3D Scatter
Customer Segment Clusters

3D scatter plot; N/A in Chart.js

N/A – Chart.js Plugin or custom SVG required
Choropleth
US Revenue by State

US filled map; N/A in Chart.js

N/A – Chart.js Plugin or custom SVG required
3D Surface
Revenue Landscape

3D surface; N/A in Chart.js

N/A – Chart.js Plugin or custom SVG required
3D Surface
sinc(r) Wave Surface

Mathematical surface; N/A in Chart.js

N/A – Chart.js Plugin or custom SVG required
3D Quiver
Wind Vector Field

3D vector field; N/A in Chart.js

N/A – Chart.js Plugin or custom SVG required
Geo Scatter
Global Office Locations

Geographic scatter; N/A in Chart.js

N/A – Chart.js Plugin or custom SVG required