Description
Legend Select and Hide Not Working in Partition Chart
Description:
When using the @elastic/charts library, I encountered an issue where the legend select and hide functionality is not working correctly in a partition chart. Specifically, the legend items are displayed, but clicking on them does not hide or show the corresponding segments in the chart.
Steps to Reproduce:
Create a partition chart using the @elastic/charts library.
Add a legend to the chart using the Settings component.
Observe that clicking on legend items does not affect the visibility of chart segments.
Expected Behavior:
Clicking on a legend item should toggle the visibility of the corresponding segment in the partition chart.
Actual Behavior:
Clicking on a legend item does nothing; the chart segments remain visible regardless of the legend item state.
Code Example:
`import React from "react";
import { Chart, Partition, Settings } from "@elastic/charts";
export default function App() {
return (
<div className="App">
<Chart size={["100%", 500]}>
<Settings
showLegend
legendSort={(...args) => {
console.log(args);
return 0;
}}
/>
<Partition
id="spec_1"
data={[
{ cat1: "A", cat2: "A", val: 1 },
{ cat1: "A", cat2: "B", val: 1 },
{ cat1: "B", cat2: "A", val: 1 },
{ cat1: "B", cat2: "B", val: 1 },
{ cat1: "C", cat2: "A", val: 1 },
{ cat1: "C", cat2: "B", val: 1 }
]}
valueAccessor={(d) => d.val}
layers={[
{
groupByRollup: (d: { cat1: string; cat2: string; val: number }) =>
d.cat1
}
]}
/>
</Chart>
</div>
);
}`
Environment Details
Kibana Version: 8.12.0
Elastic Charts Version: As included in Kibana 8.12.0
Browser: All supported browsers
OS: Linux