How to import plotly.js into TypeScript?

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

    enter image description here

  2. Add typeRoots to tsconfig.json

    enter image description here

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: enter image description here

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.


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

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)

Tags:

Typescript

Plotly

Recent Posts