Box plot tooltip workaround example

.changeset/forty-shrimps-hug.md

@@ -0,0 +1,5 @@
+---
+"victory-tooltip": minor
+---
+
+add new properties labelTarget and dataTargets for tooltip event support

demo/ts/components/victory-box-plot-demo.tsx

@@ -2,6 +2,7 @@
 import React from "react";
 import { VictoryChart } from "victory-chart";
 import { VictoryBoxPlot } from "victory-box-plot";
+import { VictoryTooltip } from "victory-tooltip";
 import { VictoryTheme } from "victory-core";
 import { range, random } from "lodash";
 
@@ -271,6 +272,28 @@ export default class VictoryBoxPlotDemo extends React.Component<
           boxWidth={10}
           data={this.state.data}
         />
+        <VictoryChart
+          style={chartStyle}
+          minDomain={0}
+          theme={VictoryTheme.clean}
+        >
+          <VictoryBoxPlot
+            minLabels
+            minLabelComponent={
+              <VictoryTooltip
+                labelTarget="minLabels"
+                dataTargets={["min", "max", "q1", "q3", "median"]}
+              />
+            }
+            data={[
+              { x: "red", y: [5, 10, 9, 2] },
+              { x: "blue", y: [1, 15, 6, 8] },
+              { x: "green", y: [3, 5, 6, 9] },
+              { x: "yellow", y: [5, 20, 8, 12] },
+              { x: "white", y: [2, 11, 12, 13] },
+            ]}
+          />
+        </VictoryChart>
       </div>
     );
   }

packages/victory-tooltip/src/victory-tooltip.tsx

@@ -39,6 +39,7 @@ export interface VictoryTooltipProps
   };
   constrainToVisibleArea?: boolean;
   cornerRadius?: NumberOrCallback;
+  dataTargets: string[];
   events?: any;
   height?: number;
   horizontal?: boolean;
@@ -49,6 +50,7 @@ export interface VictoryTooltipProps
   flyoutWidth?: NumberOrCallback;
   id?: number | string;
   index?: number | string;
+  labelTarget: string;
   orientation?: OrientationTypes | ((...args: any[]) => OrientationTypes);
   pointerLength?: NumberOrCallback;
   pointerOrientation?:
@@ -104,6 +106,8 @@ export class VictoryTooltip extends React.Component<VictoryTooltipProps> {
     labelComponent: <VictoryLabel />,
     flyoutComponent: <Flyout />,
     groupComponent: <g />,
+    labelTarget: "labels",
+    dataTargets: ["data"],
   };
 
   static defaultEvents(props: VictoryTooltipProps): {
@@ -112,29 +116,35 @@ export class VictoryTooltip extends React.Component<VictoryTooltipProps> {
   }[] {
     const activate = props.activateData
       ? [
-          { target: "labels", mutation: () => ({ active: true }) },
+          { target: props.labelTarget, mutation: () => ({ active: true }) },
           { target: "data", mutation: () => ({ active: true }) },
         ]
-      : [{ target: "labels", mutation: () => ({ active: true }) }];
+      : [{ target: props.labelTarget, mutation: () => ({ active: true }) }];
     const deactivate = props.activateData
       ? [
-          { target: "labels", mutation: () => ({ active: undefined }) },
+          {
+            target: props.labelTarget,
+            mutation: () => ({ active: undefined }),
+          },
           { target: "data", mutation: () => ({ active: undefined }) },
         ]
-      : [{ target: "labels", mutation: () => ({ active: undefined }) }];
-    return [
-      {
-        target: "data",
-        eventHandlers: {
-          onMouseOver: () => activate,
-          onFocus: () => activate,
-          onTouchStart: () => activate,
-          onMouseOut: () => deactivate,
-          onBlur: () => deactivate,
-          onTouchEnd: () => deactivate,
-        },
+      : [
+          {
+            target: props.labelTarget,
+            mutation: () => ({ active: undefined }),
+          },
+        ];
+    return props.dataTargets.map((dataTarget) => ({
+      target: dataTarget,
+      eventHandlers: {
+        onMouseOver: () => activate,
+        onFocus: () => activate,
+        onTouchStart: () => activate,
+        onMouseOut: () => deactivate,
+        onBlur: () => deactivate,
+        onTouchEnd: () => deactivate,
       },
-    ];
+    }));
   }
 
   id: string | number;

website/docs/charts/box-plot.mdx

@@ -311,3 +311,42 @@ They can also be embeded in other SVG components by using the `standalone` prop.
   />
 </svg>
 ```
+
+## Box Plot - Tooltips
+
+```jsx live
+<VictoryBoxPlot
+  minLabels
+  q3Labels
+  q3LabelComponent={
+    <VictoryTooltip
+      labelTarget="q3Labels"
+      dataTargets={["q3"]}
+    />
+  }
+  minLabelComponent={
+    <VictoryTooltip
+      labelTarget="minLabels"
+      dataTargets={[
+        "min",
+        "max",
+        "q1",
+        "median",
+      ]}
+    />
+  }
+  data={[
+    { x: "red", y: [5, 10, 9, 2] },
+    { x: "blue", y: [1, 15, 6, 8] },
+    { x: "green", y: [3, 5, 6, 9] },
+    {
+      x: "yellow",
+      y: [5, 20, 8, 12],
+    },
+    {
+      x: "white",
+      y: [2, 11, 12, 13],
+    },
+  ]}
+/>
+```