plotly.js

The open source JavaScript graphing library that powers Plotly

Show Sidebar Hide Sidebar

What is plotly.js?

Built on top of d3.js and stack.gl, plotly.js is a high-level, declarative charting library. plotly.js ships with 20 chart types, including 3D charts, statistical graphs, and SVG maps.
Learn about why we open sourced plotly.js or view the source on GitHub.

Plotly.d3.csv('https://raw.githubusercontent.com/plotly/datasets/master/gapminderDataFiveYear.csv', function(err, rows){
var YEAR = 2007;
var continents = ['Asia', 'Europe', 'Africa', 'Oceania', 'Americas'];
var POP_TO_PX_SIZE = 2e5;
function unpack(rows, key) {
  return rows.map(function(row) { return row[key]; });
}

var data = continents.map(function(continent) {
  var rowsFiltered = rows.filter(function(row) {
      return (row.continent === continent) && (+row.year === YEAR);
  });
  return {
      mode: 'markers',
      name: continent,
      x: unpack(rowsFiltered, 'lifeExp'),
      y: unpack(rowsFiltered, 'gdpPercap'),
      text: unpack(rowsFiltered, 'country'),
      marker: {
          sizemode: 'area',
          size: unpack(rowsFiltered, 'pop'),
          sizeref: POP_TO_PX_SIZE
      }
  };
});
var layout = {
  xaxis: {title: 'Life Expectancy'},
  yaxis: {title: 'GDP per Capita', type: 'log'},
  margin: {t: 20},
  hovermode: 'closest'
};
Plotly.plot('my-graph', data, layout, {showLink: false});
});
features
Sophisticated chart types
plotly.js abstracts the types of statistical and scientific charts that you would find in packages like matplotlib, ggplot2, or MATLAB.
Plotly.d3.json('https://plot.ly/~DanielCarrera/13.json', function(figure){
  var trace = {
    x: figure.data[0].x, y: figure.data[0].y, z: figure.data[0].z,
    type: 'contour', autocolorscale: false,
    colorscale: [[0,"rgb(  0,  0,  0)"],[0.3,"rgb(230,  0,  0)"],[0.6,"rgb(255,210,  0)"],[1,"rgb(255,255,255)"]],
    reversescale: true, zmax: 2.5, zmin: -2.5
  };
  var layout = {
    title: 'turbulence simulation',
    xaxis: {title: 'radial direction', showline: true, mirror: 'allticks', ticks: 'inside'},
    yaxis: {title: 'vertical direction', showline: true, mirror: 'allticks', ticks: 'inside'},
    margin: {l: 40, b: 40, t: 60},
    annotations: [{
      showarrow: false,
      text: 'Credit: Daniel Carrera',
      x: 0, y: 0, xref: 'paper', yref: 'paper'
    }]
  }
  Plotly.plot(document.getElementById('contour-plot'), [trace], layout, {showLink: false});
});
Fully customizable
plotly.js charts are described declaratively as JSON objects. Every aspect of the charts, such as colors, grid lines, and the legend, has a corresponding set of JSON attributes.
Plotly.d3.csv('https://raw.githubusercontent.com/plotly/datasets/master/wind_speed_laurel_nebraska.csv', function(rows){
    var trace = {
      type: 'scatter',                    // set the chart type
      mode: 'lines',                      // connect points with lines
      x: rows.map(function(row){          // set the x-data
        return row['Time'];
      }),
      y: rows.map(function(row){          // set the x-data
        return row['10 Min Sampled Avg'];
      }),
      line: {                             // set the width of the line.
        width: 1
      },
      error_y: {
        array: rows.map(function(row){    // set the height of the error bars
          return row['10 Min Std Dev'];
        }),
        thickness: 0.5,                   // set the thickness of the error bars
        width: 0
      }
    };

    var layout = {
      yaxis: {title: "Wind Speed"},       // set the y axis title
      xaxis: {
        showgrid: false,                  // remove the x-axis grid lines
        tickformat: "%B, %Y"              // customize the date format to "month, day"
      },
      margin: {                           // update the left, bottom, right, top margin
        l: 40, b: 10, r: 10, t: 20
      }
    };

    Plotly.plot(document.getElementById('wind-speed'), [trace], layout, {showLink: false});
});
High performance
Most plotly graphs are drawn with SVG. This offers great compatibility across browsers and publication-quality vector image export. Unfortunately, there are inherent performance limitations with the number of SVG elements that you can draw in the DOM.

plotly.js uses stack.gl for high performance 2D and 3D charting.

This chart was drawn with the plotly.js chart type scattergl. scattergl charts render an order of magnitude faster than their SVG counterparts.
All 3D charts in plotly.js are rendered with WebGL, leveraging the power of the GPU for fast interactivity. view the interactive version
Fully interactive
plotly.js charts are shipped with zoom, pan, hover, and click interactions. Click-and-drag to zoom into a region, double-click to autoscale, click on legend items to toggle traces. All of these events are also exposed in the API.
Universal
By abstracting charts to a declarative JSON structure, plotly.js is used as a browser-based charting library for Python, R, MATLAB.
examples
Basic Charts
Statistical Charts
Scientific Charts
Financial Charts
Maps
3D Charts
Multiple Axes, Subplots, and Insets
Add Custom Controls
Custom Chart Events
Layout & Style Options
Image Export & Retrieving Plots
Still need help?
Contact Us

For guaranteed 24 hour response turnarounds, upgrade to a Developer Support Plan.