TypeError: Chartist.plugins.legend is not a function

[PuneethReddyV]

I'm using meteor build tool and chartist plugins to represent my data. I have java script for legend template got from internet as follows

Template.js

function drawBarChart() {
     new Chartist.Bar('.legendChart1', {
         labels: ['First quarter of the year', 'Second quarter of the year', 'Third quarter of the year', 'Fourth quarter of the year'],
         series: [
                { "name": "Money A", "data": [60000, 40000, 80000, 70000] },
                { "name": "Money B", "data": [40000, 30000, 70000, 65000] }
         ]
      }, {
           plugins: [
               Chartist.plugins.legend()
           ]
      });
};
Template.legendTemplate.rendered = function(){
  drawBarChart();
}

HTML

<template name="legendTemplate">
    <div class="legendChart1">
    </div>
</template>

And a corresponding import statement as import {legend} from 'chartist-plugin-legend';

I have used similar import statements which are working as expected.

import {ctThreshold} from 'chartist-plugin-threshold';
import {ctBarLabels} from 'chartist-plugin-barlabels';
import {ctPointLabels} from 'chartist-plugin-pointlabels'; 

There is a similar error for tooltip import too as "TypeError: Chartist.plugins.tooltips is not a function" . import {tooltip} from 'chartist-plugin-tooltips'

Corresponding NPM statements I have used.

meteor npm install --save chartist
meteor npm install --save chartist-plugin-barlabels
meteor npm install --save chartist-plugin-threshold
meteor npm install --save chartist-plugin-pointlabels
meteor npm install --save chartist-plugin-tooltips

Please help me to plot the bar chart. Thank you inadvance.

[SpaceK33z]

Does import legend from 'chartist-plugin-legend'; work? If not, could you try import * as legend from 'chartist-plugin-legend';?

[PuneethReddyV]

I have tried both the options, none of the is working. This is a similar issue to #21. Not sure how to make a import statement for legend on the package.

[tarekis]

Correct me if i'm wrong but isn't that ES6 export/import syntax? And i haven't seen any ES6 export statements in the plugin.. just a thought on this.

[PuneethReddyV]

That import statement is from meteor . Which is very similar to ES6. As mentioned above this import statement is not working only for two plugins(legend, tooltips) where as it works for others(threshold, barlabels, pointlabels).

[SpaceK33z]

Meteor probably uses CommonJS with compatibility for ES6 modules. In this case, the plugin returns Chartist as you can see here: https://github.com/CodeYellowBV/chartist-plugin-legend/blob/master/chartist-plugin-legend.js#L11.

This is a bit weird. We could change this to return the plugin instead. That would be a breaking change btw. A PR is welcome for this.

[PuneethReddyV]

Thank you for that effort. Would it be possible for you to give a file which have fixes. So that I can wrap it my project?

[tarekis]

The returning of chartist might in fact be the source of this error.

According to OP, this occurs for chartist-plugin-legend and chartist-plugin-tooltips, whereas chartist-plugin-barlabels, chartist-plugin-pointlabels and chartist-plugin-threshold do not throw any Errors.

While chartist-plugin-legend and chartist-plugin-threshold return Chartist, the other ones do not, as you can se here:

chartist-plugin-legend chartist-plugin-tooltips

chartist-plugin-barlabels chartist-plugin-pointlabels chartist-plugin-threshold

Why isn't really obvious to me right now, as all export functionalities seem to use Chartist, but this seems to be the problem.

[PuneethReddyV]

Can you provide me a piece of advice to overcome this issue?

[tarekis]

@PuneethReddyV I never really worked with meteor, so i can't really reconstruct or test anything right now. AFAIK all you can try is to refactor the plugin's structure to the structure the working ones use.

[PuneethReddyV]

@tarekis Is there a alternative plugin(s) which can be achieve similar functionalities?

[tarekis]

I am a developer not a plugin registry 😛

[tarekis]

Will investigate and test shortly.

[sanmai-NL]

@tarekis, what’s the status?

[tarekis]

@sanmai-NL I started looking into this, but I basically have no time on my hands because of work and other stuff I have to do really and this is probably gonna be a complete rewrite. Might be able to squeeze some time out for this this weekend.

[MansiSaini]

A bit late to the party but if you import it using ES6 format:import legend from 'chartist-plugin-legend, then in chartist options object you can say:plugins: [ legend() ] and that worked for me!