Plotly.js Angular Tutorial

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';

@NgModule({
 declarations: [
   // other components
 ],
 imports: [
   // other modules
   PlotlyModule
 ],
 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';

@Component({
 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]="graph.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.

Conclusion

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.