0

I have a project and in this project I have a chart

And use the following library:

react-google-charts

The problem is that when i hover on any point, the Tooltip appears.

Tooltip is contains two lines, the first x and the second y

The problem is that x is a year, but it appears with commas, how can I solve this problem

for example: 2022 is appear as 2,022, but i need to appear as 2022

as this picture:

enter image description here

How can i solve my problem?

options.tsx:

export const options_5 = {
    hAxis: {
        title: "السّنة",
        format: '####' // display the year value as a four-digit number without commas
    },
    vAxis: {
        title: "عدد المرضى",
        baseline: 0
    },
    series: {
        0: { lineWidth: 3, areaOpacity: 0.5, curveType: 'monotone' },
    },
    animation: {
        startup: true,
        duration: 1000
    },
    intervals: { style: "area" },
    colors: ['#ff0000', '#00ff00', '#0000ff'],
    dateFormat: 'yyyy', // specify a custom date format for the horizontal axis labels
    tooltip: {
        format: {
            title: (value: string | number) => `السّنة: ${value}`, // display the year value without formatting
            value: (value: string | number) => numberWithCommas(value as number) // format the count value with commas
        }
    },
    // chartArea: {
    //     left: '10%',
    //     top: '10%',
    //     // width: '60%',
    //     height: '70%'
    // }
};

// helper function to format numbers with commas
const numberWithCommas = (x: number) => {
    return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
};

charts.tsx:

                    <Row>
                        <Col lg={24} md={24}>
                            <Chart
                                chartType="LineChart"
                                width="100%"
                                height="300px"
                                data={xytotalTopography2}
                                options={options_5}
                            />
                        </Col>
                    </Row>
Hiba Youssef
  • 1,130
  • 1
  • 12
  • 34

0 Answers0