React-Vis messed up plot area fill

Question

I'm trying to create a line graph in React-vis. I've got most of it to look the way I wanted except the background color of the chart. Here's the code:

          <XYPlot
            margin={{top: 0, bottom: 150, left: 100, right: 0}}
            xType="time"
            width={1000}
            height={700}>
            <XAxis 
              tickFormat={
                d => {
                  return d.toLocaleDateString();
                }
              }
              tickLabelAngle={-90}
              tickTotal={12}
              style={{
                line: { stroke: '#ADDDE1' },
                ticks: { stroke: '#ADDDE1', },
                text: { stroke: 'none', fill: "#030104", fontWeight: 600 },
              }}
            />
            <YAxis
              style={{
                line: { stroke: '#ADDDE1' },
                ticks: { stroke: '#ADDDE1', },
                text: { stroke: 'none', fill: "#030104", fontWeight: 600 },
              }}
            />
            <ChartLabel
              text="Signups"
              includeMargin={true}
              yPercent={0.25}
            />
            <ChartLabel
              text="Date (MM/DD/YYYY)"
              includeMargin={true}
              yPercent={0.79}
              xPercent={0.5}
            />
            <LineSeries
              data={data}
              stroke='lightblue'
              fill = 'white'
            />
          </XYPlot>

My data is in the form

[{
  x: Date
  y: number
}]

This is the result: https://ibb.co/yPwfRWF

I'm not sure why the colors appear to be inverted. I just want a white background with a light blue stroke with no area fill. Any advice?

React-Vis messed up plot area fill

0 Answers0