Plotly.js JavaScript Tutorial

What is Plotly.js?

Plotly.js is a high-level, declarative chart library built on top of d3.js and stack.gl. It is highly cutomizable and robust. Additionally, the built-in export options are wonderful. The file size for Plotly.js can be challenging for real-time applications and the learning curve can be steep.

What is Javascript?

Javascript is the base language by which people build charts and websites for the web. There are many additional frameworks that are built on top of Javascript. Learning Javascript is an absolute must for modern web development, particularly when it comes to using a charting library.

Plotly.js JavaScript Code Example

Plotly.js is a high-level, declarative charting library that is built on top of d3.js and stack.gl. It is perfect for creating interactive data visualizations. In this example, we will learn how to create a basic bar chart using Plotly.js. First, ensure you include the Plotly.js library in your HTML file.

<!DOCTYPE html>

<html lang="en">

<head>

   <meta charset="UTF-8">

   <title>Plotly.js Bar Chart Example</title>

   <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>

</head>

<body>

   <div id="myDiv" style="width:600px;height:400px;"></div>

   <script>

       var trace1 = {

           x: ['Category A', 'Category B', 'Category C'],

           y: [20, 14, 23],

           type: 'bar'

       };

       var data = [trace1];

       var layout = {

           title: 'Bar Chart using Plotly.js',

       };

       Plotly.newPlot('myDiv', data, layout);

   </script>

</body>

</html>

This code snippet creates a simple bar chart within the division with id "myDiv". We define data for our bar chart in the `trace1` where the x-axis represents categories, and the y-axis shows the values. We use `Plotly.newPlot` to render the chart in our designated div. Adjust the `x` and `y` values as needed to fit your data. Explore more of Plotly.js to add more interactivity and customize your charts to your liking.

ABOUT EXPLO

Explo, the publishers of Graphs & Trends, is an embedded analytics company. With Explo’s Dashboard and Report Builder product, you can a premium analytics experience for your users with minimal engineering bandwidth.
Learn more about Explo →