[Solved] Adding OnZoom event for TelerikChart Zooming

[Gal]

Hey,

I am working on a Telerik for Blazor UI project and I'm really liking alll the Telerik features so far. However, when there are too many data points on my graph, the x axis becomes really hard to read, so I added a feature to scale the number of visible x-axis categories based on the number of intervals.

For this purpose, I was hoping to add a feature so that when one zooms into the graph, more of the x-axis intervals become visible based on how many can comfortably fit on screen. To this end, I need to know how much a user has zoomed in so that I can scale things accordingly. However, from all I can find online, there is no way to query a TelerikChart for how zoomed in you are. I might be missing something, but in case I am not, I think this feature could be very helpful so that one can add events based on the zoom in and have things change accordingly.

Thanks

[Hristian Stefanov]

Hi Gal,

Thank you for explaining in such detail what you are looking for.

A feature request for the desired OnZoom event has already been submitted on our public feedback portal: Expose Zoom event with information about the zoomed/selected area. I voted for the item on your behalf and raised its priority.

You can also subscribe to it to receive email notifications for future status updates.

Regards,
Hristian Stefanov
Progress Telerik

[Peter]

 Workaround: Reading zoom/pan range via internal API (Telerik.UI.for.Blazor 13.0.0)

  While waiting for official event support, we implemented a JavaScript-based workaround that reads the zoomed axis range from the chart's internal rendering objects. This allows
  synchronizing zoom across multiple charts on the same page (e.g. one chart per axle position, all sharing the same X-axis time range).

  Approach:

  1. Wrap each <TelerikChart> in a <div id="@uniqueId">.
  2. Enable zoom: <ChartZoomableSelection Enabled="true" Lock="ChartAxisLock.Y" />
  3. In JavaScript, access the chart instance via:
  var el = document.getElementById(chartId).querySelector('.k-chart');
  var dataId = el.dataset.id;
  var wrapper = TelerikBlazor.getComponentInstance(dataId);
  var chart = wrapper.chartInstance;
  4. Read the current axis range after zoom completes:
  var axes = chart._plotArea.axes;
  for (var i = 0; i < axes.length; i++) {
      if (axes[i].options.type === 'date') {
          var range = axes[i].range(); // { min, max }
      }
  }
  5. Detect zoom completion via a DOM mouseup event listener on the chart container (with 150ms debounce), then call back into Blazor via DotNetObjectReference.invokeMethodAsync().

  Caveats:

  - This depends on undocumented internals (TelerikBlazor.getComponentInstance, chartInstance._plotArea.axes). It works with v13.0.0 but may break in future major versions.
  - There is no reliable internal event for zoom/pan completion — mouseup on the container is the most practical trigger.
  - We added runtime version checks that log console warnings if the Telerik version changes.

  A proper Blazor event (e.g. OnZoomEnd / OnPanEnd with axis range data) would eliminate this fragile dependency entirely. 

[Hristian Stefanov]

Hi Peter,

Thank you for sharing your workaround publicly so other developers facing the same situation can benefit from it.

Kind Regards,

Hristian

[Peter]

.

[Peter]

.