Skip to content

Commit 5d7e90f

Browse files
committed
trying to improve PlotlyViaWindowModule docs
1 parent 8bc6e1e commit 5d7e90f

File tree

1 file changed

+27
-2
lines changed

1 file changed

+27
-2
lines changed

README.md

+27-2
Original file line numberDiff line numberDiff line change
@@ -83,6 +83,8 @@ For a full description of Plotly chart types and attributes see the following re
8383
* [Plotly JavaScript API documentation](https://plot.ly/javascript/)
8484
* [Full plotly.js attribute listing](https://plot.ly/javascript/reference/)
8585

86+
The `plotly.js` is bundled within the angular code. To avoid this, please read [how to customize the plotlyjs bundle](#customizing-the-plotlyjs-bundle) below.
87+
8688
## API Reference
8789

8890
### Basic Props
@@ -172,7 +174,29 @@ export class AppModule { }
172174

173175
### Plotly Via Window Module
174176

175-
If you want to use a [different precompiled bundle](https://github.com/plotly/plotly.js/blob/master/dist/README.md#partial-bundles) or if you wish to [assemble you own customized bundle](https://github.com/plotly/plotly.js#modules), you can use `PlotlyViaWindowModule` to force the use of `window.Plotly` object. You can add the script via tag `<script>` direct on your code, or add it as a [global script on angular.json](https://github.com/angular/angular-cli/wiki/stories-global-scripts#global-scripts).
177+
`plotly.js` can be added as a [global script on angular.json](https://github.com/angular/angular-cli/wiki/stories-global-scripts#global-scripts) to avoid it beingb bundled into the final project's code. To make this happen, you must first add `plotly.js` path into `angular.json` file as shown below:
178+
179+
```json
180+
// angular.json
181+
{
182+
"projects": {
183+
"project-name": {
184+
"architect": {
185+
"build": {
186+
"options": {
187+
"scripts": [
188+
"node_modules/plotly.js/dist/plotly.min.js" // add this
189+
]
190+
}
191+
}
192+
}
193+
}
194+
}
195+
}
196+
```
197+
198+
This will include `plotly.js` into the `vendor.js` file generated by angular CLI build process, and `plotly.js` library will be loaded before angular and your project's code. The `window.Plotly` will be available. Thus, you must use `PlotlyViaWindowModule` module to force `angular-plotly.js` to use `window.Plotly` object:
199+
176200

177201
```typescript
178202
import { NgModule } from '@angular/core';
@@ -187,6 +211,7 @@ import { PlotlyViaWindowModule } from 'angular-plotly.js';
187211
export class AppModule { }
188212
```
189213

214+
If you want to use a [different precompiled bundle](https://github.com/plotly/plotly.js/blob/master/dist/README.md#partial-bundles) or if you wish to [assemble you own customized bundle](https://github.com/plotly/plotly.js#modules), you can use `PlotlyViaWindowModule` to force the use of `window.Plotly` object as shown above.
190215

191216
## Development
192217

@@ -210,4 +235,4 @@ $ npm run test
210235

211236
## License
212237

213-
&copy; 2018 Plotly, Inc. MIT License.
238+
&copy; 2019 Plotly, Inc. MIT License.

0 commit comments

Comments
 (0)