Reputation: 2932
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%.
So, how can I make that visible part would be 100% of total?
You can check all the code here:
Upvotes: 1
Views: 3022
Reputation: 2493
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.
Upvotes: 1