Allow X/YAxis to start be anchored to a certain value like ReferenceLine

[albert-kp]

• I have searched the issues of this repository and believe that this is not a duplicate.

Reproduction link

https://stackblitz.com/edit/vitejs-vite-gmc1wp?file=README.md

Steps to reproduce

1. Provide Chart data having positive and negative values for y axis.
2. The rendered chart should plot the x-axis correctly.

What is expected?

The xaxis orientation should be always at 0 of yaxis

What is actually happening?

The xaxis orientation is now at bottom with minValue of yaxis.

Environment	Info
Recharts	v2.12.3
React	18.2.0
System	Windows 11
Browser	Microsoft Edge Version 122.0.2365.92 (Official build) (64-bit)

[ckifer]

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

[albert-kp]

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 .

[ckifer]

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

[albert-kp]

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

[ckifer]

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

[ckifer]

edited the title to make the issue easier to find later