Plotly.js Angular Tutorial

What is Plotly.js?

Plotly.js is a high-level, declarative chart library built on top of d3.js and 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 Angular?

Angular is a popular open-source framework developed by Google for building dynamic web applications. It's part of a broader ecosystem that includes tools and libraries designed to work together to enable efficient development of high-quality applications. Angular is known for its robustness, scalability, and ability to create single-page applications (SPAs) that offer a smooth, native-like user experience. Angular has a component-based architecture, enabling great modularity. Additionally, it is great at syncing data between a view and a model. It can have a steep learning curve, but has a great community and high performance.

Plotly.js Angular Code Example

Integrating Plotly.js with Angular allows you to create dynamic and interactive data visualizations within your Angular applications. This example will guide you through setting up a basic line chart using Plotly.js in an Angular component. We'll start from installing necessary packages to displaying the chart.

Step 1: Install Plotly.js and Angular-Plotly.js

First, you need to add Plotly.js and the Angular wrapper for Plotly.js to your project. Run the following commands in your project directory:

npm install plotly.js-dist-min
npm install angular-plotly.js

Step 2: Import the Plotly Module

Next, import the PlotlyModule into your AppModule (app.module.ts) to make it available throughout your application:

import { PlotlyModule } from 'angular-plotly.js';

 declarations: [
   // other components
 imports: [
   // other modules
 providers: [],
 bootstrap: [AppComponent]
export class AppModule { }

Step 3: Creating the Chart Component

Create a new component where your chart will be rendered. For instance, let's create a component named 'line-chart'. You can generate it using Angular CLI:

ng generate component line-chart

In your line-chart.component.ts, define the data and layout for your chart:

import { Component } from '@angular/core';

 selector: 'app-line-chart',
 templateUrl: './line-chart.component.html',
 styleUrls: ['./line-chart.component.css']
export class LineChartComponent {
 public graph = {
   data: [
       { x: [1, 2, 3], y: [2, 6, 3], type: 'scatter', mode: 'lines+markers', marker: {color: 'red'} },
   layout: {title: 'A Simple Line Chart'}

Step 4: Display the Chart in the Component's Template

Edit the line-chart.component.html file to include the Plotly chart component and bind it to your data:

<plotly-plot [data]="" [layout]="graph.layout"></plotly-plot>

Make sure to include the LineChartComponent in the desired parent component or template where you want the chart to be displayed. Now, your Angular application should be able to render a basic line chart using Plotly.js.


By following these steps, you can integrate Plotly.js into your Angular applications to create interactive and dynamic data visualizations. Experiment with different types of charts, data, and configurations to explore the full potential of Plotly.js within your Angular projects.

Explo: The Best Javascript Charting Option on the Market

Looking for the fastest, easiest way to make responsive next-level charts on your website? Reach out to Explo, the market leader in creating responsive charts. With Explo's Report Builder and Editable Sections offerings, you can easily drag-and-drop charts and custom reporting in a matter of minutes, all with just SQL and no-code tools. No need to learn and configure charts, use our highly customizable solution instead.