Nov	DEC	Jan
	16
2020	2021	2022

success

fail

COLLECTED BY

Collection: Save Page Now Outlinks

TIMESTAMPS

The Wayback Machine - http://web.archive.org/web/20211216163156/https://plotly.com/javascript/

●Forum ●Pricing●Dash

Javascript Python R Julia Javascript ggplot2 MATLAB F# Dash ●Forum ●Pricing●Dash

Quick start

Examples

● ● ● ● ● ● ● ● ● ●

Plotly JavaScript Open Source Graphing Library

Built on top of d3.js and stack.gl, Plotly.js is a high-level, declarative charting library. plotly.js ships with over 40 chart types, including 3D charts, statistical graphs, and SVG maps. plotly.js is free and open source and you can view the source, report issues or contribute on GitHub. Deploy Plotly_js AI Dash apps on private Kubernetes clusters: Pricing | Demo | Overview | AI App Services

Read more about plotly.js 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.

d3.json('https://plotly.com/~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.newPlot(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. view all of the available attributes

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.newPlot(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 Universal By abstracting charts to a declarative JSON structure, plotly.js is used as a browser-based charting library for Python, R, MATLAB.

Fundamentals More Fundamentals »

Configuration Options View Tutorial

Responsive / Fluid Layouts View Tutorial

uirevision in Plotly.react View Tutorial

React Plotly.js View Tutorial

Analytical Apps with Dash View Tutorial

Basic Charts More Basic Charts »

Scatter Plots View Tutorial

Line Charts View Tutorial

Bar Charts View Tutorial

Pie Charts View Tutorial

Bubble Charts View Tutorial

Statistical Charts More Statistical Charts »

Error Bars View Tutorial

Box Plots View Tutorial

Histograms View Tutorial

2d Density Plots View Tutorial

Continuous Error Bars View Tutorial

Scientific Charts More Scientific Charts »

Contour Plots View Tutorial

Heatmaps View Tutorial

Ternary Plots View Tutorial

Parallel Coordinates Plot View Tutorial

Log Plots View Tutorial

Financial Charts More Financial Charts »

Waterfall Charts View Tutorial

Indicators View Tutorial

Candlestick Charts View Tutorial

Funnel and Funnelarea Charts View Tutorial

Time Series View Tutorial

Maps More Maps »

Mapbox Map Layers View Tutorial

Mapbox Density Heatmap View Tutorial

Choropleth Mapbox View Tutorial

Lines on Maps View Tutorial

Bubble Maps View Tutorial

3D Charts More 3D Charts »

3D Scatter Plots View Tutorial

Ribbon Plots View Tutorial

3D Surface Plots View Tutorial

3D Mesh Plots View Tutorial

3D Line Plots View Tutorial

Subplots More Subplots »

Subplots View Tutorial

Inset Plots View Tutorial

3D Subplots View Tutorial

Mixed Subplots View Tutorial

Table Subplots View Tutorial

Custom Chart Events

Click Events View Tutorial

Hover Events View Tutorial

Zoom Events View Tutorial

Disable Zoom Events View Tutorial

Transforms

Filter View Tutorial

Groupby View Tutorial

Aggregations View Tutorial

Multiple Transforms View Tutorial

Add Custom Controls More Controls »

Dropdown Events View Tutorial

Button Events View Tutorial

Slider Events View Tutorial

Lasso Selection View Tutorial

Range Slider and Selector View Tutorial

Animations

Animations View Tutorial

Adding Sliders to Animations View Tutorial

Filled-Area Animation View Tutorial

Map Animation View Tutorial

●Dash ●Consulting and Training ●Enterprise Pricing ●Careers ●Resources ●Blog ●Community Support ●Documentation Sign up to stay in the loop with all things Plotly — from Dash Club to product updates, webinars, and more!