README

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
 Load via script tag
 Bundles
 Alternative ways to load and build plotly.js
 Documentation
 Bugs and feature requests
 Contributing
 Notable contributors
 Copyright and license
 Community

---
 Load as a node module
Install a ready-to-use distributed bundle
sh
npm i --save plotly.js-dist-min


and use import or require in node.js
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, the Plotly object is added to the window scope by the script tag. 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 or without JavaScript! To learn and build more with plotly.js, please visit the plotly.js documentation.

html

    


    

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



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

    import "https://cdn.plot.ly/plotly-4.2.0.min.js"
    Plotly.newPlot("gd", [{ y: [1, 2, 3] }])



Fastly supports Plotly.js with free CDN service. Read more at .

 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.
html



 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
plotly.js supports using MathJax v3 or v4 to render mathematical expressions within plots.

MathJax is not included in the plotly.js bundle, so it must be loaded separately as a script on the webpage.

For MathJax v4:
html



For MathJax v3:
html



When MathJax is available, any string contained within $..$ signs will be rendered using the MathJax engine. This applies to plot titles, axis labels, tick label text, and annotations.

plotly.js's use of the MathJax svg renderer