Getting Started in JavaScript
Getting Started with plotly
Plotly Studio: Transform any dataset into an interactive data application in minutes with AI. Sign up for early access now.
NPM
You can install Plotly.js from NPM via npm install plotly.js-dist or yarn add plotly.js-dist
plotly.js CDN
You can also use the ultrafast plotly.js CDN link. This CDN is graciously provided by the incredible team at Fastly.
<head>
<script src="https://cdn.plot.ly/plotly-3.0.1.min.js" charset="utf-8"></script>
</head>Download
Download the minified plotly.js source code and dependencies.
Include the downloaded scripts before the end of the </head> tag in your HTML document:
<head>
<script src="plotly-3.0.1.min.js" charset="utf-8"></script>
</head>
Start plotting!
In your HTML document, create an empty DIV to draw the graph in:
<div id="tester" style="width:600px;height:250px;"></div>
Now you can make interactive plotly.js charts using Plotly.newPlot().
<script>
TESTER = document.getElementById('tester');
Plotly.newPlot( TESTER, [{
x: [1, 2, 3, 4, 5],
y: [1, 2, 4, 8, 16] }], {
margin: { t: 0 } } );
</script>
Now you can pass Plotly.newPlot() either the ID of the DIV ("tester") or the DIV DOM element (TESTER).
Hello World Example
