Plotly.js — Chart Portfolio

Basic Charts

Line

Monthly Revenue Trends

Multi-year revenue comparison with seasonal patterns

Multi-Line

Tech Stock Prices

3-company normalized stock price performance

Bar

Sales by Region

Annual sales performance across geographic markets

Horizontal Bar

Top Product Rankings

Revenue-ranked product portfolio leaderboard

Grouped Bar

Quarterly Performance

Side-by-side comparison across four quarters

Stacked Bar

Revenue by Channel

Channel mix composition over fiscal quarters

Pie

Market Share 2025

Industry-wide competitive market share breakdown

Donut

Budget Allocation

Annual operating budget distribution by function

Drilldown Bar

Sales Drilldown by Region

Click a region bar to drill into city-level breakdown

Gantt

Project Roadmap

Q1–Q2 2025 product roadmap with resource-coloured task bars

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 by team

Violin

Age Distribution by Group

KDE-smoothed distribution across customer segments

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

Combined bar + line with independent Y-axes

Error Bars

Forecast Confidence Range

Quarterly revenue actuals with symmetric uncertainty bands

Histogram 2D

Spend vs Revenue Density

Bivariate density histogram of marketing spend vs revenue

Density Contour

Spend vs Revenue Contour

Histogram2dContour — smoothed iso-density curves

SPLOM

Business Metrics Scatter Matrix

Scatter plot matrix showing pairwise correlations across 4 KPIs

ScatterGL (WebGL)

Large Dataset 2,000 Points

GPU-accelerated WebGL scatter for high-volume data rendering

Bump

Product Rank Journey

Weekly ranking changes across 5 products over 8 weeks

Slope

Q1 vs Q4 Revenue

Regional revenue change between Q1 and Q4 2025

Streamgraph

User Acquisition Mix

24-month stacked stream of acquisition channel share

Dumbbell

Salary Range by Dept

P25–P75 salary spread connected by a range bar

Financial Charts

Candlestick

AAPL 30-Day OHLC

Open · High · Low · Close candlestick chart

Waterfall

P&L Bridge Analysis

Revenue-to-profit bridge with cost components

Funnel

Sales Pipeline Stages

Prospect-to-close conversion funnel analysis

OHLC

MSFT Open-High-Low-Close

Alternative to candlestick using open/high/low/close price lines

Funnel Area

Marketing Conversion Funnel

Area-proportional funnel from impressions to retained customers

Hierarchical Charts

Treemap

Product Revenue Hierarchy

Area-proportional view of product portfolio value

Sunburst

Org Budget Hierarchy

Radial drill-down of department budget allocation

Sankey

Revenue Flow Diagram

Source-to-destination flow of revenue streams

Bubble

GDP vs Life Expectancy

Bubble size = population · Gapminder style

Icicle

Icicle Product Hierarchy

Top-down rectangular partition chart of product revenue breakdown

Advanced Charts

Heatmap

Weekly Activity Grid

Hour-by-day user activity density heatmap

Radar

Team Skills Assessment

Polygon comparison of multi-dimensional competencies

Gauge

KPI Performance Meter

Real-time goal attainment indicator

Indicator

KPI Dashboard Cards

Multi-metric delta indicators with trend arrows

Contour

Performance Score Grid

Filled contour iso-lines over a 2D performance surface

Parallel Categories

Deal Flow Path Analysis

Categorical flow ribbons coloured by deal outcome (Won / Lost)

Parallel Coordinates

Sales Rep Performance

Multi-axis parallel coordinates for 50-rep performance comparison

Wind Rose

Wind Speed & Direction

Stacked polar-bar chart showing wind frequency by direction and speed

Bullet

Division Performance

Actual score vs target marker on poor/ok/good bands

Calendar Heatmap

Daily Website Activity

Full-year 2024 daily visit heatmap in a GitHub-style grid

Marimekko

Revenue by Region & Product

Variable-width stacked bars showing market size and segment mix

3D & Geo Charts

3D Scatter

Customer Segment Clusters

3D clustering: Recency · Frequency · Monetary value

Choropleth

US Revenue by State

Geographic choropleth of state-level revenue

3D Surface

Revenue Landscape

3D surface plot of revenue by month and region

3D Mesh

sinc(r) Wave Surface

Triangulated 3D mesh of the sinc mathematical surface

3D Cone

Wind Vector Field

3D cone glyphs visualising a curl-like wind velocity field

ScatterGeo

Global Office Locations

World map geo-scatter — bubble size = employee headcount

Library Compatibility Matrix

Which chart types are available in each major JavaScript charting library? Use this table to evaluate Plotly.js against Chart.js, D3.js, and Highcharts.

✓ Native — first-class, built-in support ⚫ Plugin — available via plugin or extension ≈ Partial — manual implementation or custom code − N/A — not supported

