React-vis: Gridlines not rendering

[rmammina]

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>
    );
  }
}

[rmammina]

Not sure if we can set a strokewidth property on this, right now there's no width.

[rmammina]

I was able to get them to show by specifying the line thickness on the css class.

  .rv-xy-plot__grid-lines__line {
    stroke: gray;
    stroke-width: 1;
  }

Would be nice if these were set by default.

[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.

[wpcarro]

Thanks, @Lobosque. Where is this documented? I'm not seeing the instructions here, which is where I expected to find this kind of information.

[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';

[squillace91]

It seems mine is loading the styles.css, also I can see in my dev tools the colors. However, this is how my demo graph is showing up.

Did anyone have this problem before?