Allow X/YAxis to start be anchored to a certain value like ReferenceLine about recharts HOT 6 OPEN

You can definitely keep the XAxis, hide it with hide, then place a reference line at 0. There's not an easy way to make ticks for that line though.

I'll try to see if there are any options to make a custom axis in a bit, currently replying from my phone so can't test anything

from recharts.

Hmm.. I don't think it's right to say that the X axis should always be at 0. In fact, I think most of the time with negative values it should stay at the bottom of the chart like it is. The axis would end up getting in the way and the labels would be hard to read.

Take another charting library for example https://www.highcharts.com/demo/highcharts/column-negative

Can you give a mockup of what you want? I'm not sure it's going to look good with the axis and its labels in the middle of the chart

from recharts.

Hmm.. I don't think it's right to say that the X axis should always be at 0. In fact, I think most of the time with negative values it should stay at the bottom of the chart like it is. The axis would end up getting in the way and the labels would be hard to read.

Take another charting library for example https://www.highcharts.com/demo/highcharts/column-negative

Can you give a mockup of what you want? I'm not sure it's going to look good with the axis and its labels in the middle of the chart

Hi,
I would want something like below. the x-axis line should be at zero. Is there a way to achieve this using workaround reference lines and custom ticks .

from recharts.

You can definitely keep the XAxis, hide it with hide, then place a reference line at 0. There's not an easy way to make ticks for that line though.

I'll try to see if there are any options to make a custom axis in a bit, currently replying from my phone so can't test anything

I have tried to acheive with reference line and custom tick. But need to identify the exact position of zero tick so that i can postion the custom ticks to y position.

const CustomXAxisTicks = ({ x, payload }: any) => { console.log(x); return ( <g transform={translate(${x},${0})}> <text x={0} y={0} dy={16} textAnchor={'middle'} fill="#666"> {payload.value} </text> </g> ); };

<ReferenceLine y={0} stroke={'black'} />
See this example

https://stackblitz.com/edit/vitejs-vite-e7d1ag?file=src%2FApp.tsx

from recharts.

Ok so this solution is very very hacky and very much a workaround but in lieu of anything else

from recharts.

edited the title to make the issue easier to find later

from recharts.