LineSeries background color is filled

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

[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' }} />