Quiero mostrar los datos obtenidos de una API en un gráfico de líneas usando recargar. Pero si no hay variación en el punto de datos ('pv' en nuestro caso), entonces no se ve ninguna línea de gráfico cuando se usa un gradiente lineal, pero quiero una sola línea en caso de que no haya variación en el punto de datos. Suponga que los datos se obtienen de una API y pueden ser dinámicos

 import { LineChart, Line, Tooltip, XAxis } from "recharts"; import ReactDOM from "react-dom"; import React from "react"; const data = [ { name: "Page A", uv: 4000, pv: 1000, amt: 2400 }, { name: "Page B", uv: 3000, pv: 1000, amt: 2210 }, { name: "Page C", uv: 2000, pv: 1000, amt: 2290 }, { name: "Page D", uv: 2780, pv: 1000, amt: 2000 }, { name: "Page E", uv: 1890, pv: 1000, amt: 2181 }, { name: "Page F", uv: 2390, pv: 1000, amt: 2500 }, { name: "Page G", uv: 3490, pv: 1000, amt: 2100 } ]; const App = () => { return ( <LineChart width={500} height={500} data={data}> <defs> <linearGradient id="colorUv" x1="0%" y1="0" x2="100%" y2="0"> <stop offset="0%" stopColor="blue" /> <stop offset="50%" stopColor="red" /> <stop offset="100%" stopColor="red" /> </linearGradient> </defs> <Line type="monotone" dataKey="pv" stroke="url(#colorUv)" strokeWidth={3} dot={false} activeDot={false} /> <XAxis /> <Tooltip /> </LineChart> ); }; ReactDOM.render(<App />, document.getElementById("root"));