[](https://circleci.com/gh/plotly/angular-plotly.js)

[](https://coveralls.io/github/plotly/angular-plotly.js?branch=master)

* [Installation](#installation)

* [Quick start](#quick-start)

* [API](#api-reference)

* [Basic props](#basic-props)

* [Development](#development)

$ npm install angular-plotly.js plotly.js

Using the [angular CLI](https://cli.angular.io/) to start a new project

$ ng new my-project

$ cd my-project

$ npm install angular-plotly.js plotly.js --save

Add the `PlotlyModule` into the main app module of your project

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

import { CommonModule } from '@angular/common';

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

@NgModule({

imports: [CommonModule, PlotlyModule],

...

})

export class AppModule { }

Then use the `<plotly-plot>` component to display the graph

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

@Component({

selector: 'plotly-example',

template: '<plotly-plot [data]="graph.data" [layout]="graph.layout"></plotly-plot>',

})

export class PlotlyExampleComponent {

public graph = {

data: [

{ x: [1, 2, 3], y: [2, 6, 3], type: 'scatter', mode: 'lines+points', marker: {color: 'red'} },

{ x: [1, 2, 3], y: [2, 5, 3], type: 'bar' },

],

layout: {width: 320, height: 240, title: 'A Fancy Plot'}

};

}

You should see a plot like this:

<p align="center">

<img src="example.png" alt="Example plot" width="320" height="240">

</p>

For a full description of Plotly chart types and attributes see the following resources:

* [Plotly JavaScript API documentation](https://plot.ly/javascript/)

* [Full plotly.js attribute listing](https://plot.ly/javascript/reference/)

**Warning**: for the time being, this component may _mutate_ its `layout` and `data` props in response to user input, going against React rules. This behaviour will change in the near future once https://github.com/plotly/plotly.js/issues/2389 is completed.

| Prop | Type | Default | Description |

| ------------------ | ---------------------------- | ------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- |

| `data` | `Array` | `[]` | list of trace objects (see https://plot.ly/javascript/reference/) |

| `layout` | `Object` | `undefined` | layout object (see https://plot.ly/javascript/reference/#layout) |

| `frames` | `Array` | `undefined` | list of frame objects (see https://plot.ly/javascript/reference/) |

| `config` | `Object` | `undefined` | config object (see https://plot.ly/javascript/configuration-options/) |

| `revision` | `Number` | `undefined` | When provided, causes the plot to update _only_ when the revision is incremented. |

| `onInitialized` | `Function(figure, graphDiv)` | `undefined` | Callback executed after plot is initialized. See below for parameter information. |

| `onUpdate` | `Function(figure, graphDiv)` | `undefined` | Callback executed when when a plot is updated due to new data or layout, or when user interacts with a plot. See below for parameter information. |

| `onPurge` | `Function(figure, graphDiv)` | `undefined` | Callback executed when component unmounts, before `Plotly.purge` strips the `graphDiv` of all private attributes. See below for parameter information. |

| `onError` | `Function(err)` | `undefined` | Callback executed when a plotly.js API method rejects |

| `divId` | `string` | `undefined` | id assigned to the `<div>` into which the plot is rendered. |

| `className` | `string` | `undefined` | applied to the `<div>` into which the plot is rendered |

| `style` | `Object` | `{position: 'relative', display: 'inline-block'}` | used to style the `<div>` into which the plot is rendered |

| `debug` | `Boolean` | `false` | Assign the graph div to `window.gd` for debugging |

| `useResizeHandler` | `Boolean` | `false` | When true, adds a call to `Plotly.Plot.resize()` as a `window.resize` event handler |

**Note**: To make a plot responsive, i.e. to fill its containing element and resize when the window is resized, use `style` or `className` to set the dimensions of the element (i.e. using `width: 100%; height: 100%` or some similar values) and set `useResizeHandler` to `true` while setting `layout.autosize` to `true` and leaving `layout.height` and `layout.width` undefined. This will implement the behaviour documented here: https://plot.ly/javascript/responsive-fluid-layout/

To get started:

$ npm install

To see the demo app, run:

$ npm start

To run the tests:

$ npm run test

&copy; 2018 Plotly, Inc. MIT License.

export * from './public_api';

{"__symbolic":"module","version":4,"metadata":{"PlotlyModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":5,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":6,"character":14}],"declarations":[{"__symbolic":"reference","name":"PlotComponent"}],"exports":[{"__symbolic":"reference","name":"PlotComponent"}]}]}],"members":{}},"PlotComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":23,"character":1},"arguments":[{"selector":"plotly-plot","template":"<div #plot [attr.id]=\"divId\" [className]=\"getClassName()\" [ngStyle]=\"style\"></div>","providers":[{"__symbolic":"reference","name":"PlotlyService"}]}]}],"members":{"plotEl":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":31,"character":5},"arguments":["plot"]}]}],"data":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":33,"character":5}}]}],"layout":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":34,"character":5}}]}],"config":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":35,"character":5}}]}],"style":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":36,"character":5}}]}],"divId":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":38,"character":5}}]}],"revision":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":39,"character":5}}]}],"className":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":40,"character":5}}]}],"debug":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":41,"character":5}}]}],"useResizeHandler":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":42,"character":5}}]}],"initialized":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":44,"character":5}}]}],"update":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":45,"character":5}}]}],"purge":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":46,"character":5}}]}],"error":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":47,"character":5}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"PlotlyService"},{"__symbolic":"reference","module":"@angular/core","name":"IterableDiffers","line":56,"character":32},{"__symbolic":"reference","module":"@angular/core","name":"KeyValueDiffers","line":57,"character":32}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"ngDoCheck":[{"__symbolic":"method"}],"getWindow":[{"__symbolic":"method"}],"getClassName":[{"__symbolic":"method"}],"createPlot":[{"__symbolic":"method"}],"createFigure":[{"__symbolic":"method"}],"redraw":[{"__symbolic":"method"}],"updateWindowResizeHandler":[{"__symbolic":"method"}],"dataDifferTrackBy":[{"__symbolic":"method"}]}},"PlotlyService":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":23,"character":1}}],"members":{"__ctor__":[{"__symbolic":"constructor"}],"newPlot":[{"__symbolic":"method"}],"plot":[{"__symbolic":"method"}],"update":[{"__symbolic":"method"}],"resize":[{"__symbolic":"method"}]}}},"origins":{"PlotlyModule":"./src/app/plotly/plotly.module","PlotComponent":"./src/app/plotly/plot/plot.component","PlotlyService":"./src/app/plotly/plotly.service"},"importAs":"angular-plotly.js"}