[charts] `onItemClick` does not work for LinePlot when used along with AreaPlot

[sagar110599]

Latest version

• [X] I have tested the latest version

Steps to reproduce

Link to live example: (required)

Current behavior

I have Multiple LinePlots where each of them has its area attribute to be true. OnItemClick only works for the topmost LinePlot and fails to trigger for ALL other Lines.

Expected behavior

No response

Context

No response

Your environment

npx @mui/envinfo

``` Don't forget to mention which browser you used. Output from `npx @mui/envinfo` goes here. ```

Search keywords: OnItemClick

[michelengelen]

@JCQuintas sounds like it could be an issue with one Area overlaying all others. 👀

[michelengelen]

To help us diagnose the issue efficiently, could you provide a stripped-down reproduction test case using the latest version? A live example would be fantastic! ✨

For your convenience, our documentation offers templates and guides on creating targeted examples: Support - Bug reproduction

Just a friendly reminder: clean, functional code with minimal dependencies is most helpful. Complex code can make it tougher to pinpoint the exact issue. Sometimes, simply going through the process of creating a minimal reproduction can even clarify the problem itself!

Thanks for your understanding! 🙇🏼

[sagar110599]

screen-capture (1).webm

[sagar110599]

Yes The following example involves Multiple Lines and respective AreaPlots both and there is a overlap. I think even though its overlap still there should be means to get the onItemClick for LinePlot right

[michelengelen]

Thanks for the video, but for us to look into the issue we would need a code reproduction. Could you provide one please?

[sagar110599]

  <ResponsiveChartContainer
    xAxis={[
      props.config.xAxis
    ]}
    yAxis={[
      props.config.yAxis
    ]}
    series={props.config?.series}
    width={props.config.width}
    height={props.config.height}
  >

    <BarPlot onItemClick={(event: any, identifier: any) => onChartItemClick({ 'event': event, 'identifier': identifier, 'elementType': 'bar' }, props)} />
    <LinePlot onItemClick={(event: any, identifier: any) => onChartItemClick({ 'event': event, 'identifier': identifier, 'elementType': 'line' }, props)} />
    <ChartsXAxis disableTicks={true} disableLine={true} />
    <ChartsYAxis disableTicks={true} disableLine={true} />
    <MarkPlot onItemClick={(event: any, identifier: any) => onChartItemClick({ 'event': event, 'identifier': identifier, 'elementType': 'mark' }, props)} />
    <LineHighlightPlot />
    <AreaPlot />
    <ChartsGrid horizontal={true} />
  </ResponsiveChartContainer>

Input props is as folllows l1 = [0, 10, 14, 18, 22]; l2 = [0, 11, 13, 16, 20]; l3 = [0, 9, 12, 13, 15]; config = { xAxis: { id: 'years', scaleType: 'point', data: [0, 1, 2, 3, 4, 5], valueFormatter: (value: any) => value + ' yr', }, yAxis: { id: 'price', scaleType: 'linear', valueFormatter: (value: any) => value + 'k', }, series: [ { id: 'l1', data: this.l1, area: true, color: '#5B3C9C', type: 'line', label: 'L1', curve: 'natural', showMark: (dataPoint: any) => dataPoint.index === this.l1.length - 1, }, { id: 'l2', data: this.l2, area: true, color: '#AA80E7', type: 'line', label: 'L2', curve: 'natural', showMark: (dataPoint: any) => dataPoint.index === this.l2.length - 1, }, { id: 'l3', data: this.l3, area: true, color: '#9d7aff', type: 'line', label: 'L3', curve: 'natural', showMark: (dataPoint: any) => dataPoint.index === this.l3.length - 1, }, ], width: 380, height: 380, };

[sagar110599]

This is the only code i could post

[JCQuintas]

@sagar110599 in your case you can either add the handler to the AreaPlot

<AreaPlot
  onItemClick={(event: any, identifier: any) =>
    onChartItemClick(
      { event: event, identifier: identifier, elementType: "line" },
      config
    )
  }
/>

of if you need it specifically on the lines, you can move the LinePlot after the AreaPlot, though the lines will show on top of the areas. https://codesandbox.io/s/blissful-frost-5q8gk2?file=/src/Demo.tsx:2227-2468

<AreaPlot />
<LinePlot
  onItemClick={(event: any, identifier: any) =>
    onChartItemClick(
      { event: event, identifier: identifier, elementType: "line" },
      config
    )
  }
/>

[alexfauquette]

Maybe adding some information in the line docs saying that <LinePlot /> needs to be on top of the <AreaPlot /> could improve the DX

[sagar110599]

Thank you all. Sorry for the late response but the above solution works like a charm.

[michelengelen]

Great to hear @sagar110599 ... We did add this to the board already to provide some additional information in the docs regarding this! 👍🏼