REACT: How to build a half donut

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.

How can I make that visible part would be 100%?

Here you've got the code of the chart:

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
      },
      () => {
        this.setState({
          width: document.querySelector("#container").getBoundingClientRect()
            .width
        });
      }
    );
  }

  render() {
    return (
      <div>
        {this.state.loaded ? (
          <div id="container">
            <Chart
              width={this.state.width}
              height={"400px"}
              chartType="PieChart"
              loader={<div>Loading Chart</div>}
              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"
                  }
                }
              }}
            />
          </div>
        ) : (
          "Cargando datos"
        )}
      </div>
    );
  }
}

module.exports.PieChart = PieChart;

And as you can see, the summatory of the part which is visible is only 50% and not 100%.

enter image description here

So, how can I make that visible part would be 100% of total?

You can check all the code here:

Edit stupefied-euclid-wdcvo

Answers:

Answer

We can alter labels value is using callback function of react-google-chart like below. In callback function we can get to access of svg of pie chart.

<Chart

   chartEvents={[
   {
      eventName: "ready",
      callback: ({ chartWrapper, google }) => {
          // const chart = chartWrapper.getChart();
          let svg = document.querySelector("svg");
          console.log("svg childNodes are ",svg.childNodes)

          // YOU CAN WRITE THIS CODE USING FOR EACH BUT FOR EASY UNDERSTANDING I WROTE LIKE THIS

          // first 2 children in svg are heading & label colors(sidenav)

          for(var i=3;i<svg.childNodes.length-1;i++) {
             var temp = svg.childNodes[i].childNodes[1].innerHTML;
             if(temp.length>3) {
                temp = temp.substring(0,3)
             }
             else {
                temp = temp.substring(0,2)
             }
             // doubling to make them as 100% summary
             temp = parseFloat(temp)*2;
             svg.childNodes[i].childNodes[1].innerHTML = temp+'%';


         }

       } 
       } 
 ]}


          width={this.state.width}
          height={"400px"}
          chartType="PieChart"
          loader={<div>Loading Chart</div>}
          data={this.props.data}
          options={{
            backgroundColor: "transparent",
            title: "Distribución de posesiones",
            pieHole: 0.4,
            pieStartAngle: 270,
            slices: {
              4: {
                color: "transparent"
              }
            }
          }}
/>

NOTE If you have static data then it will be fine. If your data values changes then every time we don't get donut shape. Charts doesn't work that way.

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.