Convert Figma logo to code with AI

plotly logoplotly.js

Open-source JavaScript charting library behind Plotly and Dash

16,856
1,851
16,856
576
View on GitHubView on NPM

Top Related Projects

d3's avatar

d3

108,427

Bring data to life with SVG, Canvas and HTML. :bar_chart::chart_with_upwards_trend::tada:

chartjs's avatar

Chart.js

64,334

Simple HTML5 Charts using the <canvas> tag

mrdoob's avatar

three.js

101,622

JavaScript 3D Library.

apache's avatar

echarts

60,106

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

highcharts's avatar

highcharts

11,971

Highcharts JS, the JavaScript charting framework

Quick Overview

Plotly.js is a high-level, declarative charting library built on top of d3.js and WebGL. It provides a wide range of chart types and interactive features, making it a popular choice for data visualization in web applications.

Pros

  • Extensive Chart Types: Plotly.js supports a wide variety of chart types, including scatter plots, line charts, bar charts, pie charts, histograms, and more, allowing users to create complex and visually appealing visualizations.
  • Interactive Features: The library offers a range of interactive features, such as hover tooltips, zoom, and pan, which enhance the user experience and allow for deeper data exploration.
  • Declarative Syntax: Plotly.js uses a declarative syntax, making it easier to create and customize visualizations compared to lower-level libraries like d3.js.
  • Cross-Platform Compatibility: The library is designed to work seamlessly across different platforms, including web browsers, Jupyter Notebooks, and React/Vue.js applications.

Cons

  • Performance Issues: Plotly.js can sometimes struggle with performance, especially when dealing with large datasets or complex visualizations, which may lead to slower rendering or even crashes.
  • Steep Learning Curve: While the declarative syntax is more user-friendly than lower-level libraries, Plotly.js still has a steeper learning curve compared to simpler charting libraries, especially for beginners.
  • Limited Customization: While Plotly.js offers a wide range of chart types and features, the level of customization available may be limited compared to more low-level libraries, which can be a drawback for users with specific visualization requirements.
  • Dependency on d3.js: Plotly.js is built on top of d3.js, which means that users who are not familiar with d3.js may need to invest time in learning it to fully understand and customize Plotly.js visualizations.

Code Examples

Here are a few examples of how to use Plotly.js:

  1. Creating a Simple Line Chart:
import plotly from 'plotly.js-basic-dist';

const data = [
  {
    x: [1, 2, 3, 4],
    y: [10, 15, 13, 17],
    type: 'scatter'
  }
];

const layout = {
  title: 'Line Chart Example'
};

plotly.newPlot('plot', data, layout);
  1. Creating a Bar Chart with Hover Tooltips:
import plotly from 'plotly.js-basic-dist';

const data = [
  {
    x: ['A', 'B', 'C', 'D'],
    y: [5, 10, 3, 8],
    type: 'bar',
    text: ['A: 5', 'B: 10', 'C: 3', 'D: 8'],
    hovertemplate: '%{text}<extra></extra>'
  }
];

const layout = {
  title: 'Bar Chart Example'
};

plotly.newPlot('plot', data, layout);
  1. Creating a Scatter Plot with Customized Markers:
import plotly from 'plotly.js-basic-dist';

const data = [
  {
    x: [1, 2, 3, 4, 5],
    y: [1, 4, 9, 16, 25],
    mode: 'markers',
    marker: {
      size: [20, 40, 60, 80, 100],
      color: ['red', 'green', 'blue', 'orange', 'purple']
    }
  }
];

const layout = {
  title: 'Scatter Plot Example'
};

plotly.newPlot('plot', data, layout);

Getting Started

To get started with Plotly.js, you can follow these steps:

  1. Install the Plotly.js library using npm or yarn:
npm install plotly.js-basic-dist
  1. Import the Plotly.js library in your JavaScript file:
import plotly from '

Competitor Comparisons

d3 logo

d3

108,427

