plotly.js

The open source JavaScript graphing library that powers Plotly

Show Sidebar Hide Sidebar

Getting Started with plotly.js

Getting Started with plotly for JavaScript.

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-latest.min.js"></script>
</head>

Download plotly.js

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-latest.min.js"></script>
</head>

Else, if you want to get a specific version of plotly.js, say 1.2.0:

<head>
               <script src="https://cdn.plot.ly/plotly-1.2.0.min.js"></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.plot().

<script>
	TESTER = document.getElementById('tester');
	Plotly.plot( TESTER, [{
	x: [1, 2, 3, 4, 5],
	y: [1, 2, 4, 8, 16] }], {
	margin: { t: 0 } } );
</script>

Now you can pass Plotly.plot() either the ID of the DIV ("tester") or the DIV DOM element (TESTER).

Webpack user?

If you are a webpack user, you can use plotly.js the same as any other module, but you will see a warning that you are using a built library when webpack builds your bundle. We will keep searching for a way to make this better, but for now, it is equivalent to just adding a <script> tag to your page. If you are using dist/plotly.js, you will need to add <meta charset="utf-8" /> to the <head> of your page (generally a good practice in any case) to ensure some special characters used work correctly.

Hello World Example

Still need help?
Contact Us

For guaranteed 24 hour response turnarounds, upgrade to a Developer Support Plan.