Plotly.js – Interactive JavaScript Charts

Plotly.js is a high-level, open-source JavaScript library for creating interactive, publication-quality charts and dashboards. It’s built on D3.js and Stack.gl, providing smooth interactivity, zooming, hovering, and 3D charts.

Getting Started

1. Include Plotly.js

Via CDN:

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

Or install via npm:

npm install plotly.js-dist

2. HTML Container

Plotly charts render inside a <div>:

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

Creating a Basic Plot

Example: Line Chart

<script>
const trace = {
    x: ['Jan', 'Feb', 'Mar', 'Apr', 'May'],
    y: [10, 15, 13, 17, 21],
    type: 'scatter', // 'scatter' for line/point charts
    mode: 'lines+markers', // lines, markers, or both
    name: 'Sales',
    line: { color: 'blue' }
};

const data = [trace];

const layout = {
    title: 'Monthly Sales Data',
    xaxis: { title: 'Month' },
    yaxis: { title: 'Revenue' }
};

Plotly.newPlot('myPlot', data, layout);
</script>

Supported Chart Types

Type	Description
Scatter	Line and point plots
Bar	Vertical or horizontal bars
Pie	Percentage visualization
Bubble	Scatter with varying marker size
Box	Show distribution of data
Heatmap	Color-coded 2D matrix
Contour	Smooth gradient lines from 2D data
3D Scatter	Interactive 3D point charts
3D Surface	3D surface plots
Radar / Polar	Circular data visualizations

Customizing Charts

Colors & Markers

line: { color: 'red', width: 2 },
marker: { size: 10, color: 'green' }

Layout Options

layout = {
  title: 'My Chart',
  xaxis: { title: 'X Axis' },
  yaxis: { title: 'Y Axis', range: [0, 50] }
};

Hover & Tooltips

hovermode: 'closest' // Shows data on hover

Annotations

annotations: [{
  x: 3,
  y: 17,
  text: 'Peak Value',
  showarrow: true,
  arrowhead: 2
}]

Updating Charts Dynamically

Plotly.update('myPlot', { y: [[12, 18, 14, 20, 25]] });

Or append new data:

Plotly.addTraces('myPlot', { x: ['Jun'], y: [23], type: 'scatter' });

Advantages of Plotly.js

• Fully interactive charts with zoom, pan, and hover
• Supports 2D and 3D visualizations
• Great for dashboards and data-heavy applications
• Works seamlessly with JSON, arrays, and data from APIs
• Open-source and well-documented

When to Use Plotly.js

• Interactive dashboards
• Scientific and statistical visualizations
• Complex data that requires zooming, tooltips, or 3D representation
• Projects requiring quick integration with JSON or API data