remove top and bottom lines from recharts cartesian grid

Viewed 441

im using recharts for my graph, i added a cartesian grid, and YAxis with ticks. but recharts adds additional top and bottom lines.

i tried to add css to my styles file as stated here:

https://github.com/recharts/recharts/issues/861

but im not sure how to pass those styles to recharts , and is it to the yAxis or to the cartesian grid.

tickLine={false} - didnt help

axisLine={false} on <xAxis ... /> - also didnt help

also saw somewhere:

.wrapper {
  background-color: aliceblue;
  width: 70%;
  height: 70%;
  box-shadow: 20px 8px 20px grey;
  transition:  box-shadow .2s ease-in;
  display:block;
  margin: 20px auto;
}

.wrapper:hover{ 
  box-shadow: 30px 8px 30px grey;
  transition:  box-shadow .2s ease-in;
}

but it also didnt help , not sure how to apply those styles to recharts.

my cartesian grid:

<CartesianGrid class={styles.horizontal} horizontal={true} vertical={false} /> 

lines image: enter image description here

so, any idea how ?

thnx alot

0 Answers
Related