Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

287
Visualizações
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 Respostas
Responde à pergunta

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 Relatório

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 Relatório

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 Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda