Tengo un programa basado en ReChart, este programa consume una API que brinda información sobre los indicadores, cada indicador es un elemento de línea en mi gráfico, el problema aquí es que no sé cuántos indicadores vienen en la respuesta de la API, tal vez 1, tal vez 2, tal vez x indicadores. No puedo configurar la cantidad de elementos de línea desde el código, necesito configurar la cantidad de líneas después de mi llamada a la API. ¿Hay alguna solución a este problema?

Este es mi código:

 return ( <div className="flex-row-reverse"> <div className="w-1/4 bg-gray-600"> Aqui iria el select o algo por el estilo </div> <div className="w/3/4"> <ResponsiveContainer id="container" width={"100%"} height={400}> <LineChart data={data} margin={{ top: 30, right: 30, left: 30, bottom: 30 }} > <CartesianGrid /> <XAxis type="number" dataKey="time" domain={["dataMin", "dataMax"]}> <Label value={"Time"} position="bottom" style={{ textAnchor: "middle" }} /> </XAxis> <YAxis> <Label value={"Indicadores"} position="left" angle={-90} style={{ textAnchor: "middle" }} /> </YAxis> <Tooltip /> <Line dataKey="AguaCo2" name="AguaCo2" unit={"L"} dot={false} type={"natural"} /> <Line dataKey="Co2O3" name="Co2O3" unit={"L"} dot={false} type={"natural"} /> </LineChart> </ResponsiveContainer> </div> </div>

);

Este código tiene dos elementos Line, pero necesito que Lines se vaya agregando desde la respuesta de la API.