React-vis: X-axis values shifted

[paddotk]

I am encountering strange behaviour with AreaChart charts:
See https://codepen.io/anon/pen/pGBRWy

Whatever I do, the chart has a weird offset of one tick of the 0 coord on the x-axis. When I take the first value out of the chart, it does the same with 1 (being the first value). The Y axis does seem to get it right.

Update:
I found out that the xType="ordinal" prop causes this. Without this, the x axis shows decimals and doesn't allow string labels on the axis (which I need in my chart), so any fix or workaround would be welcome.

[mcnuttandrew]

Hey @paddotk,
I think I have a work around for you. Ordinal data types refer to discrete data types that have an ordering to them (such as days of the week, months of the year, etc). From your chart it appears that you want a continuous scale, such as linear (which is the default). In order to label your axis as you desire, simply give the xAxis component a tickValues={[1, 2, 3, 4]} argument, if you wish to manipulate it further use tickFormat={d => YOU_TICK_FORMATING_FUNCTION(d)}.

[paddotk]

Hi @mcnuttandrew, thanks for the tip. My actual graph is more complex than the example I provided, but your suggestion worked nicely.

Nevertheless, is this a bug or do I misunderstand the way ordinal types are supposed to work?

Thanks for the quick support!