Can it support animation

[fraserxu]

Can it support animation

[larrybotha]

Because you're relying on the Chartist library directly, importing it will by default import it twice into your compiled js if you're using Webpack.

Make sure to alias chartist so that Webpack resolves React-Chartist's Chartist and your Chartist:

// webpack.config.js
...
  resolve: {
    alias: {
      ...
      chartist: path.resolve(__dirname, 'node_modules/chartist'),
      ...
    },
  },
...

[ellenschwartau]

I animated bars by setting this as listener:

<ChartistGraph  ... listener={{"draw" : function(data) { if(data.type === 'bar') {
                data.element.animate({
                  y2: {
                      begin: 0,
                      dur: 500,
                      from: data.y1,
                      to: data.y2,
                      easing: Chartist.Svg.Easing.easeOutSine,
                  }});
}}}/>

[TonyFrancis]

yes
Give a new props to it listener

   <ChartistGraph key="1" className="ct-chart-line" data={{  labels: ["foo","bar"], series:[ [1,2,3],[3,4,5]]  }}  type={'Line'} listener={{"draw" : function(data) {
  if(data.type === 'line' || data.type === 'area') {
    data.element.animate({
      d: {
        begin: 2000 * data.index,
        dur: 2000,
        from: data.path.clone().scale(1, 0).translate(0, data.chartRect.height()).stringify(),
        to: data.path.clone().stringify(),
        easing: Chartist.Svg.Easing.easeOutQuint
      }
    });
  } } }}/>

[raptoria]

How do I make the bars animate it if I am passing new data to the chart via props every time a button is clicked? (not triggering the 'draw' function)

eg. in parent component I have:

import HBar from '../components/Chart/HorizontalChart';

      <HBar data={this.state.votes} /> 

HorizontalChart.jsx

      import React, {Component} from 'react';
      import ReactDOM from 'react-dom';
      import ChartistGraph from 'react-chartist';
      import styles from 'style!./chartist.css';

      export default class HorizontalChart extends Component {

        static propTypes = {
          data: React.PropTypes.object,
        }

        render() {

          let { data } = this.props;
          let options = {
            seriesBarDistance: 10,
            reverseData: true,
            high:20,
            low:0,
            horizontalBars: true,
            axisY: {
              offset: 70
            }
          };
          let type = 'Bar'

          return (
            <div> 
            <ChartistGraph data={data} options={options} type={type} />
            </div>
          )
        }
      }

[lim1017]

Does anyone have a pie chart animation?
Ive looked over the above posts, but I really have no idea how animations works