Gridlines not rendering

I don’t know what I’m missing here, but for some reason the gridlines don’t seem to render with a XY Plot component. Not sure if I need to place the components in a certain order, or specify certain properties for the gridlines.

Here’s a preview of what the graph looks like

and the ordering of my components.

class Graph extends Component {
  render() {
    return (
      <div className="graph">
        <XYPlot
          width={1100}
          height={300}>
          <HorizontalGridLines />
          <VerticalBarSeries 
            data={impressions}
          />

          <VerticalGridLines />
          <XAxis tickTotal={10} tickSize={3} />

          <YAxis /> 
        </XYPlot>
      </div>
    );
  }
}

[Lobosque]

I know this issue is closed but to avoid other people wasting time (I’ve been trough the same problem!): Do not forget to add the stylesheet to your app. There are instructions in the Readme.

[vandosant]

for anyone else coming here, like me, i found info on importing the styles here: https://github.com/uber/react-vis/blob/master/docs/getting-started/getting-started.md

i decided to import the styles into my component since it’s only needed in one place:

import '../node_modules/react-vis/dist/style.css';

or just:

import 'react-vis/dist/style.css';