Chartist-js: Improving "How to use plugins" documentation

[sebkkom]

Hello and thank you very much everyone that has contributed for chartist,

I am openning this issue as I'd like to discuss a possible improvement in the plugins documentation:

The "How to use plugins" section starts with _Once you have included a plugin in your project_ and takes it for granted that users know this means downloading the plugin, moving the appropriate files to the appropriate folder and including the scripts in the code. But, to a beginner with bower and the rest (like me, for example), these are not very clear (and I am still not sure I've done everything right). It also gets even more confusing when somebody looks at the tooltip plugin github page and reads bower install chartist-plugin-tooltip --save, assuming this is enough to "include" the plugin.

If you think the section can be improved I would be more than happy to go ahead and make a pull request with some more detailed instructions as written above.

[gionkunz]

Your contribution would be very much appreciated!

[gionkunz]

And I agree this could be explained in much more detail

[swiharta]

Desperately wish I knew how to use the plugins with Chartist in a Webpack + Babel / ES6 build environment. import Chartist from 'chartist' works fine. Then I have no idea how to get Chartist.plugins.ctThreshold into my project. Do you have to use script tags? Chartist.plugins is undefined. Any help much appreciated!

[swiharta]

Had to add import Chartist from 'chartist' to the top of the chartist-plugin-threshold.js file. Getting odd behavior with that one though, threshold seems to get set correctly for the first of multiple charts on the same page, the others have the threshold set to the same "height" on the chart with no relation to the values on the y-axis. Seem likely because I'm drawing multiple charts to the same page.

[rodhoward]

For those that read this thread and still haven't found a usefull reference. Here is what seems to be working for me.

1. install plugin via npm e.g. npm install chartist-plugin-pointlabels --save

2. register plugin with chartist:

   import Chartist from "chartist";
   // some pain points here bar plugin needed it declared on the window :(
   window["Chartist"] = Chartist;
   
   const pointLabels = require("chartist-plugin-pointlabels");
   const barLabels = require("chartist-plugin-barlabels");
   
   pointLabels();
   barLabels();
   

3. use the plugin in your chart

   const chartConfig = {
    plugins: [
      Chartist.plugins.ctPointLabels({
        textAnchor: "middle",
        labelOffset: {
          x: 0,
          y: -10
        },
        labelInterpolationFnc: value => value || ""
      })
    ]
   };
   

[tobycatlin]

I have just hit this problem. I cannot see how to install a plugin and am not using Node.

[BojidarStanchev]

Hey, I know this probably isn't the place, but do you have any idea how to add chartist plugins if I'm using the Retyped.chartist mappings for .Net? You can answer here: https://stackoverflow.com/questions/57790720/how-to-load-and-use-chartist-plugins-when-using-retyped-mappings so we don't spam this issue.

[jeremycherfas]

I'd like to suggest that references to Bower be changed to, perhaps, npm. I installed a plugin with Bower and had an error that was caused by Bower using an old version. The plugin, to its credit, said use npm but I used Bower because that is what Chartist said to use.