How to import plotly.js into TypeScript?

Question

I'm trying to import plotly.js into TypeScript. Plotly.js is installed using npm. In my TypeScript file I use

import 'plotly.js';

It's OK but I'm getting error on code like Plotly.<member>:

error TS2304: Cannot find name 'Plotly'

When I try

import Plotly = require('plotly.js');

I'm getting

error TS2307: Cannot find module 'plotly.js'.

Answer 1

There is a Definitely Typed version available for plotly.js (Github link). This allows you to use the plain Javascript version inside Typescript. Follow these steps to setup your environment:

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

Then in your code you can do the following (example taken from Github):

import * as Plotly from 'plotly.js';

const data: Plotly.BarData[] = [
  {
    x: ['giraffes', 'orangutans', 'monkeys'],
    y: [20, 14, 23],
    type: 'bar'
  }
];

Plotly.newPlot('test', data);

Finally you need to convert the Typescript to javascript with tsc and prepare the code to be included in you webpage with browserify.

This also works now with ionic 2! Make sure you manually add the following packages:

npm install --save glslify
npm install --save mapbox-gl

Answer 2

Ended up with:

declare function require(moduleName: string): any;
var Plotly = require('plotly.js/lib/index-basic.js');

(Referring to index-basic.js as I need just the basic functionality, use index.js for the full library.)

EDIT (Feb 2018):

The preferred way now is adding path into tsconfig.json file, like this:

"compilerOptions": {
    "paths": {
        "plotly.js": [
            "../node_modules/plotly.js/lib/core.js"
        ]
    }
}

and then import in .ts file like

import * as Plotly from 'plotly.js';

Note: in the path I included only core.js, which contains scatter graphs, you can import other graphs as you need.

(I'm using it with Angular CLI - Angular 5.2 and Typesript 2.7.1)

Answer 3

TS support

npm install --save-dev @types/plotly.js`

or

yarn add --dev @types/plotly.js`

and

import { PlotData } from "plotly.js"; // or whatever you need

⚠️Don't install @types in dependencies since they are used exclusively for development purposes.

Problem

Since you add types for plotly.js, you expect to import stuff from plotly.js instead of a specific module. This is all good until you want to use it with react i.e. react-plotly + plotly.js ☹️

I know you didn't mention React explicitly, but I figured you or anyone else with a similar issue might find this useful.

I am not sure about your bundling approaches, however, I'm using Webpack 4 and currently investigating a react-plotly + plotly.js-basic-dist combination.

Possible combinations are:

• react-plotly + plotly.js-basic-dist – my choice. You can add more bundles if needed
• react-plotly + CDN
• react-plotly + custom bundle

More about customising plotly bundles.

This brings the bundle size down significantly and the sun shines upon us once again.

BUT...

Since this approach will require a factory and custom dist, these, as of this writing, don't have types

import Plotly from "plotly.js-basic-dist";
import createPlotlyComponent from "react-plotly.js/factory";
const Plot = createPlotlyComponent(Plotly);

FIX

1. Create a @types folder

   

2. Add typeRoots to tsconfig.json

   

N.B. The following approach did fix the types for the above imports, but I still have a failing compilation, which I didn't manage to fix following the accepted answer:

Hope you have a better experience!

---

UPDATE

I fixed the compiling issue. It was because react-plotly.js was being bundled in the 'dependencies`. For my case vendor deps are handled like this:

/**
 * Given an array of files this will produce an object which contains the values for the vendor entry point
 */
function makeVendorEntry(config) {
    const packageJson = require('../package.json');
    const vendorDependencies = Object.keys(packageJson['dependencies']);

    const vendorModulesMinusExclusions = vendorDependencies.filter(vendorModule =>
        config.mainModules.indexOf(vendorModule) === -1 && config.modulesToExclude.indexOf(vendorModule) === -1);

    return vendorModulesMinusExclusions;
}

exports.makeVendorEntry = makeVendorEntry;

Instead I moved react-plotly.js to the devDependencies and it works fine now.

Answer 4

Types for plotly.js basic & Co.

You can also use types together with the partial npm bundles like basic or cartesian, starting in v1.39.0. Example for plotly.js basic (contains scatter, pie and bar):

npm i plotly.js-basic-dist
npm i -D @types/plotly.js

Add the following in tsconfig.json:

"compilerOptions": {
  // make aliases absolute imports relative to the project root
  "baseUrl": "./",                
  "paths": {
    "plotly.js-basic-dist": [
      "node_modules/@types/plotly.js"
    ]
  }
}

Above paths config just maps your imported plotly.js-basic-dist package to those types defined in @types/plotly.js, so you can use them with plotly.js-basic-dist. More Infos:

• baseUrl
• paths

Answer 5

If the npm library you are importing does not provide type declarations itself, you'll have to import them yourself. The preferred tool is typings.

For plotly, it seems someone already made a declaration file. So once you have typings installed (npm i -g typings) you can search for the type declaration of plotly (typings search plotly). You'll see that there is a declaration file available on Definitely Typed. After you initialize typings for your project (typings init), you can install the declaration file (typings i --global --save plotly.js).

Notice the --global. This specific declaration file is a global declaration file. This means that you don't have to import any types, as the types are available everywhere in your project. Eg.

// app.ts
let myPlotlyConfig: PlotlyConfig