Completed
Last Updated: 05 Jul 2023 13:21 by ADMIN
Release 4.4.0 (07/19/2023) (R3 PI1)
Bert
Created on: 11 Jun 2020 15:09
Category: Charts
Type: Feature Request
61
Zoom on particular part of the Chart
I would like to zoom on a particular part of the Chart.
7 comments
ADMIN
Hristian Stefanov
Posted on: 04 Jul 2023 07:55

Hi Nicholas,

Thank you for sharing your honest opinion and providing valuable feedback on the implementation of the pan and zoom feature. Rest assured that it will reach our development team.

If there is a potential for improvements based on the feedback received, I will promptly update the corresponding public item to reflect this.

Additionally, to make it more evident to customers that the Chart is pannable and zoomable, there are a couple of options you can consider. One option is to change the cursor to a "magnifier" icon on hover using CSS. I have prepared an example for you to demonstrate this:

<style>
    .my-chart:hover {
        cursor: zoom-in;
    }
</style>

<TelerikChart Class="my-chart">
    <ChartSeriesItems>
        <ChartSeries Type="ChartSeriesType.Bar" Name="Product 1 (bound to simple data)" Data="@simpleData">
        </ChartSeries>
        <ChartSeries Type="ChartSeriesType.Bar" Name="Product 2 (bound to model)" Data="@modelData" Field="@nameof(MyDataModel.SecondSeriesValue)">
            <ChartSeriesLabels Template="#=value# in #=dataItem.ExtraData# quarter" Visible="true"></ChartSeriesLabels>
        </ChartSeries>
    </ChartSeriesItems>

    <ChartValueAxes>
        <ChartValueAxis Color="red"></ChartValueAxis>
    </ChartValueAxes>

    <ChartCategoryAxes>
        <ChartCategoryAxis Categories="@xAxisItems"></ChartCategoryAxis>
    </ChartCategoryAxes>

    <ChartTitle Text="Quarterly sales trend"></ChartTitle>

    <ChartLegend Position="Telerik.Blazor.ChartLegendPosition.Bottom">
    </ChartLegend>
</TelerikChart>

@code {
    public class MyDataModel
    {
        public int SecondSeriesValue { get; set; }
        public string ExtraData { get; set; }
    }

    public List<MyDataModel> modelData = new List<MyDataModel>()
    {
        new MyDataModel() { SecondSeriesValue = 1, ExtraData = "first" },
        new MyDataModel() { SecondSeriesValue = 5, ExtraData = "second" },
        new MyDataModel() { SecondSeriesValue = 3, ExtraData = "third" },
        new MyDataModel() { SecondSeriesValue = 2, ExtraData = "fourth" },
    };

    public List<object> simpleData = new List<object>() { 10, 2, 7, 5 };

    public string[] xAxisItems = new string[] { "Q1", "Q2", "Q3", "Q4" };
}

Alternatively, you can also consider showing a notification or tooltip to inform users about the Chart's panning and zooming capabilities.

Regards,
Hristian Stefanov
Progress Telerik

As of R2 2023, the default icon type will be SVG instead of Font. See this blogpost for more information.
Nicholas
Posted on: 27 Jun 2023 13:27
My customers can never figure out that they can pan and zoom on the jQuery like Pan and Zoom feature. Every time I need to show them how to do it.  It's very unintuitive.  Had to just remove the feature and use a different library because it's caused so much grief.  I don't care about using the component separately.  I just want the navigation elements optionally embedded like the stock chart.  
ADMIN
Tsvetomir
Posted on: 19 Apr 2023 11:06

Hi all,

Thank you for all the feedback and use cases that you have shared. They are all very much appreciated and taken into account when implementing a given feature. 

I wanted to take a moment and share more details on the outcome of this feature. Indeed, this FR aims to enable zoom and pan on the charts without any additional elements (e.g navigator element). The exact functionality can be seen already in use in our demo for the jQuery suite. We aim to achieve the same in Telerik UI for Blazor. 

Additionally, if you would like to see the stock chart navigator as a separate component (that could be integrated with the categorical charts), I recommend casting your vote in the Stock chart navigator separate component feature request. It would also be very helpful if you could post your use cases and ideas on how the component should look and behave.

Kind regards,
Tsvetomir
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Nicholas
Posted on: 02 Sep 2022 15:30
I just noticed you already have the feature in your stock chart called a navigator.  https://docs.telerik.com/blazor-ui/components/stockchart/navigator This is fantastic.  You only need to allow to use the same navigator control in line and bar charts.
Nemo
Posted on: 11 Mar 2022 20:14
Hi, I had to resort to other third party charts to get zoom/pan functionality. While doing so, I found the Plotly.Blazor charting library https://github.com/laytec-ag/plotly.blazor to be pretty good. Would love to know more about your plans for charting in the upcoming releases. Maybe something along the lines of plotly might be a good direction. Thank you.
Nemo
Posted on: 03 Mar 2022 13:43
Hi, I would like to have zoom functionality for line/scatter charts. What is the priority of zoom functionality? And is there any alternate suggestion to get zoom functionality till it is implemented natively? Thank you.
Nicholas
Posted on: 02 Dec 2021 18:01
If you made the zoom feature like the AmCharts shown here: https://www.amcharts.com/demos/simple-column-chart/  It would be ideal.