Shimming plugins from v0.x to work with v1, for ES6 sites

[timstallmann]

Hi all!

I needed to get plugins working on a vue site that is being upgrade to chartist v1, and it turned out to be pretty easy to do, so thought I would leave notes here in case others are in the same situation.

Unfortunately I didn't have time on this project to create a PR for the plugin itself updated to work with v1.

The general approach:

1. Copy plugin code into a new file within your project.
2. Find all references to Chartist.whatever and replace them with imports from the Chartist module. E.g. import {Svg, normalizePadding} from 'chartist';
3. Remove the wrapping functions and convert to an ES6 module (making code changes along the way as necessary, e.g. var => const). The plugin itself should become a function taking options, which returns a function which acts on the chart, e.g.:

const ctAxisTitle = (options = defaultOptions) => ((chart) => {
... // do stuff
});

export { ctAxisTitle };

4. In code that uses the plugin, import it from the file where you defined it. Instantiate the plugin after the chart is defined, using code that looks similar to:

chart = new LineChart(...);
const addAxisTitle = ctAxisTitle({ your options go here });
addAxisTitle(chart);

Here's a gist of the reformatted axis title plugin: https://gist.github.com/timstallmann/53d70a1a57c51c35d370cf53397e6a5f

[Arantiryo]

Thanks so much for posting this, @timstallmann! I am sure it's going to be a big help for anyone trying to use plugins with Chartist versions 1.0 and above.