React-vis: Cant Use String as X-Axis Label

[RichmondAwanzam]

I wanted to plot a line chart for date string items on x-axis, but the graph is not drawn.
below is my component

      <XAxis title="Days" style={{
          line: {stroke: '#ADDDE1'},
          ticks: {stroke: '#ADDDE1'},
          text: {stroke: 'none', fill: '#6b6b76', fontWeight: 600}
        }}/>
        <YAxis title="Number of Fruits" />
        <LineMarkSeries
          className="linemark-series-example"
          style={{
            stroke: 'white'
          }}
          data={[
            {x: "May 2", y: 10},
            {x: "May 3", y: 5},
            {x: "May 4", y: 15}
          ]}/>  
</XYPlot>

[vhellem]

Have you added the xType="ordinal" to your XYPlot?

Here is a sample:

<XYPlot width={300} height={300} xType="ordinal">
        <HorizontalGridLines />
        <LineSeries
          data={[
            { x: "january", y: 10 },
            { x: "february", y: 5 },
            { x: "march", y: 15 }
          ]}
        />
        <XAxis />
        <YAxis />
      </XYPlot>

[lzhuor]

A tiny suggestion, you could use markdown to add a code snippet which is more readable ❤️

[mcnuttandrew]

i did not know i had the power to edit comments! i will use this power only for good/adding jsx keywords to make them format well

[mcnuttandrew]

@RichmondAwanzam I think you could also check out xType="time" if your data is time formatted. You could also modify your data to make it a little more time-y, like data.map(d => new Date(d)), and then set on the xAxis set the prop tickFormat as something like

tickFormat={d => {
    locale = "en-us",
    month = d.toLocaleString(locale, { month: "long" });
}}

(nb haven't tested that code in react-vis, but some rudimentary fiddling in dev console seems like it would be reasonable)

[mcnuttandrew]

I'm gonna close this, as the comments seem to address the original quesiton. Feel free to re-open if not

[Santiago8888]

Although the solution provided by @vhellem fixes the rendering issues.

In order to display the label on the graph, I still had to map my data into a numeric array and fed it to the XAxis tickValues props and then, map my value back into the original string value in the tickFormat prop.

[echountasis]

Although the solution provided by @vhellem fixes the rendering issues.

In order to display the label on the graph, I still had to map my data into a numeric array and fed it to the XAxis tickValues props and then, map my value back into the original string value in the tickFormat prop.

Do you have a sample of how you did this one?

[Stuart88]

Have you added the xType="ordinal" to your XYPlot?

Here is a sample:

<XYPlot width={300} height={300} xType="ordinal">
        <HorizontalGridLines />
        <LineSeries
          data={[
            { x: "january", y: 10 },
            { x: "february", y: 5 },
            { x: "march", y: 15 }
          ]}
        />
        <XAxis />
        <YAxis />
      </XYPlot>

This is extremely useful and it took FOREVER to find it.

react-vis docs seriously need updating with better info.

[echountasis]

Hi @Stuart88 Thanks for your reply! Yes I had managed to find the solution after experimenting a bit!