Using plugins

[mivade]

Is it possible to use plugins with this? So far I have not been able to see how, although I am far from a Javascript expert. In particular, I would really like to be able to use the axis title plugin.

[eoinmurray]

+1

[jsnmoon]

I'd be interested in this as well!

[hilary-L]

I've sort of got this working. What I did was to create a utility file in my react folder "ChartistUtils" (the name doesn't really matter though). Then in that utility file I imported the main Chartist package, which I had installed in my project via npm. I then included a function for the plugin, and exported the function.

In my react component where I have my chart, I imported the new utility file and included it as a plugin. I've attached two files to show my code. I just tried this with the sample line point function...

This is a portion of my component:

import React from 'react';
import Chartist from 'chartist';
import ChartistGraph from 'react-chartist';
import ctPointLabels from '../../utils/ChartistUtils.js';

…

render() {

        // Chart data is set earlier in render function, below just shows the options 
             where I included the plugin

        let lineChartData = {
            labels: labels,
            series: [distances]
        };

        let lineChartOptions = {
            lineSmooth: Chartist.Interpolation.none(),
            low: 0,
            showArea: true,
            high: distances[distances.length - 1] * 1.5,
            width: '100%',
            height: '400px',
            axisX: {
                showGrid: false,
                showLabel: false,
                offset: 0
            },
            axisY: {
                showGrid: false,
                showLabel: false,
                offset: 0
            },
            plugins: [
                ctPointLabels({
                    textAnchor: 'middle'
                })
            ]
        };

        return (
            <div className="chart-container">
                <ChartistGraph className="chart distance" data={lineChartData} options={lineChartOptions} type={'Line'} />
            </div>
        )
    }
});

export default DistanceChart;

and this is the utility file:

import Chartist from 'chartist';

function ctPointLabels(options) {
  return function ctPointLabels(chart) {
    var defaultOptions = {
      labelClass: 'ct-label',
      labelOffset: {
        x: 0,
        y: -10
      },
      textAnchor: 'middle'
    };

    options = Chartist.extend({}, defaultOptions, options);

    if(chart instanceof Chartist.Line) {
      chart.on('draw', function(data) {
        console.log(data);
        if(data.type === 'point') {
          data.group.elem('text', {
            x: data.x + options.labelOffset.x,
            y: data.y + options.labelOffset.y,
            style: 'text-anchor: ' + options.textAnchor
          }, options.labelClass).text(data.value.y);
        }
      });
    }
  }
}

export default ctPointLabels;

[nhagen]

This is not an issue with react-chartist, but an issue with the plugins themselves--rather than change this project, the plugin repository owners should be writing the plugins so they export their core functions (like above).

The options.plugins array works the same in this wrapper as it does in vanilla chartist, so you can use it the same, you just have to get the plugin object from a module instead of from the Chartist.plugins object.

[ambroiseRabier]

Thanks to your work hilary-L, i could implement chartist-zoom on a ES6 React project, here is the code for anyone that need it:

You need an XY data array like in the zoom example in http://gionkunz.github.io/chartist-js/plugins.html or it won't find axis.bounds.max of AxisX.

http://pastebin.com/Ah1tuwkh

[iamsoorena]

how it's not implemented yet?
what is chartist js without it's plugins?

[shortcircuit3]

Any update here?

[fraserxu]

Sorry I don't have time to look at a complete implementation yet. Please refer to the comment above and free feel to create a pr.

[chrisdostert]

in the case of chartist-plugin-axistitle, it exports itself in several ways based on environment it's used in. If used in an environment supporting module.exports (such as create react app) you can just load it like any js module

import chartistPluginAxisTitle from 'chartist-plugin-axistitle'

[guygrinberger]

I was wondering if theres a more elegant way to use plugins by now?

[Daniyal857]

I've sort of got this working. What I did was to create a utility file in my react folder "ChartistUtils" (the name doesn't really matter though). Then in that utility file I imported the main Chartist package, which I had installed in my project via npm. I then included a function for the plugin, and exported the function.

In my react component where I have my chart, I imported the new utility file and included it as a plugin. I've attached two files to show my code. I just tried this with the sample line point function...

This is a portion of my component:

import React from 'react';
import Chartist from 'chartist';
import ChartistGraph from 'react-chartist';
import ctPointLabels from '../../utils/ChartistUtils.js';

…

render() {

        // Chart data is set earlier in render function, below just shows the options 
             where I included the plugin

        let lineChartData = {
            labels: labels,
            series: [distances]
        };

        let lineChartOptions = {
            lineSmooth: Chartist.Interpolation.none(),
            low: 0,
            showArea: true,
            high: distances[distances.length - 1] * 1.5,
            width: '100%',
            height: '400px',
            axisX: {
                showGrid: false,
                showLabel: false,
                offset: 0
            },
            axisY: {
                showGrid: false,
                showLabel: false,
                offset: 0
            },
            plugins: [
                ctPointLabels({
                    textAnchor: 'middle'
                })
            ]
        };

        return (
            <div className="chart-container">
                <ChartistGraph className="chart distance" data={lineChartData} options={lineChartOptions} type={'Line'} />
            </div>
        )
    }
});

export default DistanceChart;

and this is the utility file:

import Chartist from 'chartist';

function ctPointLabels(options) {
  return function ctPointLabels(chart) {
    var defaultOptions = {
      labelClass: 'ct-label',
      labelOffset: {
        x: 0,
        y: -10
      },
      textAnchor: 'middle'
    };

    options = Chartist.extend({}, defaultOptions, options);

    if(chart instanceof Chartist.Line) {
      chart.on('draw', function(data) {
        console.log(data);
        if(data.type === 'point') {
          data.group.elem('text', {
            x: data.x + options.labelOffset.x,
            y: data.y + options.labelOffset.y,
            style: 'text-anchor: ' + options.textAnchor
          }, options.labelClass).text(data.value.y);
        }
      });
    }
  }
}

export default ctPointLabels;

thanks, your options setting helped me.