Apexchart xaxis labels showing as numbers instead of strings in Reactjs

Question

I use the ApexCharts library for my bar graph. But my xAxis labels only show me numbers ranging from 1 to 5, and I don't know where that comes out. In my xAxis I try to put an array of dates that I get from my data. To know that i used the UseEffect(). Thanks in advance this is the initialization of my chartData

let chartData: any = {
series: [],
categories: []}

The UseEffect use

useEffect(() => {


getDataByParams(`${customerUrls.trp}?startDate=${startDate}&endDate=${endDate}`)
  .then((v?) =>
    setTripSour(v))}

the stats where i set the values in my chartData

let triS = tripSour?.entities;
const getRideChoiceByClient = (r = triS) => {
    if (r?.length) {
      let series: { name: string, data: any, date: any }[] = [];
      let categ: any[] = []
      console.log(r);

      let rUA = r.filter((d: any) => d.type === 'USER_APPLICATION').map((d: any) => d.ride_total);
      let rCA = r.filter((d: any) => d.type === 'CLIENT_APPLICATION').map((d: any) => d.ride_total);
      console.log(rCA);
      let rAdm = r.filter((d: any) => d.type === 'ADMIN_MANUAL_ENTRY').map((d: any) => d.ride_total);
      console.log(rAdm);



      r.forEach(
        (ride: any) => {
          console.log(ride);

          const index = series.findIndex((a: any) => a.name === ride.type);
          if (index > 0) {
            series[index].data.map((e: any) => e)
          }
          else {
            categ.push(ride.date);
            
          }

        }
      );


      chartDat = {
        series: [
          {
            name: "ABC",
            data: rUA
          },
          {
            name: "DEF",
            data: rCA
          },
          {
            name: "HGI",
            data: rAdm
          },
        ],
        categories: categ

      }

      console.log(chartData);
      console.log(chartData.categories);


      return chartData;

    }
    return [];

  }

**Log of charData**


{series: Array(3), categories: Array(6)}
categories: (6) ['2021-10-27', '2021-10-29', '2021-10-29', '2021-10-31', '2021-11-01', '2021-11-02']
series: Array(3)
0: {name: 'Aplli Mobile', data: Array(5)}
1: {name: 'Telibot', data: Array(0)}
2: {name: 'Admin', data: Array(0)}
length: 3

**Log of chartData.categories**

    ['2021-10-27', '2021-10-29', '2021-10-29', '2021-10-31', '2021-11-01', '2021-11-02']
0: "2021-10-27"
1: "2021-10-29"
2: "2021-10-29"
3: "2021-10-31"
4: "2021-11-01"
5: "2021-11-02"
length: 6

**Call of my chartWidget in return**
return (
    <>

      <Header />

      <Card bodyStyle={{ padding: 0 }}>
        <Row>
<Col xs={24} sm={24} md={24} lg={24} xxl={12}>
          <ChartWidget
            series={chartDat.series}
            xAxis={chartDat.categories}
            title="XYZ"
            height={410}
            type="line"
            customOptions={
              {
                colors: [COLORS[1], COLORS[0], COLORS[2]]
              }
            }
            extra={
              []
            }

          />
        </Col>
      </Row>
 </Card>)

and in my rendering I don't have the data of my charData.categories on my xAxis, I just have 1 2 3 4 5 in xAxis.

**The goal is to display the chartData.categories in xAxis.
Thanks.

Apexchart xaxis labels showing as numbers instead of strings in Reactjs

0 Answers0