Skip to content

[FEATURE] Add horizontal crosshair option to TimeSeriesChart plugin - #809

Open
oschrenk wants to merge 1 commit into
perses:mainfrom
oschrenk:feat/timeserieschart-cross-axispointer
Open

[FEATURE] Add horizontal crosshair option to TimeSeriesChart plugin#809
oschrenk wants to merge 1 commit into
perses:mainfrom
oschrenk:feat/timeserieschart-cross-axispointer

Conversation

@oschrenk

Copy link
Copy Markdown

Closes perses/perses#4434.

Adds an optional axisPointer setting to the TimeSeriesChart tooltip spec to control the axis pointer of the ECharts tooltip. Specifically the single option to add a horizontal line.

With type: "cross", hovering a panel now shows a horizontal line at the cursor's y position in addition to the default vertical line. Useful for visually comparing series levels within a panel.

It adds a spec field (no UI editing as of now) mirroring the ECharts naming and nesting.

kind: TimeSeriesChart
spec:
  tooltip:
    axisPointer:
      type: "cross"

Choices:

  • Single panel only. Currently this setting is enabled per chart and the horizontal line is kept active only on the hovered chart (no syncing across charts). Syncing would be misleading: ECharts connect forwards the y pointer by value (axisTrigger.ts#L407-L411), so other panels would show a line at the same y value mapped into their own scale, which means nothing across different units. This is the most controversial change and I introduced isHovered to distinguish a panel being hovered from the tooltip being shown (which can stay pinned). Open to other solutions here.
  • cross only. While ECharts also allows line, shadow and none, only cross is accepted for now. Not sure if there is value in adding the other options, but it leaves room for it.
  • No axis value labels. ECharts defaults label.show to true for cross (modelHelper.ts#L266-L269). I disabled it since the custom tooltip from Perses clashes with that idea.
  • Stacked bar excluded. cross does not apply there.

Testing

  • Manually tested live against a Perses v0.54.0 server with the plugin dev server, by rebasing the patch onto timeserieschart/v0.13.0 for host compatibility

Screenshots

Screenshot 2026-09-10 at 10 35 09

Checklist

  • Pull request has a descriptive title and context useful to a reviewer.
  • Pull request title follows the [<catalog_entry>] <commit message> naming convention.
  • All commits have DCO signoffs.

Add an optional tooltip.axisPointer spec field, mirroring the ECharts
naming and nesting. With type "cross", hovering a panel shows a
horizontal line at the cursor's y position.

Closes perses/perses#4434

Signed-off-by: Oliver Schrenk <oliver.schrenk@gmail.com>
@oschrenk
oschrenk requested review from a team and AntoineThebaud as code owners September 10, 2026 17:30
@oschrenk
oschrenk requested review from shahrokni and removed request for a team September 10, 2026 17:30
Comment on lines +495 to 497
setIsHovered(false);
if (tooltipPinnedCoords === null) {
setShowTooltip(false);

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

As mentioned in the description. I distinguish hovered and showing tooltips because, tooltips might be pinned, but i might not hover anymore.

Please advice if that distinction make sense to you.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

TimeSeriesChart: option for a horizontal crosshair on hover?

1 participant