Question: How to import extra plugins?

[saraivinha85]

I import dygraphs in React application with: import Dygraph from 'dygraphs';

Trying to import SuperAnnotations extra plugin with: import SuperAnnotations from 'dygraphs/src/extra/super-annotations';

But webpack complains with this error: ReferenceError: Dygraph is not defined Dygraph.Plugins.SuperAnnotations = (function () { ...

Thanks!

[wiesson]

I have the same question for Plugins! :)

[chneau]

I don't get it. With another package it works well, for example : import 'sweetalert2/dist/sweetalert2.min.css' (In this case it's a css but I can import ANY file from this package)

I compared the package.json of both packages and I'm still clueless.

[ardaplun]

same in here. I hope will found the answer somewhere.

[ikmolbo]

Did anybody manage to solve this?

[kgrosvenor]

Yeah same here, i've tried this as well

var Dygraph = require('dygraphs') require('dygraphs/src/extras/hairlines')

[chiubaca]

doing this plays nicely in my Vue application

import Dygraph from 'dygraphs';
import 'dygraphs/src/extras/smooth-plotter.js';

[anothershubham]

You need to install dygraphs and types/dygraphs npm i dygraphs --save npm i @types/dygraphs --save

Then you need to insert these lines to work with plugins:

require('./../../../../node_modules/dygraphs/src/extras/synchronizer.js'); declare var Dygraph:any;

Change the path in the require string according to your project and you can use the plugin while creating the graph. Sample code from my project which is working:

this.graph = new Dygraph(document.getElementById("graph"), this.data, { legend: 'always', drawPoints: true, animatedZooms: true, showRoller: true, plugins: [ new Dygraph['Plugins'].Crosshair({ direction: "vertical" }), ] })

I got it working in Angular 8.

[ffischer1984]

i think it could be closed, couldn't be?

[pacocom]

This not working in gatsby react

[SRasalParkar]

I want to use extra plugin of dygraph which is Crosshair in my angular application I've tried this -

import Dygraph from 'dygraphs';
import "dygraphs/src/extras/crosshair.js";

but getting error in console

[mirabilos]

Does it work if you do:

import 'dygraphs';
import "dygraphs/src/extras/crosshair.js";

Unfortunately, I have no way to test this myself. Please provide a minimum working example where importing and using Dygraphs itself works, and where just adding the plugin import makes it break.

[SRasalParkar]

Hey @mirabilos ,

I have tried your way -

import 'dygraphs';
import "dygraphs/src/extras/crosshair.js";

it's still not working.

So what is working - The normal dygraph is working just fine. I am rendering large amount of data using it.

But I want to use extra plugins which dygraph provides like crossshair and hairlines.

Not able to use those plugins in the angular as it gives error at runtime. Is there any way to use those plugins in Angular project, If you have any demo for the angular please do share the link.

[mirabilos]

Sanket Rasal dixit:

The normal dygraph is working just fine. I am rendering large amount of data using it.

Could you share a minimal Angular project in which it works without the plugin? I do not use Angular so I cannot reproduce this, as I always just use the tags to load JS libraries.

Thanks, //mirabilos --

Why don't you use JavaScript? I also don't like enabling JavaScript in Because I use lynx as browser. +1 -- Octavio Alvarez, me and ⡍⠁⠗⠊⠕ (Mario Lang) on debian-devel

[mirabilos]

I’ve now fixed this, using the following syntax…

import Dygraph from 'dygraphs';
import "dygraphs/src/extras/crosshair.js";
import 'dygraphs/src/extras/hairlines.js';
import 'dygraphs/src/extras/rebase.js';
import 'dygraphs/src/extras/shapes.js';
import 'dygraphs/src/extras/smooth-plotter.js';
import 'dygraphs/src/extras/super-annotations.js';
import 'dygraphs/src/extras/synchronizer.js';
import 'dygraphs/src/extras/unzoom.js';

… tested with both danvk/dygraphs-es6 and an Angular 6 CLI project.

[srijishks]

I have this issue in Angular 15. Have you guys got a working demo with Angular?

[mirabilos]

Yes, see the import snippet above. Make sure to use the latest version.

[srijishks]

@mirabilos can you please have a look this, why is this not working when I am enabling the import https://stackblitz.com/edit/dygraphs-hl9uc4?file=src%2Fapp%2Fapp.component.ts

[mirabilos]

Looks to me like something is pulling in an older version of dygraphs.

[mirabilos]

ng-dygraphs is pulling in dygraphs 2.1.0 for example.

[srijishks]

Sorry I had to clean up some of the unwanted node modules. the ng-dygraphs wasn't using at all. Can you please have a look again. The Angular version also updated to 17

[mirabilos]

Hmm, weird. When I add…

console.log(Dygraph.VERSION);
console.log(Dygraph._require);

… then the correct things are output (2.2.1 and ƒ require(), respectively).

But when I enable one of the extras…

synchronizer.js:272
Error: Dygraph._require is undefined

That is, incidentally, the penultimate line…

Dygraph._require.add('dygraphs/src/extras/synchronizer.js', /* exports */ {});

… while the earlier use in the head…

var Dygraph; 
if (window.Dygraph) {
  Dygraph = window.Dygraph;
} else if (typeof(module) !== 'undefined') {
  Dygraph = require('../dygraph');
  if (typeof(Dygraph.NAME) === 'undefined' && typeof(Dygraph.default) !== 'undefined')
    Dygraph = Dygraph.default;
}

… hmm. Wait… this is a relative import. But…

import 'dygraphs/dist/extras/synchronizer.js';

… fails even earlier. Huh.

How challenging. I know this worked. tests Yes, the syntax from 2023 still works with v2.2.1 in an ng6 cli project.

I don’t know this Stackblitz site. It seems like it somehow breaks imports or doesn’t use the correct bundles or something.

import 'dygraphs/src-es5/extras/synchronizer.js';

gives the same require error but in white atop instead of in the console, and…

import 'dygraphs/dist/extras/synchronizer.js';

… shows the following errors in the same place:

Import error, can't find files:
./bars
./datahandler
../dygraph-layout
./default
./dygraph-utils
./dygraph-tickers
./dygraph-interaction-model
./dygraph-canvas
./dygraph-default-attrs
./dygraph-options-reference
./dygraph-layout
./dygraph-options
./iframe-tarp
./datahandler/default
./datahandler/bars-error
./datahandler/bars-custom
./datahandler/default-fractions
./datahandler/bars-fractions
./datahandler/bars
./plugins/annotations
./plugins/axes
./plugins/chart-labels
./plugins/grid
./plugins/legend
./plugins/range-selector
./dygraph-gviz
../dygraph-utils
../dygraph-interaction-model
../iframe-tarp

The Dygraph = require('../dygraph'); in line 48 should obtain the same Dygraph object as the Angular component itself imported. I suggest you take a js IDE or something debugger, set a breakpoint just after that line, and check which object is actually returned and saved in the closure-local Dygraph variable in the extra.

[mirabilos]

Even better: if I set a breakpoint on that call to Dygraph._require.add(…) in Firefox F12, then reload, it works.

I guess something is broken with Stackblitz. Does this not work from the command line (ng build or something)?