Bring data to life with SVG, Canvas and HTML. :bar_chart::chart_with_upwards_trend::tada:

Pros of d3

  • More flexible and customizable for creating complex, unique visualizations
  • Smaller file size, leading to faster load times
  • Steeper learning curve promotes deeper understanding of data visualization concepts

Cons of d3

  • Requires more code and time to create basic charts
  • Less beginner-friendly, with a steeper learning curve
  • Fewer built-in chart types and features compared to Plotly.js

Code Comparison

d3:

const svg = d3.select("body").append("svg")
    .attr("width", 400)
    .attr("height", 300);

svg.selectAll("rect")
    .data(data)
    .enter()
    .append("rect")
    .attr("x", (d, i) => i * 40)
    .attr("y", d => 300 - d * 10)
    .attr("width", 35)
    .attr("height", d => d * 10);

Plotly.js:

const trace = {
    x: data.map((_, i) => i),
    y: data,
    type: 'bar'
};

Plotly.newPlot('myDiv', [trace], {
    width: 400,
    height: 300
});

The d3 example demonstrates more granular control over SVG elements, while Plotly.js offers a higher-level API for creating charts with less code. d3 requires explicit handling of scales, axes, and individual elements, whereas Plotly.js abstracts these details for quicker development of standard chart types.

chartjs logo

Chart.js

64,334

Simple HTML5 Charts using the <canvas> tag

Pros of Chart.js

  • Lightweight and fast, with a smaller file size
  • Simpler API and easier to get started for basic charts
  • Built-in responsive design and mobile-friendly

Cons of Chart.js

  • Less customization options and flexibility compared to Plotly.js
  • Fewer chart types and advanced features available
  • Limited support for 3D visualizations and scientific plotting

Code Comparison

Chart.js:

new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ['Red', 'Blue', 'Yellow'],
        datasets: [{
            label: 'My Dataset',
            data: [12, 19, 3]
        }]
    }
});

Plotly.js:

Plotly.newPlot('myDiv', [{
    x: ['Red', 'Blue', 'Yellow'],
    y: [12, 19, 3],
    type: 'bar'
}], {
    title: 'My Dataset'
});

Both libraries offer straightforward ways to create basic charts, but Plotly.js provides more options for customization and advanced features. Chart.js excels in simplicity and ease of use, while Plotly.js offers greater flexibility and a wider range of chart types. The choice between the two depends on the specific requirements of your project and the level of complexity needed in your visualizations.

mrdoob logo

three.js

101,622

JavaScript 3D Library.

Pros of three.js

  • More powerful and flexible for complex 3D graphics and animations
  • Larger community and ecosystem with extensive documentation and examples
  • Better performance for real-time 3D rendering and interactive scenes

Cons of three.js

  • Steeper learning curve, especially for those new to 3D graphics
  • Requires more code and setup for basic visualizations compared to Plotly.js
  • Less suitable for quick data visualization and charting tasks

Code Comparison

three.js:

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

Plotly.js:

Plotly.newPlot('myDiv', [{
  x: [1, 2, 3, 4],
  y: [10, 15, 13, 17],
  type: 'scatter'
}]);

The three.js example shows the basic setup for a 3D scene, while the Plotly.js example demonstrates how quickly a simple chart can be created. three.js offers more control and flexibility for complex 3D visualizations, while Plotly.js excels in creating standard charts and plots with minimal code.

apache logo

echarts

60,106

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

Pros of ECharts

  • Lightweight and fast rendering, especially for large datasets
  • Extensive chart types, including specialized options like treemaps and sunbursts
  • Strong support for mobile and touch devices

Cons of ECharts

  • Steeper learning curve due to more complex API
  • Less extensive documentation and community support
  • Fewer built-in themes and styling options

Code Comparison

ECharts:

var myChart = echarts.init(document.getElementById('main'));
var option = {
    xAxis: {type: 'category', data: ['A', 'B', 'C']},
    yAxis: {type: 'value'},
    series: [{type: 'bar', data: [1, 2, 3]}]
};
myChart.setOption(option);

