React-vis: VerticalBarSeries is not rendering when passing x as a string

[basilaiman]

I was trying to render this simple component

export default class extends React.Component{
    constructor(props){
        super(props);
    }
    render(){
        return(
            <XYPlot width={300} height={300}>
                <HorizontalGridLines />
                <VerticalGridLines />
                <VerticalBarSeries
                    data={[{x: 'winter', y: 10}, {x: 'spring', y: 100}, {x: 'summer', y: 10000}, {x: 'fall', y: 10}]}/>
                <XAxis />
                <YAxis />
            </XYPlot>
        );
    }
}

and it fails with this error
Error: <rect> attribute width: Expected length, "NaN"

my react-vis version is 1.8.2
and react version is 15.6.2

[mcnuttandrew]

Hey @basilaiman I believe you need to add xType="ordinal" to your XYPlot, check out the scales section of the documentation (https://uber.github.io/react-vis/documentation/general-principles/scales-and-data) for more information.

[basilaiman]

Thank you, it works.
I think it should be added to the data format reference on the documentation
https://uber.github.io/react-vis/documentation/series-reference/bar-series

[mcnuttandrew]

@basilaiman I tend to think community/driven docs tend to be best, so if you see a place where adding that information would don’t hesitate to file a PR