React-vis: LineSeries background color is filled

[spdhskfmeh]

import React from "react";
import { render } from "react-dom";
import {XYPlot, XAxis, YAxis, HorizontalGridLines, VerticalGridLines, LineSeries} from 'react-vis';

import "react-table/react-table.css";

var bgColors = { "Default": "#81b71a",
                    "Blue": "#00B1E1",
                    "Cyan": "#37BC9B",
                    "Green": "#8CC152",
                    "Red": "#E9573F",
                    "Yellow": "#F6BB42",
};
class App extends React.Component {
  constructor() {
    super();
    this.state = {
      chartData: [{x: 0, y: 8}, {x: 1, y: 5}, {x: 2, y: 4}, {x: 3, y: 9}, {x: 4, y: 1}, {x: 5, y: 7}, {x: 6, y: 6}, {x: 7, y: 3}, {x: 8, y: 2}, {x: 9, y: 0}]
    };
  }
  render() {
    const { data } = this.state;
    return (
      <div>
        <XYPlot height={70} width={350} style={{backgroundColor: bgColors.Yellow}}>
          <LineSeries color="black" data={this.state.chartData} />
        </XYPlot>
      </div>
    );
  }
}

The top code creates a line-list chart.
As I understand it, the background color of this chart should be yellow, but the result is black.
Could you please tell me what's wrong with my code?

[mcnuttandrew]

Hey @spdhskfmeh It looks like you haven't imported the style sheet! Go ahead and import the style via including

@import "./node_modules/react-vis/dist/style";

in your scss file and everything should be fine

[jckr]

note that we're working on a solution for when importing a css/scss file is too complicated.

[ioterateam]

hey, do you already have any solution? because im facing this problem too, line series make an area fill to close with black color , even im not using "fill to close" style -.-

[pjschaafsma]

How's that coming along?

[mcnuttandrew]

If using scss isn't your game you can always include the style sheet via a script tag, like:

<link rel="stylesheet" href="https://unpkg.com/react-vis/dist/style.css">

[pjschaafsma]

Oh! That would have been useful. I didn't expect so soon a reply, so went and figured a solution. Mind you, I'm a total noob to frontend development, and hand no css or scss in my app yet.

So, in case your situation is exactly like mine (React + webpack):

• Add a file called App.scss alongside your App.js with contents:
  @import "./node_modules/react-vis/dist/style";

• Add a rule in webpack.config.js
  { test: /\.scss$/, use: ["style-loader", "css-loader", "sass-loader"] }

• From the dir that contains your node_modules dir, run:
  npm install --save-dev style-loader css-loader sass-loader node-sass

• In your App.js, add a line to the top:
  import './App.scss;'

And I had to add the scss file to my watch patterns in package.json. I think that was it.

[borodayev]

What is the best way to fix this in case I've hashed class names during a webpack build?

P.S importing just .css file also doesn't work
P.P.S here is the solution :global { @import '../../../../../node_modules/react-vis/dist/main.scss'; }

[karataev]

I think line
import 'react-vis/dist/style.css';
should be in docs instead of importing scss file.

[SimeonC]

The reason for this is that the css applies fill: none;. You "technically" don't need to import the styling in the original example if you do this it works:

<LineSeries color="black" data={this.state.chartData} style={{ fill: 'none' }} />

[karataev]

How I landed to this issue.

1. I need a nice looking performant graph for my project. I already tried several solutions and they didn't work out. Oh, react-vis looks nice and it was created by uber, so I can be sure of it's quality.
2. npm install, follow README, add graph to my project
3. Graph looks weird: it's filled with black color and it's totally different to the example in README
4. Follow README again. "Include the built main CSS file in your HTML page or via SASS:". But I have no SASS in my project and I don't want to include an extra dependency just for one graph. What should I do? Is the package is broken and not maintaned anymore? Should I look for another graph package? Should I google how to fix the issue?
5. Land on this issue, find @mcnuttandrew solution, finally have the graph work as expected.
6. Write a comment that including CSS file to a project have less obstacles that including SASS file for most users.

react-vis is a great package, but for a first-time user it might be difficult to use.