Date formatting not consistent

[BrendanJones44]

Hi,

I have a time-series and all date objects in the series are represented by ms since EPOCH. When I use this snippet of code:

<ChartContainer timeRange={series.timerange()} width={1400}> <ChartRow height="600"> <YAxis id="axis" label="STORY POINTS" min={0} max={series.max()} width="60" type="linear"/> <Charts> <LineChart axis="axis" series={series} interpolation="curveStepBefore"/> </Charts> </ChartRow> </ChartContainer>

The format of the dates on the bottom of the axis has the day of the week and the number of the day, (so Wed 17), but then there's a random May 21 in there. Any ideas?

[pjm17971]

Can you add a screenshot of the axis?

[BrendanJones44]

Wow, thanks for the fast reply! Here it is. I just started using react-timeseries-charts, is there a prop somewhere I can send in a custom format for the date? Maybe that'll fix it?

[pjm17971]

This seems to be a known problem with the default d3 axis generation, so the best solution is to expose the format in a more flexible way. In the longer term, the react-axis project will address that.

So, for now, I have a branch with that ability now, since this has been asked for multiple times (I was hoping someone would PR a solution, but no such luck). It'll be in the next release.

[BrendanJones44]

Great, thank you! Where will I be able to find the documentation to do such flexible formatting? All I really want is the mmm-d across the entire x-axis

[pjm17971]

I'll add something to the changelog, but basically, you can already pass in a format prop to the ChartContainer. Currently that is one of several enum values: day, month, year or duration from memory.

The change would be that is neither of those it will interpret it as a d3 format. The docs for that is here:
https://github.com/d3/d3-time-format/blob/master/README.md#locale_format

In addition, if format is a function, the code will call it with the date and you can return whatever string you want. For your example, you can just use the d3 format.