Estoy trabajando en Recat.js y usando la biblioteca recargar para la implementación de gráficos. Quiero dar un valor de cadena en el eje y como etiqueta y entrenamiento en algunos números incluidos en los datos json en el eje x. aquí estoy dando mi código, no sé por qué no funciona correctamente. el par de claves de valor tiene que pasar por el eje x y etiquetar valores en el eje y. pero no funciona. porfavor ayudame a resolver este problema. estoy dando mi codigo

 "timestamp": 1645727400000, "value": 1, "label":"connection_recovered" }, { "timestamp": 1645790232297, "value": 2, "label":"up" }, { "timestamp": 1645790232297, "value": -2, "label":"down" }, { "timestamp": 1645790232297, "value": 2, "label":"up" }, { "timestamp": 1645790232297, "value": -2, "label":"down" }] return ( <Container lg={6}> <ResponsiveContainer aspect="3"> <AreaChart width={500} height={400} data={data} margin={{ top: 10, right: 30, left: 0, bottom: 0, }} > <CartesianGrid strokeDasharray="3 3" /> <XAxis style={{fontSize:"12px"}} dataKey="timestamp" /> <YAxis dataKey="label" type="category" /> <Tooltip /> <defs> <linearGradient id="splitColor" x1="0" y1="0" x2="0" y2="1"> <stop offset={off} stopColor="green" stopOpacity={1} /> <stop offset={off} stopColor="red" stopOpacity={1} /> </linearGradient> </defs> <Area style={{fontSize:"12px"}} type="monotone" dataKey="value" stroke="#000" fill="url(#splitColor)" /> </AreaChart> </ResponsiveContainer> </Container> ); }