title: How to animate a google material bar chart
body: <p>I'm drawing a react google bar chart (the material one) in a react project and I'm trying to make an animation. I've read that this kind of chart doesn't support animation but I need to do it, there has to be any way to do it. It's hard for me to think that a newer thing is worse than the old one. Anyone knows how can I do it? I've tried many different ways but nothing worked. This is my code:</p>
  <pre><code>import React from 'react';
  import './App.css';
  import Chart from 'react-google-charts'
  
  function App() {
  
    return (
      &lt;div className=&quot;App&quot;&gt;      
        &lt;Chart
          width={'500px'}
          height={'300px'}
          // Note here we use Bar instead of BarChart to load the material design version
          chartType=&quot;Bar&quot;
          loader={&lt;div&gt;Loading Chart&lt;/div&gt;}
          data={[
            ['City', '2010 Population', '2000 Population'],
            ['New York City, NY', 8175000, 8008000],
            ['Los Angeles, CA', 3792000, 3694000],
            ['Chicago, IL', 2695000, 2896000],
            ['Houston, TX', 2099000, 1953000],
            ['Philadelphia, PA', 1526000, 1517000],
          ]}
          options={{
            // Material chart options
            chart: {
              title: 'Population of Largest U.S. Cities',
              subtitle: 'Based on most recent and previous census data',
            },
            hAxis: {
              title: 'Total Population',
              minValue: 0,
            },
            animation: {
              duration: 1000,
              easing: 'out',
              startup: true,
            },
            vAxis: {
              title: 'City',
            },
            bars: 'horizontal',
            axes: {
              y: {
                0: { side: 'right' },
              },
            },
          }}
        /&gt;
      &lt;/div&gt;
    );
  }
  
  export default App;
  </code></pre>