Description

activeBar highlighting jumps to wrong bars when data contains null values. The tooltip's activeIndex references the original data array, but bar rendering uses the filtered array (nulls removed), causing index mismatch.

Changes:

• Added originalDataIndex field to BarRectangleItem to preserve data position before null filtering
• Updated BarRectangleWithActiveState to compare using originalDataIndex instead of filtered array index
• Added tests validating correct highlighting with sparse data

Example with missing data:

const data = [
  { name: 'A', value: 100 },
  { name: 'B', value: null },  // filtered out
  { name: 'C', value: 200 },
  { name: 'D', value: null },  // filtered out
  { name: 'E', value: 300 },
];

// Before: hovering 'E' (originalIndex=4) incorrectly highlighted bar at filteredIndex=2
// After: correctly highlights 'E' by matching originalDataIndex=4 to activeIndex=4
<Bar activeBar dataKey="value" />

Related Issue

See linked issue for reproduction case and screenshot showing incorrect highlighting offset.

Motivation and Context

Filtering null bars renumbers array indices, breaking the activeBar/tooltip index contract. This is fundamental to correct hover behavior with sparse data.

How Has This Been Tested?

• Added unit tests with missing data patterns (nulls at various positions)
• Verified all 13,888 existing tests pass
• TypeScript compilation verified
• CodeQL security scan passed

Screenshots (if appropriate):

See issue for before/after showing highlight jumping to wrong bar.

Types of changes

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to change)

Checklist:

• My change requires a change to the documentation.
• I have updated the documentation accordingly.
• I have added tests to cover my changes.
• I have added a storybook story or VR test, or extended an existing story or VR test to show my changes

• Fixes activeBar doesn't work properly if there is a missing data #6994

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.