Error: "legend" plugin is not defined - cannot use any of the default plugins?

[tyronedougherty]

After installing with NPM, and using the ES6 import of tauCharts like so:

 import tauCharts from 'taucharts';

For some reason I cannot use any of the provided default plugins? It doesn't seem any of them are registered in the dist/taucharts.js file (which is defined as the main in package.json)? But they are possibly combined into the dist/taucharts.min.js file (which cannot be imported if you're using TypeScript)?

If I attempt to use one of the built in plugins (such as legend):

plugins: [
        tauCharts.api.plugins.get('legend')(),
      ],

I get the following error in the console:

Error: "legend" plugin is not defined

Any solutions on how to fix this?

[vladminsky]

@tyronedougherty the dist/taucharts.js gives only basic taucharts core. You have to import plugins explicitly from dist/plugins/ folder to use them.

[tyronedougherty]

Ah I see. Are there any typescript definitions for the plugins?

From what I can gather this project is a bit of a mix of typed and non typed files?

[alexanderby]

Taucharts have a type definition in a separate file, it was written for Taucharts v1 and updated a little bit. There are no definitions written for separate plugins as modules, it can be used this way:

import Taucharts from 'taucharts';
import 'taucharts/dist/plugins/tooltip';

const chart = new Taucharts.Chart({
    // ...
    plugins: [
        Taucharts.api.plugins.get('tooltip')(),
    ],
});

So currently both ways of utilizing plugins work: using Taucharts registry and using modern ES2015 imports.

To make type definition work for ES2015 imports and for usage as global objects it should be updated like this:

declare namespace Taucharts {
    namespace Plugins {
        namespace Tooltip { }
        function Tooltip(tooltipSettings?: {
            fields?: string[];
            escapeHtml?: boolean;
            // ...
        }): {
            init: any;
            destroy: any;
            // ...
        }
    }
}
declare module 'taucharts' {
    export = Taucharts;
}
declare module 'taucharts/dist/plugins/tooltip' {
    export = Taucharts.Plugins.Tooltip;
}

Here is an example of a type definition that works this way.

JS bundler should also be configured to generate global namespaces in UMD definitions like Taucharts.Plugins.Tooltip (though maybe nobody would use it this way nowadays).

So, I would suggest some changes to make it look less confusing:

• Make only one way to utilize plugins: via registry or using imports.
• Restructure the project so that plugins could be utilized from taucharts/plugins/tooltip path (remove dist).
• Generate taucharts and taucharts/plugins/* as ES2015 modules, declare module in package.json (this package cannot be used in Node.js, so there should be no problems with CommonJS require).
• Generate a separate full ES5 bundle in UMD format like taucharts/full.

[tyronedougherty]

I like this suggestion, as unfortunately in its current state I've had to cease working with TauCharts in our teams project given the difficulty of integration with a strictly enforced TypeScript environment.

I don't have the time to perform this work, but if someone else were to get around to it someday I would be greatly appreciative! :) TauCharts in a javascript environment is very easy to use.