Remove background styles from props passed to other children of chart, add a chart with background to chart demos

Author: maddles

demo/js/components/victory-chart-demo.js

@@ -182,30 +182,39 @@ class App extends React.Component {
     };
     const chartStyle = {
       parent: { border: "1px solid #ccc", margin: "2%", maxWidth: "40%" }
-    };
+    }
+    ;
     const axisStyle = {
       grid: { stroke: "grey", strokeWidth: 1 },
       axis: { stroke: "transparent" },
       ticks: { stroke: "transparent" },
       tickLabels: { fill: "none" }
     };
 
+    const bgStyle = {
+      background: { fill: "#e6e6ff" }
+    }
+
     return (
       <div className="demo">
         <h1>VictoryChart</h1>
         <div style={containerStyle}>
           <VictoryChart style={chartStyle} polar>
-            <VictoryScatter data={[{ x: -3, y: -3 }]} />
+            <VictoryScatter />
           </VictoryChart>
 
-          <VictoryChart style={chartStyle}>
+          <VictoryChart style={assign({}, chartStyle, bgStyle)}>
             <VictoryScatter data={[{ x: -3, y: -3 }]} />
           </VictoryChart>
 
           <VictoryChart style={chartStyle} theme={dependentAxisTheme}>
             <VictoryScatter />
           </VictoryChart>
 
+          <VictoryChart style={chartStyle} theme={dependentAxisTheme}>
+            <VictoryScatter />
+          </VictoryChart>
+
           <VictoryChart style={chartStyle} domainPadding={{ x: [0, 20] }}>
             <VictoryAxis dependentAxis style={axisStyle} />
             <VictoryAxis style={axisStyle} tickCount={6} />

packages/victory-chart/src/helper-methods.js

@@ -77,15 +77,13 @@ function getChildProps(child, props, calculatedProps) {
 
 function getStyles(props) {
   const styleProps = props.style && props.style.parent;
-  const background = props.style && props.style.background;
 
   return {
     parent: defaults({}, styleProps, {
       height: "100%",
       width: "100%",
       userSelect: "none"
-    }),
-    background
+    })
   };
 }
 
@@ -159,7 +157,6 @@ function getChildren(props, childComponents, calculatedProps) {
   childComponents = childComponents || getChildComponents(props);
   calculatedProps = calculatedProps || getCalculatedProps(props, childComponents);
   const baseStyle = calculatedProps.style.parent;
-  const backgroundStyle = calculatedProps.style.background;
   const { height, polar, theme, width } = props;
   const { origin, horizontal } = calculatedProps;
   const parentName = props.name || "chart";
@@ -168,7 +165,7 @@ function getChildren(props, childComponents, calculatedProps) {
     const role = child.type && child.type.role;
     const style = Array.isArray(child.props.style)
       ? child.props.style
-      : defaults({}, child.props.style, { parent: baseStyle, background: backgroundStyle });
+      : defaults({}, child.props.style, { parent: baseStyle });
     const childProps = getChildProps(child, props, calculatedProps);
     const name = child.props.name || `${parentName}-${role}-${index}`;
     const newProps = defaults(