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.
- 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
Install a ready-to-use distributed bundle
npm i --save plotly.js-dist-minand 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.
In the examples below
Plotlyobject is added to the window scope byscript. ThenewPlotmethod is then used to draw an interactive figure as described bydataandlayoutinto the desireddivhere namedgd. As demonstrated in the example above basic knowledge ofhtmland 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.11.1.min.js"></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.11.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.
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.11.1.js" charset="utf-8"></script>