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