javascript - TypeError: Chartist.plugins.legend is not a function -
i'm have started use meteor
build tool chartist
represent data.
i have java script legend template (source internet)
template.js
function drawbarchart() { new chartist.bar('.legendchart1', { labels: ['first quarter of year', 'second quarter of year', 'third quarter of year', 'fourth quarter of 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 corresponding import statement as
import {legend} 'chartist-plugin-legend';
i have used similar import statements working expected.
import {ctthreshold} 'chartist-plugin-threshold'; import {ctbarlabels} 'chartist-plugin-barlabels'; import {ctpointlabels} 'chartist-plugin-pointlabels';
there similar error tooltip plugin import "typeerror: chartist.plugins.tooltips not function"
.
corresponding npm statements 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
can me in fixing issue?
duplicate post of mine stackoverflow issue 40834462
i not using meteor mileage may vary using angular2 , getting similar errors. answer me use legend plugin initialized first , use in chartist plugin definition have done. feels hacky working...
import * chartist 'chartist'; import * mylegend 'chartist-plugin-legend'; constructor(){ var tester = new mylegend(); //without line, 'chartist.plugins undefined' } .... in method ngoninit or something... new chartist.bar('.ct-chart', { labels: ['jan', 'feb', 'mar', 'apr', 'may', 'jun', 'jul', 'aug', 'sep', 'oct', 'nov', 'dec'], series: [ [1,2,3,4], [1,2,3,4], [1,2,3,4] ] }, { plugins: [ chartist.plugins.legend({ legendnames: ['blue pill', 'red pill', 'purple pill'] }) ] });
Comments
Post a Comment