Tengo este gráfico y necesito cambiar la altura entre las líneas horizontales.
<CartesianGrid vertical={false} /> <XAxis dataKey="name" /> <YAxis /> <Tooltip /> <Legend /> <Line type="monotone" dataKey="pv" stroke="#8884d8" />Creo que al cambiar la propiedad de altura de LineChart puede lograr su objetivo:
export default function App() { return ( <LineChart width={500} height={250} data={data} margin={{ top: 5, right: 30, left: 20, bottom: 5 }} export default function App() { return ( <LineChart width={500} height={400} data={data} margin={{ top: 5, right: 30, left: 20, bottom: 5 }}Si entiendo correctamente lo que quiere, una forma de hacerlo es configurar tickCount para YAxis :
<YAxis tickCount={10} /> También puedes combinarlo con domain e interval :
<YAxis tickCount={6} domain={["auto", "dataMax + 500"]} interval="preserveStart" />Para entender mejor estas propiedades:
tickCount : (Número)
El conteo de tics del eje. No se utiliza si 'tipo' es 'categoría'.
valor POR DEFECTO: 5
dominio : (matriz - opcional)
Especifique el dominio del eje cuando el eje es un eje numérico. La longitud del dominio debe ser 2, y validaremos los valores en el dominio. Y cada elemento de la matriz puede ser un número, 'auto', 'dataMin', 'dataMax', una cadena como 'dataMin - 20', 'dataMax + 100' o una función que acepta un solo argumento y devuelve un número . Si cualquier elemento del dominio se configura como 'automático', se calcularán los ticks de escala comprensible y los ticks generarán el dominio final del eje.
PREDETERMINADO: [0, 'automático']
intervalo : ("preserveStart" | "preserveEnd" | "preserveStartEnd" | Número)
Si se establece en 0, se mostrarán todos los ticks. Si establece preserveStart", "preserveEnd" o "preserveStartEnd", los ticks que se mostrarán u ocultarán se calcularán automáticamente.
PREDETERMINADO: 'preservarEnd'
Para ver más al respecto, puede consultar los documentos de la API de recargas.
Intente aumentar o disminuir el margen inferior en el componente LineChart.
<LineChart width={500} height={300} data={data} margin={{ top: 5, right: 30, left: 20, bottom: -20 //Increase or Decrease This }} > <CartesianGrid vertical={false} /> <XAxis dataKey="name" /> <YAxis /> <Tooltip /> <Legend /> <Line type="monotone" dataKey="pv" stroke="#8884d8" /> <Line type="monotone" dataKey="uv" stroke="#82ca9d" /> </LineChart>