After a thorough check and comparison, it's confirmed that these files are identical.
If you are working with npm + typescript (+Angular), my recommendation is to utilize the option of npm install plotly.js-dist.
If you're using npm (or not) + javascript, the suggestion is to go with option 3 and use plotly.min.js.
Whether the file is minified or not doesn't matter much as every module gets minified after bundling.
Therefore, it ultimately depends on your discretion to choose the file you need to inspect through the developer tool while debugging.
For quick start options, refer to this link.
- To install via npm:
npm install plotly.js-dist.
- A readily usable plotly.js distributed bundle.
- Incorporates trace modules; more details can be found here
- Alternatively, utilize the plotly.js CDN hosted by Fastly.
- Download the latest release:
plotly.js or plotly.min.js. Further information available here.
The choice between them might vary slightly in how you bundle/deploy your project,
and also consider using definition files such as @types/plotly.js
For additional insights, check out the "Bundle information" section in this readme.
Furthermore, if you're working with Angular, here's an additional option: angular-plotly.js.
This serves as my response to your second query regarding "plotly.js" and its complexities in setup for bundling.
My approach and goal have been:
- Implementing within angular2-seed alongside Angular 4.
- Fully defining each type/interface.
Step 1. Installation of packages.
Modify the command as per @Jesse's suggestion
npm install plotly.js-dist --save
npm install @types/plotly.js --save-dev
npm install @types/d3 --save-dev
Note: @types/d3 is a dependency of @types/plotly.js. If it's unnecessary, remove it from index.d.ts.
Step 2. Renewal of folder to accommodate the definition file.
Rename the folder "plotly.js" to "plotly.js-dist" within "node_modules/@types".
Update - 9/12/2023
This reflects my current environment;
- Windows 11(x64)
- Node v18.17.1
- Angular 13.2.0
My suggested course of action is as follows,
npm i --save plotly.js-dist-min
npm i --save-dev @types/plotly.js-dist-min
This deviates slightly from the official guide.
import { Component, ElementRef, ViewChild, OnInit, AfterViewInit } from '@angular/core';
import * as Plotly from 'plotly.js-dist-min';
@Component({ ... })
export class AppComponent implements OnInit, AfterViewInit {
myData!: Partial<Plotly.PlotData>[];
@ViewChild('chart') div?: ElementRef;
ngOnInit(): void {
this.myData = [
{
x: ['giraffes', 'orangutans', 'monkeys'],
y: [20, 14, 23],
type: 'bar',
},
];
}
ngAfterViewInit(): void {
const element = this.div?.nativeElement;
Plotly.newPlot(element, this.myData);
}
}