@automattic/charts 0.44.0 → 0.46.0

package/src/components/pie-chart/pie-chart.tsx

@@ -2,9 +2,10 @@ import { localPoint } from '@visx/event';
 import { Group } from '@visx/group';
 import { Pie } from '@visx/shape';
 import { useTooltip, useTooltipInPortal } from '@visx/tooltip';
+import { __ } from '@wordpress/i18n';
 import clsx from 'clsx';
 import { useCallback, useContext, useMemo } from 'react';
-import { useElementHeight } from '../../hooks';
+import { useElementHeight, useInteractiveLegendData } from '../../hooks';
 import {
 	GlobalChartsProvider,
 	useChartId,
@@ -70,6 +71,13 @@ export interface PieChartProps extends BaseChartProps< DataPointPercentage[] > {
 	 */
 	legendValueDisplay?: LegendValueDisplay;
 
+	/**
+	 * Enable interactive legend items that can toggle segment visibility.
+	 * Requires chartId and GlobalChartsProvider.
+	 * When segments are hidden, percentages are recalculated so visible segments total 100%.
+	 */
+	legendInteractive?: boolean;
+
 	/**
 	 * Use the children prop to render additional elements on the chart.
 	 */
@@ -147,6 +155,7 @@ const PieChartInternal = ( {
 	cornerScale = 0,
 	showLabels = true,
 	legendValueDisplay = 'percentage',
+	legendInteractive = false,
 	children = null,
 	tooltipOffsetX = 0,
 	tooltipOffsetY = -15,
@@ -171,14 +180,24 @@ const PieChartInternal = ( {
 		hideTooltip();
 	}, [ withTooltips, hideTooltip ] );
 
+	const { getElementStyles, isSeriesVisible } = useGlobalChartsContext();
+
+	// Filter and recalculate data for interactive legends
+	const { visibleData, allSegmentsHidden, legendData } = useInteractiveLegendData( {
+		data,
+		chartId,
+		legendInteractive,
+		isSeriesVisible,
+	} );
+
 	// Memoize legend options to prevent unnecessary re-calculations
 	const legendOptions = useMemo(
 		() => ( { showValues: true, legendValueDisplay } ),
 		[ legendValueDisplay ]
 	);
 
-	// Create legend items using the reusable hook
-	const legendItems = useChartLegendItems( data, legendOptions );
+	// Create legend items using legendData (has recalculated percentages for visible items)
+	const legendItems = useChartLegendItems( legendData, legendOptions );
 
 	const { isValid, message } = validateData( data );
 
@@ -204,8 +223,6 @@ const PieChartInternal = ( {
 		metadata: chartMetadata,
 	} );
 
-	const { getElementStyles } = useGlobalChartsContext();
-
 	if ( ! isValid ) {
 		return (
 			<div className={ clsx( 'pie-chart', styles[ 'pie-chart' ], className ) }>
@@ -225,7 +242,7 @@ const PieChartInternal = ( {
 	const centerX = width / 2;
 	const centerY = adjustedHeight / 2;
 
-	// Calculate the angle between each
+	// Calculate the angle between each (use original data length for consistent spacing)
 	const padAngle = gapScale * ( ( 2 * Math.PI ) / data.length );
 
 	const outerRadius = radius - padding;
@@ -235,10 +252,14 @@ const PieChartInternal = ( {
 	const cornerRadius = cornerScale ? Math.min( cornerScale * outerRadius, maxCornerRadius ) : 0;
 
 	// Map the data to include index for color assignment
-	const dataWithIndex = data.map( ( d, index ) => ( {
-		...d,
-		index,
-	} ) );
+	// When interactive, we need to find the original index to maintain consistent colors
+	const dataWithIndex = visibleData.map( d => {
+		const originalIndex = data.findIndex( item => item.label === d.label );
+		return {
+			...d,
+			index: originalIndex >= 0 ? originalIndex : 0,
+		};
+	} );
 
 	const accessors = {
 		value: ( d: DataPointPercentage ) => d.value,
@@ -270,94 +291,109 @@ const PieChartInternal = ( {
 					height={ adjustedHeight }
 				>
 					<Group top={ centerY } left={ centerX }>
-						<Pie< DataPointPercentage & { index: number } >
-							data={ dataWithIndex }
-							pieValue={ accessors.value }
-							outerRadius={ outerRadius }
-							innerRadius={ innerRadius }
-							padAngle={ padAngle }
-							cornerRadius={ cornerRadius }
-						>
-							{ pie => {
-								return pie.arcs.map( ( arc, index ) => {
-									const [ centroidX, centroidY ] = pie.path.centroid( arc );
-									const hasSpaceForLabel = arc.endAngle - arc.startAngle >= 0.25;
-									const handleMouseMove = ( event: MouseEvent< SVGElement > ) => {
-										if ( ! withTooltips ) {
-											return;
+						{ allSegmentsHidden ? (
+							<text
+								textAnchor="middle"
+								dy=".33em"
+								fill={ providerTheme.gridColor || '#ccc' }
+								fontSize="14"
+								fontFamily="-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif"
+							>
+								{ __(
+									'All segments are hidden. Click legend items to show data.',
+									'jetpack-charts'
+								) }
+							</text>
+						) : (
+							<Pie< DataPointPercentage & { index: number } >
+								data={ dataWithIndex }
+								pieValue={ accessors.value }
+								outerRadius={ outerRadius }
+								innerRadius={ innerRadius }
+								padAngle={ padAngle }
+								cornerRadius={ cornerRadius }
+							>
+								{ pie => {
+									return pie.arcs.map( ( arc, index ) => {
+										const [ centroidX, centroidY ] = pie.path.centroid( arc );
+										const hasSpaceForLabel = arc.endAngle - arc.startAngle >= 0.25;
+										const handleMouseMove = ( event: MouseEvent< SVGElement > ) => {
+											if ( ! withTooltips ) {
+												return;
+											}
+
+											// Get coordinates relative to the current target element
+											const coords = localPoint( event );
+											if ( coords ) {
+												// Account for legend offset when legend is on top
+												const legendOffset =
+													showLegend && legendPosition === 'top' ? legendHeight : 0;
+												showTooltip( {
+													tooltipData: arc.data,
+													tooltipLeft: coords.x + tooltipOffsetX,
+													tooltipTop: coords.y + legendOffset + tooltipOffsetY,
+												} );
+											}
+										};
+
+										const pathProps: SVGProps< SVGPathElement > & { 'data-testid'?: string } = {
+											d: pie.path( arc ) || '',
+											fill: accessors.fill( arc.data ),
+											'data-testid': 'pie-segment',
+										};
+
+										const groupProps: SVGProps< SVGGElement > = {};
+										if ( withTooltips ) {
+											groupProps.onMouseMove = handleMouseMove;
+											groupProps.onMouseLeave = onMouseLeave;
 										}
 
-										// Get coordinates relative to the current target element
-										const coords = localPoint( event );
-										if ( coords ) {
-											// Account for legend offset when legend is on top
-											const legendOffset =
-												showLegend && legendPosition === 'top' ? legendHeight : 0;
-											showTooltip( {
-												tooltipData: arc.data,
-												tooltipLeft: coords.x + tooltipOffsetX,
-												tooltipTop: coords.y + legendOffset + tooltipOffsetY,
-											} );
-										}
-									};
-
-									const pathProps: SVGProps< SVGPathElement > & { 'data-testid'?: string } = {
-										d: pie.path( arc ) || '',
-										fill: accessors.fill( arc.data ),
-										'data-testid': 'pie-segment',
-									};
-
-									const groupProps: SVGProps< SVGGElement > = {};
-									if ( withTooltips ) {
-										groupProps.onMouseMove = handleMouseMove;
-										groupProps.onMouseLeave = onMouseLeave;
-									}
-
-									// Estimate text width more accurately for background sizing
-									const fontSize = 12;
-									const estimatedTextWidth = getStringWidth( arc.data.label, { fontSize } );
-									const labelPadding = 6;
-									const backgroundWidth = estimatedTextWidth + labelPadding * 2;
-									const backgroundHeight = fontSize + labelPadding * 2;
-
-									return (
-										<g key={ `arc-${ index }` } { ...groupProps }>
-											<path { ...pathProps } />
-											{ showLabels && hasSpaceForLabel && (
-												<g>
-													{ providerTheme.labelBackgroundColor && (
-														<rect
-															x={ centroidX - backgroundWidth / 2 }
-															y={ centroidY - backgroundHeight / 2 }
-															width={ backgroundWidth }
-															height={ backgroundHeight }
-															fill={ providerTheme.labelBackgroundColor }
-															rx={ 4 }
-															ry={ 4 }
+										// Estimate text width more accurately for background sizing
+										const fontSize = 12;
+										const estimatedTextWidth = getStringWidth( arc.data.label, { fontSize } );
+										const labelPadding = 6;
+										const backgroundWidth = estimatedTextWidth + labelPadding * 2;
+										const backgroundHeight = fontSize + labelPadding * 2;
+
+										return (
+											<g key={ `arc-${ index }` } { ...groupProps }>
+												<path { ...pathProps } />
+												{ showLabels && hasSpaceForLabel && (
+													<g>
+														{ providerTheme.labelBackgroundColor && (
+															<rect
+																x={ centroidX - backgroundWidth / 2 }
+																y={ centroidY - backgroundHeight / 2 }
+																width={ backgroundWidth }
+																height={ backgroundHeight }
+																fill={ providerTheme.labelBackgroundColor }
+																rx={ 4 }
+																ry={ 4 }
+																pointerEvents="none"
+															/>
+														) }
+														<text
+															x={ centroidX }
+															y={ centroidY }
+															dy=".33em"
+															fill={ providerTheme.labelTextColor || '#333' }
+															fontSize={ fontSize }
+															textAnchor="middle"
 															pointerEvents="none"
-														/>
-													) }
-													<text
-														x={ centroidX }
-														y={ centroidY }
-														dy=".33em"
-														fill={ providerTheme.labelTextColor || '#333' }
-														fontSize={ fontSize }
-														textAnchor="middle"
-														pointerEvents="none"
-													>
-														{ arc.data.label }
-													</text>
-												</g>
-											) }
-										</g>
-									);
-								} );
-							} }
-						</Pie>
+														>
+															{ arc.data.label }
+														</text>
+													</g>
+												) }
+											</g>
+										);
+									} );
+								} }
+							</Pie>
+						) }
 
 						{ /* Render SVG children (like Group, Text) inside the SVG */ }
-						{ svgChildren }
+						{ ! allSegmentsHidden && svgChildren }
 					</Group>
 				</svg>
 
@@ -373,6 +409,7 @@ const PieChartInternal = ( {
 						shape={ legendShape }
 						ref={ legendRef }
 						chartId={ chartId }
+						interactive={ legendInteractive }
 					/>
 				) }
 

package/src/components/pie-chart/test/pie-chart.test.tsx

@@ -334,4 +334,178 @@ describe( 'PieChart', () => {
 			expect( screen.getByRole( 'tooltip' ) ).toHaveTextContent( 'Test: 42' );
 		} );
 	} );
+
+	describe( 'Interactive Legend', () => {
+		test( 'filters segments when interactive legend is enabled and segment is toggled', async () => {
+			const user = userEvent.setup();
+			const testData = [
+				{ label: 'Segment A', value: 50, percentage: 50 },
+				{ label: 'Segment B', value: 50, percentage: 50 },
+			];
+
+			renderWithTheme( {
+				data: testData,
+				showLegend: true,
+				legendInteractive: true,
+				chartId: 'test-interactive-pie-chart',
+			} );
+
+			// Initially both segments should be visible
+			let segments = screen.getAllByTestId( 'pie-segment' );
+			expect( segments ).toHaveLength( 2 );
+
+			// Click first legend item to hide segment A
+			const legendItem = screen.getByRole( 'button', { name: /Segment A/i } );
+			await user.click( legendItem );
+
+			// Only one segment should remain
+			await waitFor( () => {
+				segments = screen.getAllByTestId( 'pie-segment' );
+				expect( segments ).toHaveLength( 1 );
+			} );
+
+			// Legend item should be marked as hidden
+			expect( legendItem ).toHaveAttribute( 'aria-pressed', 'false' );
+		} );
+
+		test( 'shows empty state when all segments are hidden', async () => {
+			const user = userEvent.setup();
+			const testData = [
+				{ label: 'Segment A', value: 50, percentage: 50 },
+				{ label: 'Segment B', value: 50, percentage: 50 },
+			];
+
+			renderWithTheme( {
+				data: testData,
+				showLegend: true,
+				legendInteractive: true,
+				chartId: 'test-all-hidden-pie-chart',
+			} );
+
+			// Initially should have 2 segments
+			expect( screen.getAllByTestId( 'pie-segment' ) ).toHaveLength( 2 );
+
+			// Hide both segments by clicking legend items
+			const legendItems = screen.getAllByRole( 'button' );
+			await user.click( legendItems[ 0 ] );
+
+			// Wait for first segment to be hidden
+			await waitFor( () => {
+				expect( screen.getAllByTestId( 'pie-segment' ) ).toHaveLength( 1 );
+			} );
+
+			await user.click( legendItems[ 1 ] );
+
+			// Wait for all segments to be hidden
+			await waitFor( () => {
+				expect( screen.queryAllByTestId( 'pie-segment' ) ).toHaveLength( 0 );
+			} );
+
+			// Empty state should appear
+			expect( screen.getByText( /all segments are hidden/i ) ).toBeInTheDocument();
+
+			// Legend items should still be present (just marked inactive)
+			expect( screen.getAllByRole( 'button' ) ).toHaveLength( 2 );
+		} );
+
+		test( 'does not filter segments when legendInteractive is false', () => {
+			const testData = [
+				{ label: 'Segment A', value: 50, percentage: 50 },
+				{ label: 'Segment B', value: 50, percentage: 50 },
+			];
+
+			renderWithTheme( {
+				data: testData,
+				showLegend: true,
+				legendInteractive: false,
+				chartId: 'test-non-interactive-pie-chart',
+			} );
+
+			// Legend items should not be buttons
+			const buttons = screen.queryAllByRole( 'button' );
+			expect( buttons ).toHaveLength( 0 );
+
+			// All segments should be visible
+			const segments = screen.getAllByTestId( 'pie-segment' );
+			expect( segments ).toHaveLength( 2 );
+		} );
+
+		test( 'maintains consistent colors when segments are hidden', async () => {
+			const user = userEvent.setup();
+			const testData = [
+				{ label: 'Segment A', value: 30, percentage: 30 },
+				{ label: 'Segment B', value: 40, percentage: 40 },
+				{ label: 'Segment C', value: 30, percentage: 30 },
+			];
+
+			renderWithTheme( {
+				data: testData,
+				showLegend: true,
+				legendInteractive: true,
+				chartId: 'test-color-consistency-pie-chart',
+			} );
+
+			// Get initial segment colors
+			const initialSegments = screen.getAllByTestId( 'pie-segment' );
+			const segmentBColor = initialSegments[ 1 ].getAttribute( 'fill' );
+
+			// Hide Segment A
+			const legendItemA = screen.getByRole( 'button', { name: /Segment A/i } );
+			await user.click( legendItemA );
+
+			// Segment B should maintain its color (now it's the first visible segment)
+			await waitFor( () => {
+				expect( screen.getAllByTestId( 'pie-segment' ) ).toHaveLength( 2 );
+			} );
+
+			const remainingSegments = screen.getAllByTestId( 'pie-segment' );
+			expect( remainingSegments[ 0 ] ).toHaveAttribute( 'fill', segmentBColor );
+		} );
+
+		test( 'recalculates legend percentages when segments are hidden', async () => {
+			const user = userEvent.setup();
+			const testData = [
+				{ label: 'Segment A', value: 25, percentage: 25 },
+				{ label: 'Segment B', value: 50, percentage: 50 },
+				{ label: 'Segment C', value: 25, percentage: 25 },
+			];
+
+			renderWithTheme( {
+				data: testData,
+				showLegend: true,
+				legendInteractive: true,
+				legendValueDisplay: 'percentage',
+				chartId: 'test-percentage-recalc-pie-chart',
+			} );
+
+			// Initially, legend should show original percentages
+			const legendItems = screen.getAllByTestId( 'legend-item' );
+			expect( legendItems ).toHaveLength( 3 );
+			expect( screen.getAllByText( '25%' ) ).toHaveLength( 2 ); // A and C both 25%
+			expect( screen.getByText( '50%' ) ).toBeInTheDocument();
+
+			// Hide Segment A (25%)
+			const legendItemA = screen.getByRole( 'button', { name: /Segment A/i } );
+			await user.click( legendItemA );
+
+			// Now B and C should recalculate: B = 50/75 = 66.67%, C = 25/75 = 33.33%
+			await waitFor( () => {
+				expect( screen.getByText( /66\.6/ ) ).toBeInTheDocument();
+			} );
+
+			// All 3 legend items should remain (hidden items stay in legend)
+			const remainingItems = screen.getAllByTestId( 'legend-item' );
+			expect( remainingItems ).toHaveLength( 3 );
+
+			// Segment A should still show original 25% (hidden items don't recalculate)
+			expect( legendItemA ).toHaveAttribute( 'aria-pressed', 'false' );
+			expect( screen.getAllByText( '25%' ) ).toHaveLength( 1 ); // Only A shows 25%
+
+			// Segment B should now show ~67% (50 out of remaining 75)
+			expect( screen.getByText( /66\.6/ ) ).toBeInTheDocument();
+
+			// Segment C should now show ~33% (25 out of remaining 75)
+			expect( screen.getByText( /33\.3/ ) ).toBeInTheDocument();
+		} );
+	} );
 } );

package/src/components/pie-semi-circle-chart/pie-semi-circle-chart.tsx

@@ -3,9 +3,10 @@ import { Group } from '@visx/group';
 import { Pie } from '@visx/shape';
 import { Text } from '@visx/text';
 import { useTooltip, useTooltipInPortal } from '@visx/tooltip';
+import { __ } from '@wordpress/i18n';
 import clsx from 'clsx';
 import { useCallback, useContext, useMemo } from 'react';
-import { useElementHeight } from '../../hooks';
+import { useElementHeight, useInteractiveLegendData } from '../../hooks';
 import {
 	GlobalChartsProvider,
 	useChartId,
@@ -70,6 +71,13 @@ export interface PieSemiCircleChartProps extends BaseChartProps< DataPointPercen
 	 */
 	legendValueDisplay?: LegendValueDisplay;
 
+	/**
+	 * Enable interactive legend items that can toggle segment visibility.
+	 * Requires chartId and GlobalChartsProvider.
+	 * When segments are hidden, percentages are recalculated so visible segments total 100%.
+	 */
+	legendInteractive?: boolean;
+
 	/**
 	 * Horizontal offset for tooltip positioning in pixels (default: 0)
 	 */
@@ -133,6 +141,7 @@ const PieSemiCircleChartInternal: FC< PieSemiCircleChartProps > = ( {
 	legendItemClassName,
 	legendShape = 'circle',
 	legendValueDisplay = 'percentage',
+	legendInteractive = false,
 	label,
 	note,
 	className,
@@ -183,7 +192,15 @@ const PieSemiCircleChartInternal: FC< PieSemiCircleChartProps > = ( {
 	// Validate data first to get validation result
 	const { isValid, message } = validateData( data );
 
-	const { getElementStyles } = useGlobalChartsContext();
+	const { getElementStyles, isSeriesVisible } = useGlobalChartsContext();
+
+	// Filter and recalculate data for interactive legends
+	const { visibleData, allSegmentsHidden, legendData } = useInteractiveLegendData( {
+		data,
+		chartId,
+		legendInteractive,
+		isSeriesVisible,
+	} );
 
 	// Define accessors with useMemo to avoid changing dependencies
 	const accessors = useMemo(
@@ -205,8 +222,8 @@ const PieSemiCircleChartInternal: FC< PieSemiCircleChartProps > = ( {
 		[ legendValueDisplay ]
 	);
 
-	// Create legend items using the reusable hook
-	const legendItems = useChartLegendItems( data, legendOptions );
+	// Create legend items using legendData (has recalculated percentages for visible items)
+	const legendItems = useChartLegendItems( legendData, legendOptions );
 
 	// Process children to extract compound components
 	const { svgChildren, htmlChildren, otherChildren } = useChartChildren(
@@ -253,10 +270,14 @@ const PieSemiCircleChartInternal: FC< PieSemiCircleChartProps > = ( {
 	const innerRadius = radius * ( 1 - thickness );
 
 	// Map data with index for color assignment
-	const dataWithIndex = data.map( ( d, index ) => ( {
-		...d,
-		index,
-	} ) );
+	// When interactive, we need to find the original index to maintain consistent colors
+	const dataWithIndex = visibleData.map( d => {
+		const originalIndex = data.findIndex( item => item.label === d.label );
+		return {
+			...d,
+			index: originalIndex >= 0 ? originalIndex : 0,
+		};
+	} );
 
 	// Configure pie angles based on clockwise direction
 	const startAngle = clockwise ? -Math.PI / 2 : Math.PI / 2;
@@ -287,57 +308,74 @@ const PieSemiCircleChartInternal: FC< PieSemiCircleChartProps > = ( {
 				>
 					{ /* Main chart group centered horizontally and positioned at bottom */ }
 					<Group top={ chartHeight } left={ width / 2 }>
-						{ /* Pie chart */ }
-						<Pie< DataPointPercentage & { index: number } >
-							data={ dataWithIndex }
-							pieValue={ accessors.value }
-							outerRadius={ radius }
-							innerRadius={ innerRadius }
-							cornerRadius={ 3 }
-							padAngle={ PAD_ANGLE }
-							startAngle={ startAngle }
-							endAngle={ endAngle }
-							pieSort={ accessors.sort }
-						>
-							{ pie => {
-								return pie.arcs.map( arc => (
-									<g
-										key={ arc.data.label }
-										onMouseMove={ withTooltips ? handleArcMouseMove( arc ) : undefined }
-										onMouseLeave={ withTooltips ? handleMouseLeave : undefined }
-									>
-										<path
-											d={ pie.path( arc ) || '' }
-											fill={ accessors.fill( arc.data ) }
-											data-testid="pie-segment"
-										/>
-									</g>
-								) );
-							} }
-						</Pie>
-
-						{ /* Label and note text */ }
-						<Group>
-							<Text
-								textAnchor="middle"
-								verticalAnchor="start"
-								y={ -40 } // Position above the chart with space for note
-								className={ styles.label }
-							>
-								{ label }
-							</Text>
-							<Text
+						{ allSegmentsHidden ? (
+							<text
 								textAnchor="middle"
-								verticalAnchor="start"
-								y={ -20 } // Position between label and chart
-								className={ styles.note }
+								y={ -radius / 2 }
+								fill="#ccc"
+								fontSize="14"
+								fontFamily="-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif"
 							>
-								{ note }
-							</Text>
-						</Group>
-
-						{ /* Render SVG children from composition API */ }
-						{ svgChildren }
+								{ __(
+									'All segments are hidden. Click legend items to show data.',
+									'jetpack-charts'
+								) }
+							</text>
+						) : (
+							<>
+								{ /* Pie chart */ }
+								<Pie< DataPointPercentage & { index: number } >
+									data={ dataWithIndex }
+									pieValue={ accessors.value }
+									outerRadius={ radius }
+									innerRadius={ innerRadius }
+									cornerRadius={ 3 }
+									padAngle={ PAD_ANGLE }
+									startAngle={ startAngle }
+									endAngle={ endAngle }
+									pieSort={ accessors.sort }
+								>
+									{ pie => {
+										return pie.arcs.map( arc => (
+											<g
+												key={ arc.data.label }
+												onMouseMove={ withTooltips ? handleArcMouseMove( arc ) : undefined }
+												onMouseLeave={ withTooltips ? handleMouseLeave : undefined }
+											>
+												<path
+													d={ pie.path( arc ) || '' }
+													fill={ accessors.fill( arc.data ) }
+													data-testid="pie-segment"
+												/>
+											</g>
+										) );
+									} }
+								</Pie>
+
+								{ /* Label and note text */ }
+								<Group>
+									<Text
+										textAnchor="middle"
+										verticalAnchor="start"
+										y={ -40 } // Position above the chart with space for note
+										className={ styles.label }
+									>
+										{ label }
+									</Text>
+									<Text
+										textAnchor="middle"
+										verticalAnchor="start"
+										y={ -20 } // Position between label and chart
+										className={ styles.note }
+									>
+										{ note }
+									</Text>
+								</Group>
+
+								{ /* Render SVG children from composition API */ }
+								{ ! allSegmentsHidden && svgChildren }
+							</>
+						) }
 					</Group>
 				</svg>
 
@@ -360,6 +398,7 @@ const PieSemiCircleChartInternal: FC< PieSemiCircleChartProps > = ( {
 						shape={ legendShape }
 						ref={ legendRef }
 						chartId={ chartId }
+						interactive={ legendInteractive }
 					/>
 				) }