Override VictoryGroup styles with VictoryBoxplot (#2824)

Author: acharyakavita

.changeset/rare-spies-agree.md

@@ -0,0 +1,5 @@
+---
+"victory-core": patch
+---
+
+allow VictoryBoxPlot childStyles to override VictoryGroup parent styles

demo/ts/components/group-demo.tsx

@@ -9,6 +9,7 @@ import { VictoryScatter } from "victory-scatter";
 import { VictoryErrorBar } from "victory-errorbar";
 import { VictoryTooltip } from "victory-tooltip";
 import { VictoryVoronoi } from "victory-voronoi";
+import { VictoryBoxPlot } from "victory-box-plot";
 import { range, random } from "lodash";
 
 class App extends React.Component {
@@ -160,6 +161,27 @@ class App extends React.Component {
               />
             </VictoryGroup>
           </VictoryChart>
+          <VictoryGroup style={chartStyle}>
+              <VictoryBoxPlot
+                minLabels
+                maxLabels
+                data={[
+                  { x: 1, y: [1, 2, 3, 5] },
+                  { x: 2, y: [3, 2, 8, 10] },
+                  { x: 3, y: [2, 8, 6, 5] },
+                  { x: 4, y: [1, 3, 2, 9] },
+                ]}
+                style={{
+                  min: { stroke: "tomato" },
+                  max: { stroke: "orange" },
+                  q1: { fill: "tomato" },
+                  q3: { fill: "orange" },
+                  median: { stroke: "white", strokeWidth: 2 },
+                  minLabels: { fill: "tomato" },
+                  maxLabels: { fill: "orange" },
+                }}
+              />
+            </VictoryGroup>
         </div>
       </div>
     );

packages/victory-core/src/victory-util/wrapper.tsx

@@ -345,6 +345,7 @@ export function getChildStyle(child, index, calculatedProps) {
   );
   const labelsStyle = defaults({}, childStyle.labels, style.labels);
   return {
+    ...childStyle,
     parent: style.parent,
     data: dataStyle,
     labels: labelsStyle,

stories/victory-box-plot.stories.tsx

@@ -6,6 +6,7 @@ import seedrandom from "seedrandom";
 
 import { VictoryBoxPlot } from "../packages/victory-box-plot";
 import { VictoryChart } from "../packages/victory-chart";
+import { VictoryGroup } from "../packages/victory-group";
 import { VictoryTooltip } from "../packages/victory-tooltip";
 import {
   VictoryTheme,
@@ -360,3 +361,29 @@ export const DisableInlineStyles = () => {
     </>
   );
 };
+
+export const VictoryGroupAsParent = () => {
+  return (
+    <VictoryGroup style={parentStyle}>
+      <VictoryBoxPlot
+        minLabels
+        maxLabels
+        data={[
+          { x: 1, y: [1, 2, 3, 5] },
+          { x: 2, y: [3, 2, 8, 10] },
+          { x: 3, y: [2, 8, 6, 5] },
+          { x: 4, y: [1, 3, 2, 9] },
+        ]}
+        style={{
+          min: { stroke: "tomato" },
+          max: { stroke: "orange" },
+          q1: { fill: "tomato" },
+          q3: { fill: "orange" },
+          median: { stroke: "white", strokeWidth: 2 },
+          minLabels: { fill: "tomato" },
+          maxLabels: { fill: "orange" },
+        }}
+      />
+    </VictoryGroup>
+  );
+};