Using Plotly in Angular2-Meteor Project


I am trying to import and use Plotly.js in my angular2-meteor project. I got it working by adding plotly.js in the public folder and adding a script tag like this:

 loadScript(file, callback){
        var script = document.createElement("script");
        script.type = "text/javascript";
        script.src = file;
        script.onload = callback;

And just declaring Plotly: declare var Plotly: any;
However this feels very un-meteor/un-angular-like.

So then I found out there is a Plotly npm package. However I can’t figure out how to use it. The readme says to use require:

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

But require is not recognized, and adding aramk:requirejs gives conflicts.

any ideas?


Hi, I am facing the exact same issue (though I don’t think this is related to angular, only to Meteor). I am trying to import plotly into a file in the imports folder.
I tried import plotly from 'plotly.js' and many other combination, without success…

Did you find another solution ?


This is a Blaze/Plotly thread which may help:


Thanks for the quick answer. However the proposed answer looks more like a hack (loading plotly.js from the CDN). I think the issue comes from the plotly npm package itself, that is meant for server only. But isn’t the Meteor import system meant to handle this situation ?


Honestly? I don’t know - I use Highcharts :slight_smile:

You’ll be able to import the code, but if the code’s not designed for the browser there’s no guarantee it’ll work.


Hi, I still can’t get that to work. I tried to download the js file directly, but I can’t get that to work either… Is there a way to load manually libs ? Only answer I found is “build a Meteor package with your bare hands”…


Hi ericburel, I didn’t figure out how to use the Plotly NPM package on the client. Someone did recently upload typings for Plotly which might improve importing. See:

Haven’t taken the time to try it myself though.

In my current project I am actually just loading it from the CDN. This is my index.html:

  <link href="" rel="stylesheet">
  <script src=""></script>
  <script src="/js/web-animations.min.js"></script>
  <script type="text/javascript" src=""></script>
  <base href="/">



It seems that the correct solution is import * from 'plotly.js' (it does work with other packages, such as crossover for instance), in addition to the typings file you suggested. However, there seems to be a weird bug with graceful-fs that makes the install impossible.
So, so far, CDN is the way. It is not such a terrible solution, since we still have good typings.