Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

286
Vistas
How to change the height in between horizontal lines in recharts?

I have this graph and need to change the height in between the horizontal lines.

enter image description here

LIVE DEMO

<CartesianGrid vertical={false} />
  <XAxis dataKey="name" />
  <YAxis />
  <Tooltip />
  <Legend />
  <Line
    type="monotone"
    dataKey="pv"
    stroke="#8884d8"
  />
about 4 years ago · Juan Pablo Isaza
3 Respuestas
Responde la pregunta

0

I think by changing height property of LineChart you can achieve your aim:

export default function App() {
  return (
    <LineChart
      width={500}
      height={250}
      data={data}
      margin={{
        top: 5,
        right: 30,
        left: 20,
        bottom: 5
      }}

enter image description here

export default function App() {
  return (
    <LineChart
      width={500}
      height={400}
      data={data}
      margin={{
        top: 5,
        right: 30,
        left: 20,
        bottom: 5
      }}

enter image description here

about 4 years ago · Juan Pablo Isaza Denunciar

0

If i understand correctly what you want, one way to do it is setting the tickCount for YAxis:

<YAxis tickCount={10} />

You can also combine it with domain and interval:

<YAxis
   tickCount={6}
   domain={["auto", "dataMax + 500"]}
   interval="preserveStart"
/>

To better understand these properties:

tickCount: (Number)

The count of axis ticks. Not used if 'type' is 'category'.
DEFAULT value: 5

domain: (Array - optional)

Specify the domain of axis when the axis is a number axis. The length of domain should be 2, and we will validate the values in domain. And each element in the array can be a number, 'auto', 'dataMin', 'dataMax', a string like 'dataMin - 20', 'dataMax + 100', or a function that accepts a single argument and returns a number. If any element of domain is set to be 'auto', comprehensible scale ticks will be calculated, and the final domain of axis is generated by the ticks.
DEFAULT: [0, 'auto']

interval: ("preserveStart" | "preserveEnd" | "preserveStartEnd" | Number)

If set 0, all the ticks will be shown. If set preserveStart", "preserveEnd" or "preserveStartEnd", the ticks which is to be shown or hidden will be calculated automatically.
DEFAULT: 'preserveEnd'

To see more about it, you can check recharts API docs.

about 4 years ago · Juan Pablo Isaza Denunciar

0

Try Increasing or Decreasing bottom margin in LineChart Component.

<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>
about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda