This is a migrated thread and some comments may be shown as answers.

[Solved] Determining the range of the X and Y axis after Zoom

2 Answers 412 Views

Chart (HTML5)

This is a migrated thread and some comments may be shown as answers.

2 Answers, 1 is accepted

answered on 28 May 2018, 10:07 AM

result.png

Hello Ahmet,

The zoom event of the chart gives you the axis ranges: https://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart/events/zoom.

For example, if you modify the Pan and Zoom demo (https://demos.telerik.com/aspnet-ajax/htmlchart/examples/functionality/pan-zoom/defaultcs.aspx) as follows, you can get the axes ranges as shown in the screenshot below:

<script>

function OnZoomHandler(evt) {

console.log(evt.axisRanges);

}

</script>

<telerik:RadHtmlChart runat="server" Height="650px" Width="100%" ID="RadHtmlChart1" Transitions="false"

DataSourceID="SqlDataSource1">

<ClientEvents OnZoom="OnZoomHandler" />

<Pan Enabled="true" />

<Zoom Enabled="true">

<MouseWheel Enabled="true" />

<Selection Enabled="true" ModifierKey="Shift" />

</Zoom>

<PlotArea>

<Series>

<telerik:ColumnSeries DataFieldY="UnitsInStock">

<TooltipsAppearance Color="White">

<ClientTemplate>

#= dataItem.ProductName# : #= dataItem.UnitsInStock#

</ClientTemplate>

</TooltipsAppearance>

</telerik:ColumnSeries>

</Series>

<XAxis DataLabelsField="ProductName" MinValue="3" MaxValue="15" Name="myXaxis">

<LabelsAppearance RotationAngle="90"></LabelsAppearance>

<MinorGridLines Visible="false" />

</XAxis>

<YAxis MinValue="0" MaxValue="125" Name="theYaxis">

<MinorGridLines Visible="false" />

<TitleAppearance Text="Quantity">

</TitleAppearance>

</YAxis>

</PlotArea>

<Legend>

<Appearance Visible="false">

</Appearance>

</Legend>

<ChartTitle Text="Units in Stock">

<Appearance Position="Bottom" />

</ChartTitle>

<ClientEvents OnLoad="chartLoad" />

</telerik:RadHtmlChart>

Regards,
Marin Bratanov
Progress Telerik

Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.