[APM] Service Overview: Mouse over on the "Latency" graph doesn't display the point in time circle on other graphs (Traffic and Error Rate)

[cyrille-leclerc]

Versions
Kibana: 7.11 master branch
APM Server: (if relevant)
Elasticsearch: (if relevant)

Problem Description

When positioning my cursor on a graph (e.g. the latency graph), I see as desired the overlay widget on each graph ("Latency" on which I have my cursor but also on "Traffic" and "Error Rate") but I don't see the "circle" to clearly indicate the point in time on the graph I have not moused over.

[elasticmachine]

Pinging @elastic/apm-ui (Team:apm)

[cauemarcondes]

I believe Elastic Charts doesn't support it. @markov00 could you confirm it?

[formgeist]

The position is indicated with the vertical crosshair but it's hidden behind the tooltip on the synced visualizations. I agree it would be a great enhancement if there was a clearer way to indicate the selected position. But I think the chart doesn't show circle indications for all time-series, only the single time-series selected.

[sorenlouv]

The position is indicated with the vertical crosshair but it's hidden behind the tooltip on the synced visualizations

I don't think the vertical crosshair is covered by the tooltip - it's just very low contrast and hard to see. Increasing the contrast would be good.

[cyrille-leclerc]

Good catch @sqren. When I zoom, I see the line. increasing the contrast would fix the problem.

[formgeist]

The crosshair contrast is already reported as a bug in Elastic Charts elastic/elastic-charts#925 - the problem I'm seeing is that the tooltips that show aren't adjacent to the vertical line, but on top (covering up the visualization). In any case, it's an issue in the charts library and not something we need to track here. I've opened an enhancement issue for the tooltip position elastic/elastic-charts#966

With regards to the circle around the select point, that's due to the cursor interactions in the Elastic charts visualizations, where you can highlight each individual time-series in the visualization. Because of this, I don't see how we would indicate the circle for all the synced visualizations because it's dependent on the position of the cursor.

I'm closing this issue because we have open issues for the charts team to resolve and there's not much else we can do about this behavior. Feel free to re-open if I've missed something.

[sorenlouv]

the problem I'm seeing is that the tooltips that show aren't adjacent to the vertical line, but on top (covering up the visualization).

Good point, didn't notice the difference between there hovered chart and the sync'd charts.

Btw. the red vertical line... is that something you've photoshopped in to make it more obvious, or can we actually get that? I think it's a vast improvement over the existing (nearly invisible) grey line.

[formgeist]

Btw. the red vertical line... is that something you've photoshopped in to make it more obvious, or can we actually get that? I think it's a vast improvement over the existing (nearly invisible) grey line.

That's just my red pen highlighter ✍️ I would fine it very distracting, I just think we need to increase the contrast of the grey line as proposed in the above issue.