Using Plotly.js with Angular
Tags: plotly, angular
Published: 2023-06-08 14:17:25

In this lesson, we will go through the steps of integrating Plotly.js with Angular. Plotly.js is an Open Source Graphing Library. At the end of the lesson you should be able to do a simple plot with Plotly.js.

Prerequisite

- Must be familiar with Angular

Create a new angular project called **angular-plotly**. In the command terminal type the following.

```
ng new angular-plotly
```

When prompted “_Would you like to add Angular routing? (y/N)_”, you can type either y or N and hit Enter on the keyboard. When prompted “_Which stylesheet format would you like to use?_”, you can select CSS.

Navigate into the **angular-plotly** directory. In the command terminal type the following.

```
cd angular-plotly
```

Create a new component called plotly-component. In the command terminal type the following.

```
ng generate component plotly-component
```

Open app.component.html ,delete all the contents and add the following line

```
<app-plotly-component></app-plotly-component>
```

Go to [Plotly.js](https://plotly.com/javascript/getting-started/). There will be 3 options:

 - Install from NPM
 - Use CDN link
 - Download Plotly.js

For this demonstration, download Plotly.js.

Copy the downloaded file into the assets folder of your angular project, which is located at **angular-plotly/src/assets**.

Open the **angular.json** file and modify lines 35 and 104 as seen below.

```
"scripts": ["src/assets/plotly-2.14.0.min.js"]
```

If you are having difficulty finding the specific lines to modify, simply search for the keyword scripts. Please note at the time of writing this article the name of the script is **plotly-2.14.0.min.js**. The name of your script may vary. This is the complete code.

```
{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "cli": {
    "analytics": false
  },
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "angular-plotly": {
      "projectType": "application",
      "schematics": {
        "@schematics/angular:application": {
          "strict": true
        }
      },
      "root": "",
      "sourceRoot": "src",
      "prefix": "app",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/angular-plotly",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.css"
            ],
            "scripts": [
              "src/assets/plotly-2.14.0.min.js"
            ]
          },
          "configurations": {
            "production": {
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "500kb",
                  "maximumError": "1mb"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "2kb",
                  "maximumError": "4kb"
                }
              ],
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "outputHashing": "all"
            },
            "development": {
              "buildOptimizer": false,
              "optimization": false,
              "vendorChunk": true,
              "extractLicenses": false,
              "sourceMap": true,
              "namedChunks": true
            }
          },
          "defaultConfiguration": "production"
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "configurations": {
            "production": {
              "browserTarget": "angular-plotly:build:production"
            },
            "development": {
              "browserTarget": "angular-plotly:build:development"
            }
          },
          "defaultConfiguration": "development"
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "angular-plotly:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.spec.json",
            "karmaConfig": "karma.conf.js",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.css"
            ],
            "scripts": [
              "src/assets/plotly-2.14.0.min.js"
            ]
          }
        }
      }
    }
  },
  "defaultProject": "angular-plotly"
}
```

Create a new service called **plotly**. This service will contain the plot functions. In the command terminal type the following.

```
ng generate service plotly
```

Open **plotly.service.ts** and make the following changes.

```
import { Injectable } from '@angular/core';declare let Plotly: any;
```

In **plotly.service.ts** create a new function called **plotLine**. This function accepts 4 arguments. The **_title_** argument is the title of the plot and **_plotDiv_** is the id of the div tag used for displaying the plot. The x and y arrays contain the plot data. This is the complete code.

```
import { Injectable } from '@angular/core';
declare let Plotly: any;@Injectable({
  providedIn: 'root'
})
export class PlotlyService {constructor() { }plotLine(title: string, plotDiv: string, x:number[], y:number[]){           
    let trace = {
      x: x,    
      y: y,   
      type: 'scatter'   
    };
                  
    let layout = {
      title:title
    };
    
    Plotly.newPlot(plotDiv, [trace], layout);     
  }}
```

Open **plotly-component.component.ts** and make the following changes. When the page loads, a straight line will be plotted. Here the title of the plot is “Line Plot”. The id of the div displaying the plot is “plot”. The x and y values are 1,2,3,4,5.

```
import { Component, OnInit } from '@angular/core';
import { PlotlyService } from '../plotly.service';@Component({
  selector: 'app-plotly-component',
  templateUrl: './plotly-component.component.html',
  styleUrls: ['./plotly-component.component.css']
})
export class PlotlyComponentComponent implements OnInit {constructor(private plot:PlotlyService) { }ngOnInit(): void {
    let x:number[] = [1,2,3,4,5];
    let y:number[] = [1,2,3,4,5];
    this.plot.plotLine("Line Plot","plot",x,y);
  }}
```

Open _plotly-component.component.html_ and make the following changes. Here the div with the id **plot** is created.

```
<div id="plot"></div>
```

In the command terminal type the following.

```
ng serve
```

On your browser go to [http://localhost:4200/](http://localhost:4200/). You should see the plot.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ki8k1k0zfc2qyme6wd16.jpg)

This is the end of the lesson. For more information on Plotly.js, check the documentation [Plotly](https://plotly.com/javascript/).