React Vis x can't be a string

Question

I am using React Vis to create a simple Graph. This is my code:

import React from 'react';
import '../../../node_modules/react-vis/dist/style.css';
import {XYPlot, VerticalBarSeries} from 'react-vis';

const myData = [
  {x: 'A', y: 10},
  {x: 'B', y: 5},
  {x: 'C', y: 15}
]


export const Chart = () => {
  return (
      <XYPlot height={500} width={500}>
        <VerticalBarSeries data={myData} />
      </XYPlot>
  )
};

export default Chart;

I receive this error message: Received NaN for the `x` attribute. If this is expected, cast the value to a string."

When I change the x values in myData to ints, it works, but I need them as strings. The documentation clearly states that this should work:

For string x values you must specify the `xType = "ordinal"` props for the `XYPlot` component. — Andrey, Nov 24 '21 at 20:04

score 0 · Answer 1 · answered Jul 11 '23 at 14:56

For the x value to be a string you need to add xType='ordinal' to the XYPlot as following:

export const Chart = () => {
  return (
      <XYPlot height={500} width={500} xType='ordinal'>
        <VerticalBarSeries data={myData} />
      </XYPlot>
  )
};

Now it should work for you.

React Vis x can't be a string

1 Answers1