Plotly.js

Plotly.js is a standalone, open-source JavaScript data visualization library built on top of d3.js and WebGL (via regl). It renders more than 40 chart types out of the box, from basic line and bar charts to 3D surfaces, statistical plots, financial charts, and geographic maps, all through a single declarative JSON-based API.

It also powers the Python and R plotting libraries (Plotly.py and Plotly.R) as well as the Dash application framework, so the same trace and layout schema you learn in Plotly.js carries over to those ecosystems. Every chart is interactive by default: zoom, pan, hover tooltips, and legend toggling work without extra code, and charts can be embedded via a script tag, bundled as an ES module, or consumed through framework wrappers like react-plotly.js.

What You Get

• 40+ chart types: line, bar, scatter, box, heatmap, contour, 3D surface/mesh, choropleth and tile maps, financial (candlestick/OHLC), and statistical charts
• Built-in interactivity: zoom, pan, box/lasso select, hover tooltips, and a configurable modebar toolbar with no extra wiring
• WebGL-accelerated rendering (via regl and stackgl modules) for large scatter, 3D, and mesh plots that would choke pure SVG
• A declarative JSON schema (traces + layout) shared across Plotly.js, Plotly.py, Plotly.R, and Dash, so chart definitions are portable across languages
• Official React wrapper (react-plotly.js) plus first-class support for loading via CDN script tag, npm module, or custom partial bundles
• Built-in export to static images (PNG/SVG) and editable chart configuration UI for end users

Common Use Cases

• Embedding interactive analytics dashboards and BI charts directly in a web app without a backend rendering service
• Rendering scientific and engineering visualizations — 3D surfaces, contour plots, isosurfaces — for research and technical tooling
• Building financial charting UIs with candlestick, OHLC, and time-series range-selector components
• Powering Dash applications and Streamlit-style Python/R data apps that need browser-rendered, interactive charts
• Geographic data visualization with choropleth maps, tile maps, and scatter-on-map traces

Under The Hood

Architecture — Plotly.js is organized around a central registry (src/registry.js) that trace modules and components self-register into at load time; src/core.js wires up the public API methods (newPlot, restyle, relayout, addTraces, etc.) from src/plot_api/plot_api.js (nearly 3,800 lines) and registers the default scatter trace plus optional components (annotations, shapes, legend, colorbar, modebar) so consumers only pay for what they require/import. Each of the 35+ trace types under src/traces/ (bar, heatmap, scattergeo, mesh3d, sankey, etc.) implements a consistent module contract — attributes, supplyDefaults, calc, plot, style, hoverPoints — that the core plot pipeline calls uniformly regardless of chart type, which is what lets 2D SVG traces and WebGL/3D traces share one API surface.

Tech Stack — Built on d3.js (a Plotly-maintained fork, @plotly/d3) for SVG/DOM chart rendering and @plotly/regl plus a dedicated stackgl_modules/ directory for WebGL-based 3D, contour, and large-point-count rendering; mapping traces layer on @plotly/mapbox-gl and Turf.js for geospatial math. The package ships 43 runtime dependencies and 54 dev dependencies, targets Node >=18 for its build tooling, and produces both a full bundle and custom partial bundles via tasks/custom_bundle.mjs so consumers can trim unused trace types from their production bundle size.

Code Quality — Tests are extensive: 167 Jasmine spec files under test/jasmine/ cover trace-level behavior, plus a separate image-comparison suite (test/image/compare_pixels_test.mjs) that pixel-diffs rendered charts against baseline PNGs to catch visual regressions, and bundle/export/syntax test scripts run in CI (GitHub Actions ci.yml). Linting runs through Biome (biome.json) rather than ESLint. The codebase is plain JavaScript (no TypeScript), with a consistent 'use strict' + CommonJS module convention throughout src/.

API Design — The trace/layout JSON schema is declarative and consistent across all 40+ chart types (set type: 'bar' or type: 'scatter3d' and reuse the same data/layout/config call shape), which keeps the learning curve shallow once a developer understands one chart type. The tradeoff is a very large attribute surface per trace (documented via test/plot-schema.json, machine-generated from each trace’s attributes.js), so discovering the right property for a specific customization often means consulting the schema or docs rather than guessing from the API alone.