react-google-charts: displaying number not percentage

I have a project that contains several interfaces, and among these interfaces there is an interface to display statistics,

And i use the following library:

react-google-charts

But the problem is that the number appears as a percentage and I want it to appear as a number:

that means i need the '3' number to appear,

this file contains analysis chart with react-google-charts library,

import { Button, Card, Col, Row, Space } from 'antd';
import { FunctionComponent, useContext, useEffect, useState } from 'react';
import ReactChart from '../../common/chart';
import { typeChart } from '../../common/chart/bar-chart/data/enum';
import '../../../styles/dashboard/index.scss';
import { AuthContext, IAuthContext } from '../../../contexts/auth-context';
import colors from '../../../constants/colors';
import calendar1 from '../../../assets/icons/calendar1-icon.svg';
import calendar2 from '../../../assets/icons/calendar2-icon.svg';
import calendar3 from '../../../assets/icons/calendar3-icon.svg';
import thermometer from '../../../assets/icons/thermometer-icon.svg';
import waving from '../../../assets/icons/waving-hand-icon.svg';
import { useNavigate } from 'react-router';
import { FormattedMessage } from 'react-intl';
import { useQuery } from 'react-query';
import statisticCharts from '../../../api/nuclearMedicineApi/services/Statistic';
import { BsFillSquareFill } from 'react-icons/bs';
import { Chart } from "react-google-charts";
import schedule from '../../../api/nuclearMedicineApi/services/Schedule';
import { MachineCategory } from '../../../constants/enums';



interface DashboardProps { }
const Dashboard: FunctionComponent<DashboardProps> = () => {
    const auth = useContext<IAuthContext>(AuthContext);

    // **************************************************************


    const schedulePatientCount = useQuery('schedulePatientCount', () =>
        schedule.SchedulePatientCountGetAllLite({
            machineCategory: MachineCategory.Analysiss,
        }),
    ).data;

    var analysisPatientCount: any[] = [['', '']];

    const [analysisCountPatient, setAnalysisCountPatient] = useState<any[]>([['', '']])

    useEffect(() => {

        // ****** 10 ****** 
        schedulePatientCount.map((ap: any, index: any) => {
            if (ap?.count !== undefined && ap?.machine.label !== undefined) {
                if (ap?.count !== 0) {
                    let xyData: any[] = [ap?.machine?.label, ap?.count];
                    analysisPatientCount.push(xyData);
                    setAnalysisCountPatient(analysisPatientCount);
                    return analysisPatientCount;
                }
            }
        })

    }, [chartsQueryTopographyData, chartsQueryCityData, chartsQueryAgeData]);

    console.log('cfcfcf: ', analysisCountPatient);


    const options = {
        is3D: true,
    };

    // **************************************************************
    const current = new Date();
    const date = `${current.getFullYear()}/${current.getMonth() + 1
        }/${current.getDate()}`;
    const navigate = useNavigate();
    return (
        <>
            <div className='dashdoard-donutData'>
                {/* 10 charts */}
                <Row>
                    <Col className='mt-4' lg={12}>
                        <Card>
                            <Row>
                                <Col lg={19}>
                                    <h3>
                                        <FormattedMessage id='number-of-cancer-cases-by-city' />{' '}
                                    </h3>
                                </Col>
                            </Row>
                            <Row>
                                <Col lg={24}>
                                    <Chart
                                        chartType="PieChart"
                                        data={analysisCountPatient}
                                        options={options}
                                        width={"100%"}
                                        height={"400px"}
                                    />
                                </Col>
                            </Row>
                        </Card>
                    </Col>
                </Row>
            </div>
        </>
    );
};

export default Dashboard;

You can add pieSliceText: 'value' to your options to display values instead of percentages, if you want to display the items with value "0" you can set the "sliceVisibilityThreshold" option as mentioned in the following example below:

import React from "react";
import { Chart } from "react-google-charts";

export const data = [
  ["Task", "Hours per Day"],
  ["Work", 11],
  ["Eat", 2],
  ["Commute", 2],
  ["Watch TV", 2],
  ["Sleep", 7],
  ["Null" , 0 ]
];

export const options = {
  title: "My Daily Activities",
  is3D: true,
  pieSliceText : 'value',
  sliceVisibilityThreshold: 0
};

export function App() {
  return (
    <Chart
      chartType="PieChart"
      data={data}
      options={options}
      width={"100%"}
      height={"400px"}
    />
  );
}

the result will be as the following: