title: REACT: How to build a half donut
body: <p>I'm newbie with react-google-charts and I'm developing a half pie donut but despite of having made it, I've got a problem and this problem is that summatory of % of visible half pie is only 50% because the other 50% is hiddend. </p>
  
  <p>How can I make that visible part would be 100%?</p>
  
  <p>Here you've got the code of the chart:</p>
  
  <pre><code>import React, { Component } from "react";
  import { Chart } from "react-google-charts";
  
  class PieChart extends Component {
    constructor(props) {
      super(props);
      this.props = props;
      this.state = {
        loaded: false
      };
    }
  
    componentDidMount() {
      this.setState(
        {
          loaded: true
        },
        () =&gt; {
          this.setState({
            width: document.querySelector("#container").getBoundingClientRect()
              .width
          });
        }
      );
    }
  
    render() {
      return (
        &lt;div&gt;
          {this.state.loaded ? (
            &lt;div id="container"&gt;
              &lt;Chart
                width={this.state.width}
                height={"400px"}
                chartType="PieChart"
                loader={&lt;div&gt;Loading Chart&lt;/div&gt;}
                data={this.props.data}
                options={{
                  backgroundColor: "transparent",
                  title: "Distribución de posesiones",
                  // Just add this option
                  pieHole: 0.4,
                  pieStartAngle: 270,
                  slices: {
                    4: {
                      color: "transparent"
                    }
                  }
                }}
              /&gt;
            &lt;/div&gt;
          ) : (
            "Cargando datos"
          )}
        &lt;/div&gt;
      );
    }
  }
  
  module.exports.PieChart = PieChart;
  </code></pre>
  
  <p>And as you can see, the summatory of the part which is visible is only 50% and not 100%.</p>
  
  <p><a href="https://i.stack.imgur.com/uCzsd.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/uCzsd.png" alt="enter image description here"></a></p>
  
  <p>So, how can I make that visible part would be 100% of total?</p>
  
  <p>You can check all the code here:</p>
  
  <p><a href="https://codesandbox.io/s/stupefied-euclid-wdcvo?fontsize=14&amp;hidenavigation=1&amp;theme=dark" rel="nofollow noreferrer"><img src="https://codesandbox.io/static/img/play-codesandbox.svg" alt="Edit stupefied-euclid-wdcvo"></a></p>