How to import plotly.js into TypeScript?

Question

I am trying to import plotly.jsinto TypeScript. Plotly.js is installed using npm. In my TypeScript file, I use

import 'plotly.js';

This is normal, but I get an error in the code, for example Plotly.<member>:

error TS2304: Cannot find name 'Plotly'

When i try

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

I get

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

Answer 1

This is done:

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

(referring to index-basic.js, since I only need basic functionality, use index.js for the full library.)

EDIT (February 2018):

Now the preferred way to add the path to the file tsconfig.json, for example:

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

and then import into a file .tslike

import * as Plotly from 'plotly.js';

: core.js, scatter, .

( Angular CLI - Angular 5.2 Typeript 2.7.1)

Answer 2

, plotly.js( Github). Javascript Typescript. :

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

( 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);

, Typescript javascript tsc , -, browserify.

2! , :

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

Answer 3

TS

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

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

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

on't @types , .

plotly.js, plotly.js . , , .. Reaction-plotly + plotly.js ☹️

, React , , - .

, Webpack 4 response-plotly + plotly.js-basic-dist.

:

• - + plotly.js-basic-dist - . ,
• - + CDN
• +

.

, .

...

, , ,

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

FIX

1. @types

   

2. typeRoots tsconfig.json

   

N.B. , , :

, !

---

UPDATE

. - , response-plotly.js "". :

/**
 * 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;

Hide result

react-plotly.js devDependencies, .

Answer 4

npm, , , . typings.

, - . , (npm i -g typings), plotly (typings search plotly). , , Typed. (typings init) (typings i --global --save plotly.js).

--global. . , - , . .

// app.ts
let myPlotlyConfig: PlotlyConfig

Answer 5

plotly.js NPM:

npm install --save plotly.js

, , :

import Plotly from 'plotly.js/lib/core';
Plotly.register([
 require('plotly.js/lib/heatmap'),
 require('plotly.js/lib/bar'),
 require('plotly.js/lib/pie') // can include as many plot types as you want
]);

pllyly lib, :

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

Plotly.newPlot('test', data);

Answer 6

plotly.js basic &

npm, , v1.39.0. plotly.js basic ( scatter, pie bar):

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

tsconfig.json:

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

paths plotly.js-basic-dist , @types/plotly.js, plotly.js-basic-dist. :

• BaseUrl