CODEWITHSUNDEEP
javascriptcssreactjsgraphrecharts
HenryDev
HenryDev

Reputation: 4953

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"
  />

Upvotes: 2

Views: 1268

Answers (3)

Eskandar Abedini
Eskandar Abedini

Reputation: 2144

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

Upvotes: 3

Nayan Radadiya
Nayan Radadiya

Reputation: 21

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>

Upvotes: 2

Luis Paulo Pinto
Luis Paulo Pinto

Reputation: 6036

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.

Upvotes: 2

Related Questions