Plotly

You will create an interactive JavaScript chart with Plotly by binding data, layout, and configuration to a page element.

What it is

Plotly.js is a browser charting library that turns JavaScript objects into interactive charts. The mental model is simple: a chart is made of data, layout, and config. Data is an array of traces, where each trace describes one series or mark, such as a line, bar, or scatter point. Layout controls titles, axes, legends, margins, and other visual structure. Config controls behavior, such as responsiveness, toolbar buttons, and export options. Related terms include trace, xaxis, yaxis, hovertemplate, and responsive.

Why it matters

• Users can hover, zoom, pan, and inspect values without custom event code.
• Charts can update when data changes, making them useful for dashboards.
• Plotly supports many chart types, including line, bar, scatter, heatmap, and 3D.
• Layout options make charts easier to read with titles, axis labels, and legends.
• Responsive configuration helps charts fit different screen sizes.

Syntax or steps

The smallest useful pattern is to include Plotly, create a container element, and call Plotly.newPlot.

1. Load the Plotly script before your chart code.
2. Add an element with an id, such as chart.
3. Build a data array with one or more trace objects.
4. Build a layout object for titles and axes.
5. Call Plotly.newPlot(container, data, layout, config).

Example

<div id="chart"></div>
<script src="https://cdn.plot.ly/plotly-2.35.2.min.js"></script>
<script>
Plotly.newPlot('chart', [{
  x: [1, 2, 3, 4],
  y: [10, 15, 13, 17],
  type: 'scatter',
  mode: 'lines+markers',
  name: 'Sales'
}], {
  title: 'Monthly Sales',
  xaxis: { title: 'Month' },
  yaxis: { title: 'Units' }
}, {
  responsive: true
});
</script>

Part-by-part explanation

The data array contains one trace. The x and y arrays must have matching lengths. The type property selects the chart type, and mode tells Plotly to draw both lines and markers. The name property appears in the legend. The layout object adds a chart title and axis titles. The config object makes the chart resize when the browser window changes. Finally, Plotly.newPlot('chart', data, layout, config) renders the chart into the element whose id is chart.

Common mistakes

• Calling Plotly before the container exists. Put the script at the end of body or wait for the DOM to load.
• Passing a single object instead of an array. data must be an array, even for one trace: [{ y: [1, 2, 3] }].
• Mismatched x and y lengths. If both are provided, each point needs one x value and one y value.
• Using a class selector as the container. Plotly.newPlot expects an element or an id string, not .chart.

When to use it

Plotly is a strong choice when you need built-in interactivity and many chart types quickly. For very small, simple charts, a lighter library may be enough.

Practice

Guided exercise: Create a bar chart with x: ['A', 'B', 'C'] and y: [4, 7, 2]. Set type: 'bar' and give the chart a title.

Challenge: Add a second trace named Target with x: ['A', 'B', 'C'], y: [5, 5, 5], and type: 'scatter'. Expected output: a bar chart with a horizontal target line and a legend showing both series.

Quick check

Question: Why is Plotly.newPlot('chart', [{ y: [1, 2, 3] }]) valid even without a layout or config?

Answer: Layout and config are optional. Plotly uses default axes, margins, and toolbar settings when they are omitted.

Summary

Plotly charts are built by separating what to show (data), how to arrange it (layout), and how it should behave (config). This object-based model makes it easy to create interactive JavaScript charts without writing low-level drawing code.