How to plot time series graph using react-vis

Question

I am using react-vis lib for visualization. can anyone tell me how to plot time series graph for following data? Thanks in advance.

data = [
    {x:"01/01/2018",y:75},
    {x:"14/02/2018",y:60},
    {x:"18/03/2018",y:80},
    {x:"15/04/2018",y:90},
    {x:"10/05/2018",y:95},
]

Answer 1

On the Misc examples page, you have an example of a time chart (line chart with X being time format) with the code example provided. The main differences from a regular LineSeries use :

• In the XYPlot component, precise the type of the x axis : xType="time"
• Give a x attribute in a date format

Trying with your data, a ver basic example would be :

<XYPlot
    xType="time"
    width={1000}
    height={300}>
    <HorizontalGridLines />
    <VerticalGridLines />
    <XAxis title="X Axis" />
    <YAxis title="Y Axis" />
    <LineSeries
      data={[
        {x: new Date('01/01/2018'), y: 75},
        {x: new Date('01/14/2018'), y: 60},
        {x: new Date('03/18/2018'), y: 80},
        {x: new Date('04/15/2018'), y: 90}
      ]}/>
</XYPlot>

So before giving your data to the LineSeries component, you can modifying to replace your x value by new Date(x) using data.map function for example.

Also beware that the JS Date object like the the format MM/DD/YYY so '01/14/2018' better than '14/01/2018' -> JS Short date format