CODEWITHSUNDEEP
reactjsrecharts
AlexisV
AlexisV

Reputation: 77

Show X axis ticks between bars for a histogram

I have a Rechart bar chart that represents a histogram, currently the X axis ticks are in the middle of the bars.

enter image description here

I would like them to be between the bars rather than in the middle of the bars.

enter image description here

I have a code sample of what I have so far, but I cannot figure out how to shift the X axis ticks.

https://codesandbox.io/embed/agitated-water-iv0sj

Upvotes: 3

Views: 1975

Answers (3)

wamfous
wamfous

Reputation: 2329

Ben Lerner's two-axis solution did it for me, although I couldn't get scale="band" to work.

Instead, just a regular number type axis, with a fixed domain and tick count. In this case, something like:

<BarChart data={data}>
    <XAxis dataKey="elementCount" hide />
    <XAxis xAxisId="ticks" type="number" domain={[0, 5]} tickCount={6} />
    <YAxis allowDecimals={false} />
    ...
</BarChart>

Upvotes: 0

Ben Lerner
Ben Lerner

Reputation: 184

I found a workaround today for this, and commented on the issue linked above: https://github.com/recharts/recharts/issues/2742#issuecomment-1516920595 The upshot is to render two XAxis elements, one for arranging the data and the other for rendering the ticks.

Hope this helps!

Upvotes: 2

bbrinx
bbrinx

Reputation: 866

Try setting the axis scale to "band": <XAxis scale="band" />. I forked your codesandbox: https://codesandbox.io/s/new-field-u5oze

Upvotes: 3

Related Questions