2

I am trying to implement react-vis in my project. I need to show data based on date. I am using tickFormat for it but it is showing same date two times in x-axis.I am adding few lines of my code here.

       <XYPlot
        width={1140}
        height={440}
        >
        <LineMarkSeries
           lineStyle={{stroke: '#e0e0e0'}}
            markStyle={{stroke: '#6dc6c1'}}
            style={{
                strokeWidth: '2px'
            }}
            strokeStyle="solid"
            data={[
                {
                    x: Date.parse("05/05/2019"),
                    y: 0
                },
                {
                    x: Date.parse("05/12/2019"),
                    y: 12
                },
                {
                    x: Date.parse("05/13/2019"),
                    y: 16
                }
            ]}
         />
          <XAxis
            attr="x"
            attrAxis="y"
            orientation="bottom"
            tickFormat={function tickFormat(d){return 
                           moment(d).format("MMM DD")}}
            tickLabelAngle={0}
         />
        <YAxis />
    </XYPlot>
LB93
  • 117
  • 1
  • 12
  • Maintain the moment.format(MM-DD) same date format In data array as well. – Bhavani Mandapati May 08 '19 at 12:20
  • I tried it but it's not working.showing this error(Error: attribute cx: Expected length, "NaN".) I think this format may not supported inside data array. – LB93 May 08 '19 at 12:25

1 Answers1

0

If you specify xType as ordinal, it will use your x value as the tick label (eg: like a bar chart). Thus, you don't have to have a redundant conversion of your x values using Date.parse.

<XYPlot
  width={1140}
  height={440}
  xType='ordinal'
>
    <LineMarkSeries
      lineStyle={{stroke: '#e0e0e0'}}
      markStyle={{stroke: '#6dc6c1'}}
      style={{ strokeWidth: '2px' }}
      strokeStyle="solid"
      data={[
        {
          x: "05/05/2019",
          y: 0
        },
        {
          x: "05/12/2019",
          y: 12
        },
        {
          x: "05/13/2019",
          y: 16
        }
      ]}
    />
    <XAxis />
</XYPlot>
technogeek1995
  • 3,185
  • 2
  • 31
  • 52
  • This will produce a graph where all the dates are next to each other regardless of how much time has elapsed between two dates. – stackoverflowed Dec 22 '20 at 14:53