title: Victory: Animating Circular Progress Bar - not rendering chart
body: <p>I'm working to use Victory's charting library with React to render a Animating Circular Progress bar like so: </p>
  
  <p><a href="https://formidable.com/open-source/victory/gallery/animating-circular-progress-bar" rel="nofollow noreferrer">https://formidable.com/open-source/victory/gallery/animating-circular-progress-bar</a></p>
  
  <p>Here is my code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React from 'react';
  import {connect} from 'react-redux';
  import {VictoryPie, VictoryAnimation, VictoryLabel} from 'victory';
  
  
  
  
  class YourRatings2 extends React.Component {
  
    constructor() {
      super();
      this.state = {
        percent: 25, data: this.getData(0)
      };
    }
  
    componentDidMount() {
      let percent = 25;
    }
  
    getData(percent) {
      return [{x: 1, y: percent}, {x: 2, y: 100 - percent}];
    }
  
    render() {
        return (
          &lt;section className="YourRatings"&gt;
            &lt;h2&gt;Core Skills&lt;/h2&gt;
  
              &lt;div&gt;
                &lt;svg viewBox="0 0 400 400" width="100%" height="100%"&gt;
                  &lt;VictoryPie
                    animate={{duration: 1000}}
                    width={400} height={400}
                    data={this.state.data}
                    innerRadius={120}
                    cornerRadius={3}
                    labels={() =&gt; null}
                    style={{
                      data: { fill: (d) =&gt; {
                        const color = d.y &gt; 30 ? "green" : "red";
                        return d.x === 1 ? color : "transparent";
                      }
                     }
                    }}
                  /&gt;
                  &lt;VictoryAnimation duration={1000} data={this.state}&gt;
                    {(newProps) =&gt; {
                      return (
                        &lt;VictoryLabel
                          textAnchor="middle" verticalAnchor="middle"
                            x={200} y={200}
                          text={`${Math.round(newProps.percent)}%`}
                          style={{ fontSize: 45 }}
                        /&gt;
                      );
                    }}
                  &lt;/VictoryAnimation&gt;
                &lt;/svg&gt;
              &lt;/div&gt;
  
          &lt;/section&gt;
        );
    }
  }
  
  const mapStateToProps = state =&gt; {
    return {
    };
  };
  
  export default connect(mapStateToProps)(YourRatings2);</code></pre>
  </div>
  </div>
  </p>
  
  <p>Unfortunately, this is only rendering the text, not the full graph. see:</p>
  
  <p><a href="https://i.stack.imgur.com/uCa1H.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/uCa1H.png" alt="enter image description here"></a></p>
  
  <p>Any pointers as to what I am doing wrong? </p>