diff --git a/website/docs/charts/box-plot.mdx b/website/docs/charts/box-plot.mdx index 03d159388..83c4d2694 100644 --- a/website/docs/charts/box-plot.mdx +++ b/website/docs/charts/box-plot.mdx @@ -252,6 +252,111 @@ Events can be handled by passing an array of event objects to the `events` prop ``` +## Box Plot - Tooltips + +Tooltips are not displayed by default on VictoryBoxPlot; to enable tooltips, use a custom events prop to handle interactions. + +```jsx live noInline +function App() { + const activate = + (label: string) => () => + [ + { + target: label, + mutation: () => ({ + active: true, + }), + }, + ]; + + const deactivate = + (label: string) => () => + [ + { + target: label, + mutation: () => ({ + active: undefined, + }), + }, + ]; + + const dataTypes = [ + "min", + "max", + "q1", + "q3", + "median", + ]; + + const events = dataTypes.map( + (dataType) => ({ + target: dataType, + eventHandlers: { + onMouseOver: activate( + `${dataType}Labels`, + ), + onFocus: activate( + `${dataType}Labels`, + ), + onTouchStart: activate( + `${dataType}Labels`, + ), + onMouseOut: deactivate( + `${dataType}Labels`, + ), + onBlur: deactivate( + `${dataType}Labels`, + ), + onTouchEnd: deactivate( + `${dataType}Labels`, + ), + }, + }), + ); + + return ( + + } + maxLabelComponent={ + + } + q1LabelComponent={ + + } + q3LabelComponent={ + + } + medianLabelComponent={ + + } + 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], + }, + ]} + /> + ); +} + +render(); +``` + ## Standalone Rendering Box Plot charts can be rendered outside a VictoryChart.