I have a big issue with my react app. I have several pie charts. But I have a displaying problem. In some browsers, they are working but in others, they are not working. For example, when I try them in two exactly same phones & browsers they are working one of them and not working in the other one.
I think this problem is not related to browsers, accounts, devices but I cannot find out what is wrong with that?
Google charts and recharts not working in pie chart but my Google bar chart is working.
When I try to display pie chart with dummy data it works. I think there is a problem with my data.
api:
[{"title":"TOPLAM DÖNEN VARLIKLAR","value1":0.8099237254874144,"value2":0.6716967762970417},{"title":"TOPLAM DURAN VARLIKLAR","value1":0.19007627451258552,"value2":0.3283032237029582},{"title":"Toplam Kısa Vadeli Yükümlülükler","value1":0.6453778969419264,"value2":0.42796665648321913},{"title":"Toplam Uzun Vadeli Yükümlülükler","value1":0.12545336756938238,"value2":0.15300843856942245},{"title":"TOPLAM ÖZKAYNAKLAR","value1":0.22916873548869124,"value2":0.41902490494735845}]
react
export function DonutValue({donut, comp, start, end}) {
const colorsheme = [
'#2b5818', '#50d741',
'#7d99e7', '#355dd4', '#083edd'];
const valr = [
['a', 'b'],
[capitalizeEachFirstLetter(donut[start].title) + " (%)", parseInt(donut[start].value1.toLocaleString() * 100, 10)],
[capitalizeEachFirstLetter(donut[start + 1].title) + " (%)", parseInt(donut[start + 1].value1.toLocaleString() * 100, 10)]
];
if (end == 5) {
valr.push(
[capitalizeEachFirstLetter(donut[start + 2].title) + " (%)", parseInt(donut[start + 2].value1.toLocaleString() * 100, 10)]
);
}
const vall = [
['a', 'b'],
[capitalizeEachFirstLetter(donut[start].title) + " (%)", parseInt(donut[start].value2.toLocaleString() * 100, 10)],
[capitalizeEachFirstLetter(donut[start + 1].title) + " (%)", parseInt(donut[start + 1].value2.toLocaleString() * 100, 10)]
];
if (end == 5) {
vall.push(
[capitalizeEachFirstLetter(donut[start + 2].title) + " (%)", parseInt(donut[start + 2].value2.toLocaleString() * 100, 10)]
);
}
return <Row>
<Col sm="12" className="text-center">
<div style={{width: '100%'}}>
<ResponsiveContainer width={'99%'} height={300}>
<Chart
chartType="PieChart"
data={valr}
options={{
backgroundColor: 'transparent',
title: '',
pieHole: 0.6,
slices: [
{
color: colorsheme[start + 0],
},
{
color: colorsheme[start + 1],
},
{
color: colorsheme[start + 2],
},
],
legend: {
position: 'bottom',
alignment: 'center',
textStyle: {
color: '#ffdc5a',
fontSize: 12
},
},
border: {
color: 'red',
},
tooltip: {
showColorCode: true,
},
chartArea: {
left: 0,
top: 0,
width: '100%',
height: '60%',
}
}}
width={'100%'}
height={'400px'}
legend_toggle
/>
</ResponsiveContainer>
</div>
<h4 style={{margin: '0 5px', padding: 0}}>
{comp[1].value}
</h4>
</Col>
</Row>
}
The problem is in parseInt
method. I cannot figure out why but when I delete it, the chart worked.