search

apexcharts / Blazor-ApexCharts

A blazor wrapper for ApexCharts.js
https://apexcharts.github.io/Blazor-ApexCharts
MIT License
749 stars 88 forks source link

Adding an ApexPointTooltip to chart, Overrides Tooltip Intersect Mode to True #439

Closed LewxX closed 3 months ago

LewxX commented 3 months ago

When an ApexPointTooltip render fragment is added to a chart, it automatically sets the chart's tooltip mode to Intersect = true. This issue persists even after explicitly setting a custom value for Options.Tooltip.Intersect to false. However, this problem doesn't occur when a custom JavaScript-based tooltip is implemented.

Steps to Reproduce:

  1. Create a chart with ApexPointTooltip render fragment included.
  2. Configure the chart's tooltip options with Options.Tooltip.Intersect set to false.
  3. Observe that the tooltip behavior acts as if Intersect is set to true.

Expected Behavior:

The tooltip's Intersect mode should respect the explicitly defined value in Options.Tooltip.Intersect, allowing for non-intersecting tooltips regardless of the presence of an ApexPointTooltip render fragment.

Actual Behavior:

The presence of an ApexPointTooltip render fragment forces the tooltip's Intersect mode to true, ignoring any custom settings specified in Options.Tooltip.Intersect.

See this gif animation of the current behavior: ApexPointTooltip_problem

Note: All 3 charts have identical configurations, except for the ApexPointTooltip render fragment, which is only present on the left chart and an Tooltip.Custom option override in the middle chart.

joadan commented 3 months ago

Hi

This is because for custom tooltips we use the OnPointEnterEvent to trigger a tooltip generation and for that we need markers. If that is not acceptable please use the javascript tooltip instead. Some more info here, https://github.com/apexcharts/Blazor-ApexCharts/issues/426#issuecomment-1983701884

LewxX commented 3 months ago

I want to display some additional info for the current dataPoint in the tooltip, but that info is neither the X or Y data. The problem is that I cannot access the fully underlying dotnet model on JS side, without adding some manual JS interop calls and even then it would be a bit ugly. So the dotnet render fragment was ideal.

But I guess, I'll try the JS approach, which i guess will then return an div with a pending interop call and will then late update the tooltip with the actual content once the interop call has finished. Or is there a better alternative, so Archive something like that?

joadan commented 3 months ago

please check this sample to pass extra data to javascript https://apexcharts.github.io/Blazor-ApexCharts/features/formatters#pass%20extra%20data