Search code examples
reactjsreact-vis

react-vis: How to format ISO dates

I have a live time-series data connected to a front-end react-vis XY plot. The data is fed as a JSON by a python Flask Server. The JSON contains date in iso format; Something like 2019-11-21T00:00:00.000Z.

I am able to display the time-series data on the chart; however, the x-axis values show up as ISO format.

How can I display the dates as MM/DD/YYYY format on the x-axis of a react-vis XY plot? I am already using xType="ordinal" attribute of the XY plot.

Solution

  • On your XAxis use tickFormat. So it will be something like this: 

    <XAxis
  tickFormat={value => moment(value).format('DD/MM/YYYY')}
  tickValues={yourValuesFromJson || []}
/>