Can it support animation

[ghost]

First. I use this component very long. it's amazing.
However. I wish we use it can show a animation with chart.
So. How do i do it.
Thx .

[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>
          )
        }
      }

[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,
                  }});
}}}/>

[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'),
      ...
    },
  },
...

[lim1017]

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