Line chart - Threshold lines block ability to click on data point

[KarenGski]

I am submitting a...

• [ ] Feature request
• [ ] Design defect
• [x] Source code defect
• [ ] Demo/documentation defect
• [ ] Other

charts version:

Latest in the storybook as of date of issue creation: https://carbon-design-system.github.io/carbon-charts/react/?path=/story/line--line-with-thresholds-time-series (Not sure the version)

Issue description

When a data point falls on the threshold line, you cannot click on the data point; you can only click on the threshold. This is a problem because the user cannot access information about that data point.

Steps to produce the issue

1. Go to the line chart: threshold in the storybook: https://carbon-design-system.github.io/carbon-charts/react/?path=/story/line--line-with-thresholds-time-series
2. Change one of the data points to 10,000 (same as threshold)
3. Attempt to hover / click on the data point

Current behavior

On hover / click, the Threshold value is displayed. User cannot access the data point information.

Expected behavior

Data points should be clickable when they fall on the threshold.

Screenshot or recording

[number-00]

Hello, is this issue fixed in the latest version?

[fathom-alastair]

This still appears to be an issue in 0.54.7

Ultimately, some discretion is needed with respect to the order that layers are placed in the DOM. I can think of some scenarios where you'd want the threshold lines positioned above the marks and others (like this one) where you'd want to place them below.

Perhaps there might a way to add something like a z-index property to the layer options?