反应谷歌图表不显示

Question

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>
}

Answer 1

The problem is in parseInt method. I cannot figure out why but when I delete it, the chart worked.

Answer 2

import React from 'react'
import { Doughnut } from 'react-chartjs-2'

function BillingChart() {
  return (
    <div>
      <Doughnut
        data={{
          labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
        }}
        height={400}
        width={600}
      />
    </div>
  )
}

export default BillingChart