plotly.js

The open source javascript graphing library that powers plotly

weekly downloads449K

versionv3.3.1

licenseMIT

categorydata-viz

graphingplottingdatavisualizationplotly

Overview

plotly.js is a high-level, declarative charting library that renders interactive, publication-quality visualizations using D3.js and WebGL. It supports over 40 chart types including 3D plots, scientific visualizations, financial charts, and geographic maps. The library uses a JSON-based configuration schema where charts are defined through data traces and layout objects, making it straightforward to build complex visualizations without low-level canvas manipulation.

Developed by Plotly and maintained as an open-source project, plotly.js bundles D3.js and stack.gl modules into a single package. It handles the heavy lifting of rendering, interactivity (zoom, pan, hover tooltips), and responsiveness while exposing a simple API. The library works in vanilla JavaScript, integrates with React through react-plotly.js, and supports modern bundlers with ESM modules.

The package sees significant adoption with nearly 450K weekly downloads, used by data scientists, analysts, and web developers building dashboards, analytics platforms, and data-driven applications. Its declarative approach means you describe what you want to visualize rather than how to draw it, reducing boilerplate while maintaining extensive customization options through nested configuration objects.

plotly.js excels when you need rich interactivity and diverse chart types in a single library. The trade-off is bundle size—the full package is approximately 9MB minified, though dist-min variants and custom bundles can reduce this significantly. For applications requiring scientific plotting, 3D visualizations, or complex statistical charts, plotly.js provides capabilities that lighter alternatives cannot match.

Quick Start

typescript

import Plotly from 'plotly.js-dist-min';

const data = [
  {
    x: [1, 2, 3, 4, 5],
    y: [10, 15, 13, 17, 20],
    type: 'scatter',
    mode: 'lines+markers',
    name: 'Series A',
    marker: { color: 'rgb(219, 64, 82)', size: 8 }
  },
  {
    x: [1, 2, 3, 4, 5],
    y: [16, 12, 10, 14, 18],
    type: 'bar',
    name: 'Series B',
    marker: { color: 'rgb(55, 128, 191)' }
  }
];

const layout = {
  title: 'Sales Performance',
  xaxis: { title: 'Quarter' },
  yaxis: { title: 'Revenue ($K)' },
  hovermode: 'closest',
  showlegend: true
};

const config = {
  responsive: true,
  displayModeBar: true,
  modeBarButtonsToRemove: ['pan2d', 'lasso2d']
};

Plotly.newPlot('chart', data, layout, config);

document.getElementById('chart').on('plotly_click', (eventData) => {
  const point = eventData.points[0];
  console.log(`Clicked: ${point.data.name} at x=${point.x}, y=${point.y}`);
});

Use Cases

Financial dashboards with real-time data: Build stock price charts with candlestick and OHLC plots, including range selectors and synchronized crosshairs across multiple subplots. The library handles time-series axes natively and supports streaming updates through Plotly.react() for live market data.

Scientific data visualization: Render heatmaps, contour plots, 3D surface plots, and box-and-whisker diagrams for research data. WebGL rendering enables smooth interaction with large datasets (10K+ points) that would cause performance issues in SVG-only libraries.

Interactive analytics platforms: Create drill-down dashboards where users can click chart elements to filter data, with event callbacks (plotly_click, plotly_selected) triggering application logic. Combined with annotations and shapes, you can build fully interactive exploration tools.

Geospatial data mapping: Display choropleth maps, scatter plots on geographic projections, and bubble maps for location-based analytics. The library includes built-in map projections and supports GeoJSON for custom regions.

Machine learning model outputs: Visualize confusion matrices, ROC curves, decision boundaries in 2D/3D scatter plots, and training metrics over time. The declarative API makes it easy to programmatically generate charts from model results in Node.js or browser environments.

Pros & Cons

Pros

+Extensive chart type coverage (40+) including 3D, scientific, and financial plots that require multiple libraries otherwise
+Built-in interactivity (zoom, pan, hover, export) and event system without additional configuration
+Declarative JSON schema makes charts serializable, reproducible, and easy to generate programmatically from backend data
+WebGL rendering handles large datasets (100K+ points) with smooth performance where SVG solutions struggle
+Active ecosystem with React bindings, Python/R integration for cross-platform workflows, and strong community support

Cons

−Large bundle size (3-9MB depending on variant) impacts initial load time unless using custom builds or CDN
−Deeply nested configuration objects can become verbose for complex customizations requiring extensive layout options
−Limited low-level control compared to D3.js—some advanced custom visualizations require workarounds or are not possible
−Documentation is comprehensive but scattered across examples, reference docs, and community forums making specific features hard to locate
−Performance degrades with many simultaneous charts on a single page due to memory overhead per plot instance

Alternatives

chart.jsv4.5.1

Simple HTML5 charts using the canvas element.

data-vizcanvascharts

6.6M / week

d3v7.9.0

Data-Driven Documents

data-vizd3dom

7.2M / week

echartsv6.0.0

Apache ECharts is a powerful, interactive charting and data visualization library for browser

data-vizechartsdata-visualization

1.8M / week

Install

bash

npm install plotly.js

bash

pnpm add plotly.js

bash

bun add plotly.js

Overview

Quick Start

typescript

import Plotly from 'plotly.js-dist-min';

const data = [
  {
    x: [1, 2, 3, 4, 5],
    y: [10, 15, 13, 17, 20],
    type: 'scatter',
    mode: 'lines+markers',
    name: 'Series A',
    marker: { color: 'rgb(219, 64, 82)', size: 8 }
  },
  {
    x: [1, 2, 3, 4, 5],
    y: [16, 12, 10, 14, 18],
    type: 'bar',
    name: 'Series B',
    marker: { color: 'rgb(55, 128, 191)' }
  }
];

const layout = {
  title: 'Sales Performance',
  xaxis: { title: 'Quarter' },
  yaxis: { title: 'Revenue ($K)' },
  hovermode: 'closest',
  showlegend: true
};

const config = {
  responsive: true,
  displayModeBar: true,
  modeBarButtonsToRemove: ['pan2d', 'lasso2d']
};

Plotly.newPlot('chart', data, layout, config);

document.getElementById('chart').on('plotly_click', (eventData) => {
  const point = eventData.points[0];
  console.log(`Clicked: ${point.data.name} at x=${point.x}, y=${point.y}`);
});

Use Cases

Pros & Cons

Pros

+Extensive chart type coverage (40+) including 3D, scientific, and financial plots that require multiple libraries otherwise
+Built-in interactivity (zoom, pan, hover, export) and event system without additional configuration
+Declarative JSON schema makes charts serializable, reproducible, and easy to generate programmatically from backend data
+WebGL rendering handles large datasets (100K+ points) with smooth performance where SVG solutions struggle
+Active ecosystem with React bindings, Python/R integration for cross-platform workflows, and strong community support

Cons

−Large bundle size (3-9MB depending on variant) impacts initial load time unless using custom builds or CDN
−Deeply nested configuration objects can become verbose for complex customizations requiring extensive layout options
−Limited low-level control compared to D3.js—some advanced custom visualizations require workarounds or are not possible
−Documentation is comprehensive but scattered across examples, reference docs, and community forums making specific features hard to locate
−Performance degrades with many simultaneous charts on a single page due to memory overhead per plot instance