Open albert-kp opened 6 months ago
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
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 .
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
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
edited the title to make the issue easier to find later
Reproduction link
https://stackblitz.com/edit/vitejs-vite-gmc1wp?file=README.md
Steps to reproduce
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.