Should I install plotly.js or plotly.js-dist via npm?

Question

There are two packages plotly.js and plotly.js-dist.

What is the difference between them and which one should I use?

Moreover on npmjs.org on plotly.js page it says in order to install plotly.js one have to run:

npm install plotly.js-dist

I mean, I can see that plotly.js is a project with many files, and that plotly.js-dist is a bundle, just one file. But I don't get why it is distributed like this.

Especially, that plotly.js-dist is not minified, and in plotly.js there is minified file, which I guess can be used in order to import this library to one's project.

Swingle

Answer 1

These files are same. I checked and compared.

If you using npm + typescript(+Angular), I recommend to use option , npm install plotly.js-dist.
If you using npm(or not) + javascript, I recommend to use option 3 with plotly.min.js.

Don't mention minified or not. Because after bundling every module minified.
So, it's up to you which file need to see via developer tool while debugging.

Here is Quick start options.

1. Install with npm : npm install plotly.js-dist.

• Ready-to-use plotly.js distributed bundle.
• Contains trace modules, visit here

2. Use the plotly.js CDN hosted by Fastly.
3. Download the latest release : plotly.js or plotly.min.js. More info here.

It doesn't matter what you choose but it is different slightly how to bundle/deploy your project.
And using definition file. @types/plotly.js
For further information from here, check Bundle information section.

Also, if you work with angular? here is another option : angular-plotly.js.

---

This is my answer for your second phrase.
"plotly.js" is hard to set it up for bundling. Here is what I've done with this and my goal was:

1. Working on angular2-seed with Angular 4.
2. Fully defined each type/interface.

Step 1. Install package.

Change command, thanks @Jesse

npm install plotly.js-dist --save
npm install @types/plotly.js --save-dev
npm install @types/d3 --save-dev

Note: @types/d3 is dependency of @types/plotly.js. but if you don't need it, remove it from index.d.ts.

Step 2. rename folder to use definition file.

Rename folder "plotly.js" to "plotly.js-dist" in "node_modules/@types".

Update - 9/12/2023

This is my env;

• windows 11(x64)
• Node v18.17.1
• Angular 13.2.0

I recommend as below,

npm i --save plotly.js-dist-min
npm i --save-dev @types/plotly.js-dist-min

This is little bit different between 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);
  }
}

Grisgris

You'll want to install your types as a devDependency with --save-dev or -D. NOT in dependencies with --save. Also renaming folders in node_modules is a bad idea, unless you're sure it's a local, personal project. It's just very easy to end with a package that's out of sync across devices. – Ranchman

How do you do this if you are using Yarn PNP setup? – Cawley

Sorry @Zaffer, I don't have much experience with Yarn PNP, so I can't provide you with additional information. – Grisgris