Skip to content
Make with

Plotly.js

Interactive data visualization library for JavaScript

Maintained by Plotly

Documentation ↗Source ↗

Plotly.js provides comprehensive data visualization capabilities with built-in MapLibre GL JS integration for geographic plots. This JavaScript library enables developers to create interactive charts, maps, and dashboards with open-source vector rendering in web browsers.

Plotly is Switching to MapLibre

Read on plotly.com ↗

Quick start

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

const data = [{
  type: 'scattermap',
  mode: 'markers+text',
  lon: [-122.4, -73.9, -87.6],
  lat: [37.8, 40.7, 41.9],
  text: ['San Francisco', 'New York', 'Chicago'],
  textposition: 'top right',
  marker: {size: 12, color: '#d62728'}
}];

const layout = {
  map: {style: 'basic'},
  margin: {t: 0, b: 0, l: 0, r: 0}
};

Plotly.newPlot('myDiv', data, layout);
Runs this code in your browser, in a new tab.
›Setup noteschecked with v4.1.1

The page needs an element such as <div id="myDiv"></div>. The scattermap trace arrived in Plotly.js 2.35; version 4.1.1 runs on MapLibre GL JS v6 and sets up its worker itself, so no setWorkerUrl call is needed. A strict Content Security Policy must allow blob: workers. 'basic' is a keyless built-in style, and map.style also takes a style URL.

Other platforms are on SDKs.

Used by 1 product

Plotly Studio

AI-native app that turns raw data from CSV files and databases into interactive analytics apps and dashboards, as a desktop app or embedded in Dash apps.