Getting Started in JavaScript

Getting Started with plotly


New to Plotly?

Plotly is a free and open-source graphing library for JavaScript. We recommend you read our Getting Started guide for the latest installation or upgrade instructions, then move on to our Plotly Fundamentals tutorials or dive straight in to some Basic Charts tutorials.

NPM

You can install Plotly.js from NPM via npm install plotly.js-dist or yarn install 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-2.30.0.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-2.30.0.min.js" charset="utf-8"></script>
</head>

Download plotly.js

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