#	Chart Name	Category	Plotly.js	Chart.js	D3.js	Highcharts
01	Line — Revenue Trends	Basic	✓ Native	✓ Native	✓ Native	✓ Native
02	Multi-Line — Stock Prices	Basic	✓ Native	✓ Native	✓ Native	✓ Native
03	Bar — Sales by Region	Basic	✓ Native	✓ Native	✓ Native	✓ Native
04	Horizontal Bar — Product Rankings	Basic	✓ Native	✓ Native	✓ Native	✓ Native
05	Grouped Bar — Quarterly Performance	Basic	✓ Native	✓ Native	✓ Native	✓ Native
06	Stacked Bar — Revenue by Channel	Basic	✓ Native	✓ Native	✓ Native	✓ Native
07	Pie — Market Share	Basic	✓ Native	✓ Native	✓ Native	✓ Native
08	Donut — Budget Allocation	Basic	✓ Native	✓ Native	✓ Native	✓ Native
09	Scatter — Marketing vs Revenue	Statistical	✓ Native	✓ Native	✓ Native	✓ Native
10	Histogram — Transaction Distribution	Statistical	✓ Native	≈ Partial	✓ Native	✓ Native
11	Box Plot — Scores by Dept	Statistical	✓ Native	⚫ Plugin	✓ Native	✓ Native
12	Violin — Age Distribution	Statistical	✓ Native	⚫ Plugin	✓ Native	✓ Native
13	Area — Website Traffic	Statistical	✓ Native	✓ Native	✓ Native	✓ Native
14	Stacked Area — Acquisition Channels	Statistical	✓ Native	✓ Native	✓ Native	✓ Native
15	Candlestick — AAPL OHLC	Financial	✓ Native	⚫ Plugin	✓ Native	✓ Native
16	Waterfall — P&L Bridge	Financial	✓ Native	≈ Partial	✓ Native	✓ Native
17	Funnel — Sales Pipeline	Financial	✓ Native	≈ Partial	✓ Native	✓ Native
18	Treemap — Product Revenue	Hierarchical	✓ Native	⚫ Plugin	✓ Native	✓ Native
19	Sunburst — Org Budget	Hierarchical	✓ Native	− N/A	✓ Native	✓ Native
20	Sankey — Revenue Flow	Hierarchical	✓ Native	− N/A	⚫ Plugin	✓ Native
21	Bubble — GDP vs Life Exp	Hierarchical	✓ Native	✓ Native	✓ Native	✓ Native
22	Heatmap — Weekly Activity	Advanced	✓ Native	⚫ Plugin	✓ Native	✓ Native
23	Radar — Team Skills	Advanced	✓ Native	✓ Native	✓ Native	✓ Native
24	Gauge — KPI Performance	Advanced	✓ Native	≈ Partial	✓ Native	✓ Native
25	Indicator Dashboard — KPI Cards	Advanced	✓ Native	− N/A	≈ Partial	≈ Partial
26	3D Scatter — Customer Clusters	3D & Geo	✓ Native	− N/A	≈ Partial	✓ Native
27	Choropleth — US Revenue by State	3D & Geo	✓ Native	− N/A	✓ Native	⚫ Plugin
28	Drilldown Bar — Sales by Region	Basic	✓ Native	✓ Native	✓ Native	✓ Native
29	Dual-Axis — Revenue vs Margin	Statistical	✓ Native	✓ Native	✓ Native	✓ Native
30	OHLC — MSFT Price	Financial	✓ Native	⚫ Plugin	✓ Native	✓ Native
31	Error Bars — Forecast Confidence	Statistical	✓ Native	✓ Native	✓ Native	✓ Native
32	Histogram 2D — Spend vs Revenue	Statistical	✓ Native	− N/A	≈ Partial	− N/A
33	2D Contour — Density Map	Statistical	✓ Native	− N/A	≈ Partial	− N/A
34	Contour — Performance Grid	Advanced	✓ Native	− N/A	✓ Native	− N/A
35	SPLOM — Metrics Correlation Matrix	Statistical	✓ Native	− N/A	✓ Native	− N/A
36	3D Surface — Revenue Landscape	3D & Geo	✓ Native	− N/A	≈ Partial	✓ Native
37	3D Mesh — sinc Wave	3D & Geo	✓ Native	− N/A	≈ Partial	− N/A
38	3D Cone — Wind Vectors	3D & Geo	✓ Native	− N/A	≈ Partial	− N/A
39	ScatterGeo — Global Offices	3D & Geo	✓ Native	− N/A	✓ Native	⚫ Plugin
40	Icicle — Product Hierarchy	Hierarchical	✓ Native	− N/A	✓ Native	− N/A
41	Parallel Categories — Deal Flow	Advanced	✓ Native	− N/A	≈ Partial	− N/A
42	Parallel Coordinates — Sales Reps	Advanced	✓ Native	− N/A	✓ Native	✓ Native
43	Funnel Area — Marketing Conversion	Financial	✓ Native	− N/A	≈ Partial	✓ Native
44	Wind Rose — Wind Speed Distribution	Advanced	✓ Native	✓ Native	✓ Native	✓ Native
45	ScatterGL — Large Dataset (50K pts)	Statistical	✓ Native	≈ Partial	≈ Partial	✓ Native
46	Gantt — Project Roadmap	Basic	✓ Native	⌦ Plugin	✓ Native	≈ Partial
47	Lollipop — Sales vs Target	Basic	✓ Native	✓ Native	✓ Native	✓ Native
48	Bump — Product Rank Journey	Statistical	✓ Native	✓ Native	✓ Native	≈ Partial
49	Slope — Q1 vs Q4 Revenue	Statistical	✓ Native	✓ Native	✓ Native	≈ Partial
50	Streamgraph — User Acquisition Mix	Statistical	✓ Native	✓ Native	✓ Native	✓ Native
51	Dumbbell — Salary Range by Dept	Statistical	✓ Native	✓ Native	✓ Native	✓ Native
52	Bullet — Division Performance	Advanced	✓ Native	⌦ Plugin	✓ Native	✓ Native
53	Calendar Heatmap — Daily Activity	Advanced	✓ Native	⌦ Plugin	✓ Native	⌦ Plugin
54	Marimekko — Revenue by Region	Advanced	✓ Native	≈ Partial	✓ Native	≈ Partial

Plotly.js Chart Gallery