ApexCharts Pie/donut charts are not appearing correctly

Question

I'm having a problem with Pie/donut charts in Apex Charts in my React App,

Basically I'm fetching data from google analytics and trying to display it on a pie/donut chart but the chart doesn't render completly like this:

instead it appears like this :

as you can see I get those little "Lines" instead of the full graph and also it works fine if I get one value from the api,

this is the component code :

import axios from "axios"
import { useQuery } from "react-query"
import ReactApexChart from "react-apexcharts";
import { ApexOptions } from "apexcharts";
import Spinner from "../../utils/Spinner/Spinner";
const VisitedPages = () => {
    const { data, isLoading } = useQuery("visitedPages", () => {
        return axios.post('http://localhost:8000/ga/getRealTimeReport', {
            metrics: 'rt:activeUsers',
            dimensions: 'rt:pagePath',
        })
    });
    const labels= data?.data.data.dimensions.map((e: string[]) => e[0]);
    const options = {
        labels,
        theme: {
            monochrome: {
                enabled: false
            }
        },
        responsive: [
            {
                breakpoint: 480,
                options: {
                    chart: {
                        width: "100%"
                    },
                    legend: {
                        show: false
                    }
                }
            }
        ],

    };
    const series = data?.data.data.dimensions.map((e: string[]) => e[1]);

  



    return (
        <div className="col-span-2 bg-white rounded-lg shadow-xl  flex flex-col justify-center items-center">
            {isLoading ? <Spinner /> : <><h1 className="text-3xl font-bold">Visited Pages</h1>
                <ReactApexChart type="pie" options={options} series={series} /></>}

        </div>
    )
}

export default VisitedPages

Ps: I tried it with constant values and it works just fine Idk what's the problem...

Answer 1

the problem was that the api returns the values as strings so all you have to do is to convert them into numbers

all you have to do is to change this line :

const series = data?.data.data.dimensions.map((e: string[]) => e[1]);

into :

const series = data?.data.data.dimensions.map((e: string[]) => +e[1]);

it's weird cause other charts works fine with string results