Plotly.js:

var data = [{x: ['A', 'B', 'C'], y: [1, 2, 3], type: 'bar'}];
var layout = {title: 'Simple Bar Chart'};
Plotly.newPlot('myDiv', data, layout);

Both libraries offer powerful charting capabilities, but ECharts excels in performance and diverse chart types, while Plotly.js provides a more user-friendly API and better documentation. The choice between them depends on specific project requirements and developer preferences.

highcharts logo

highcharts

11,971

Highcharts JS, the JavaScript charting framework

Pros of Highcharts

  • More extensive documentation and examples
  • Wider range of chart types and customization options
  • Better support for older browsers and legacy systems

Cons of Highcharts

  • Commercial license required for most use cases
  • Steeper learning curve due to more complex API
  • Larger file size, potentially impacting page load times

Code Comparison

Highcharts:

Highcharts.chart('container', {
  series: [{
    data: [1, 2, 3, 4, 5]
  }]
});

Plotly.js:

Plotly.newPlot('container', [{
  y: [1, 2, 3, 4, 5]
}]);

Both libraries offer powerful charting capabilities, but they differ in their approach and target audience. Highcharts provides a more comprehensive solution with extensive customization options, while Plotly.js focuses on simplicity and ease of use. The choice between the two depends on specific project requirements, budget constraints, and the desired level of control over chart appearance and functionality.

Convert Figma logo designs to code with AI

Visual Copilot

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

npm version circle ci MIT License

Plotly.js is a standalone Javascript data visualization library, and it also powers the Python and R modules named plotly in those respective ecosystems (referred to as Plotly.py and Plotly.R).

Plotly.js can be used to produce dozens of chart types and visualizations, including statistical charts, 3D graphs, scientific charts, SVG and tile maps, financial charts and more.

Contact us for Plotly.js consulting, dashboard development, application integration, and feature additions.

Table of contents

Load as a node module

Install a ready-to-use distributed bundle

npm i --save plotly.js-dist-min

and use import or require in node.js

// ES6 module
import Plotly from 'plotly.js-dist-min'

// CommonJS
var Plotly = require('plotly.js-dist-min')

You may also consider using plotly.js-dist if you prefer using an unminified package.

Load via script tag

The script HTML element

In the examples below Plotly object is added to the window scope by script. The newPlot method is then used to draw an interactive figure as described by data and layout into the desired div here named gd. As demonstrated in the example above basic knowledge of html and JSON syntax is enough to get started i.e. with/without JavaScript! To learn and build more with plotly.js please visit plotly.js documentation.

<head>
    <script src="https://cdn.plot.ly/plotly-2.35.1.min.js" charset="utf-8"></script>
</head>
<body>
    <div id="gd"></div>

    <script>
        Plotly.newPlot("gd", /* JSON object */ {
            "data": [{ "y": [1, 2, 3] }],
            "layout": { "width": 600, "height": 400}
        })
    </script>
</body>

Alternatively you may consider using native ES6 import in the script tag.

<script type="module">
    import "https://cdn.plot.ly/plotly-2.35.1.min.js"
    Plotly.newPlot("gd", [{ y: [1, 2, 3] }])
</script>

Fastly supports Plotly.js with free CDN service. Read more at https://www.fastly.com/open-source.

Un-minified versions are also available on CDN

While non-minified source files may contain characters outside UTF-8, it is recommended that you specify the charset when loading those bundles.

<script src="https://cdn.plot.ly/plotly-2.35.1.js" charset="utf-8"></script>

