CODEWITHSUNDEEP
reactjsreact-vis
cachedcashew
cachedcashew

Reputation: 407

React Vis x can't be a string

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: enter image description here

Upvotes: 1

Views: 171

Answers (2)

PravyNandas
PravyNandas

Reputation: 667

In my case, it's the other way around. I always had xType="ordinal" but I guess recently the data type changed to numbers and started getting this error. The fix is to convert the x-axis value from numerics to proper strings (which I could do by fixing the data itself, but this one is the smallest change possible to fix the chart)

export const Chart = () => {
    return (
        <XYPlot height={500} width={500} xType='ordinal' getX={d=>`${d[0]}`}>
          <VerticalBarSeries data={myData} />
        </XYPlot>
     )
  };

Upvotes: 0

K. Ali
K. Ali

Reputation: 1

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.

Upvotes: 0

Related Questions