Please note that as of v2 the "plotly-latest" outputs (e.g. https://cdn.plot.ly/plotly-latest.min.js) will no longer be updated on the CDN, and will stay at the last v1 patch v1.58.5. Therefore, to use the CDN with plotly.js v2 and higher, you must specify an exact plotly.js version.

MathJax

You could load either version two or version three of MathJax files, for example:

<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-AMS-MML_SVG.js"></script>

<script src="https://cdn.jsdelivr.net/npm/mathjax@3.2.2/es5/tex-svg.js"></script>

When using MathJax version 3, it is also possible to use chtml output on the other parts of the page in addition to svg output for the plotly graph. Please refer to devtools/test_dashboard/index-mathjax3chtml.html to see an example.

Need to have several WebGL graphs on a page?

You may simply load virtual-webgl script for WebGL 1 (not WebGL 2) before loading other scripts.

<script src="https://unpkg.com/virtual-webgl@1.0.6/src/virtual-webgl.js"></script>

Bundles

There are two kinds of plotly.js bundles:

  1. Complete and partial official bundles that are distributed to npm and the CDN, described in the dist README.
  2. Custom bundles you can create yourself to optimize the size of bundle depending on your needs. Please visit CUSTOM_BUNDLE for more information.

Alternative ways to load and build plotly.js

If your library needs to bundle or directly load plotly.js/lib/index.js or parts of its modules similar to index-basic in some other way than via an official or a custom bundle, or in case you want to tweak the default build configurations, then please visit BUILDING.md.

Documentation

Official plotly.js documentation is hosted at https://plotly.com/javascript.

These pages are generated by the Plotly graphing-library-docs repo built with Jekyll and publicly hosted on GitHub Pages. For more info about contributing to Plotly documentation, please read through contributing guidelines.

Bugs and feature requests

Have a bug or a feature request? Please open a Github issue keeping in mind the issue guidelines. You may also want to read about how changes get made to Plotly.js

Contributing

Please read through our contributing guidelines. Included are directions for opening issues, using plotly.js in your project and notes on development.

Notable contributors

Plotly.js is at the core of a large and dynamic ecosystem with many contributors who file issues, reproduce bugs, suggest improvements, write code in this repo (and other upstream or downstream ones) and help users in the Plotly community forum. The following people deserve special recognition for their outsized contributions to this ecosystem:

GitHubTwitterStatus
Alex C. Johnson@alexcjohnsonActive, Maintainer
Mojtaba Samimi@archmoj@solarchvisionActive, Maintainer
Emily Kellison-Linn@emilyklActive, Maintainer
My-Tien Nguyen@my-tienActive, Community Contributor
Birk Skyum@birkskyumActive, Community Contributor
Étienne Tétreault-Pinard@etpinard@etpinardHall of Fame
Antoine Roy-Gobeil@antoinergHall of Fame
Jack Parmer@jackparmerHall of Fame
Nicolas Kruchten@nicolaskruchten@nicolaskruchtenHall of Fame
Mikola Lysenko@mikolalysenko@MikolaLysenkoHall of Fame
Ricky Reusser@rreusser@rickyreusserHall of Fame
Dmitry Yv.@dy@DimaYvHall of Fame
Jon Mease@jonmmease@jonmmeaseHall of Fame
Robert Monfera@monfera@monferaHall of Fame
Robert Möstl@rmoestl@rmoestlHall of Fame
Nicolas Riesco@n-riescoHall of Fame
Miklós Tusz@mdtusz@mdtuszHall of Fame
Chelsea Douglas@cldouglHall of Fame
Ben Postlethwaite@bpostlethwaiteHall of Fame
Hannah Ker@hannahker@hannahker11Hall of Fame
Chris Parmer@chriddypHall of Fame
Alex Vados@alexander-danielHall of Fame

Copyright and license

Code and documentation copyright 2021 Plotly, Inc.

Code released under the MIT license.

Versioning

This project is maintained under the Semantic Versioning guidelines.

See the Releases section of our GitHub project for changelogs for each release version of plotly.js.

Community

  • Follow @plotlygraphs on Twitter for the latest Plotly news.
  • Implementation help may be found on community.plot.com (tagged plotly-js) or on Stack Overflow (tagged plotly).
  • Developers should use the keyword plotly on packages which modify or add to the functionality of plotly.js when distributing through npm.

NPM DownloadsLast 30 Days