Kendo Angular Chart Control Axis based on Kendo Range Slider selection

2 posts, 0 answers
  1. Oskar
    Oskar avatar
    3 posts
    Member since:
    Feb 2019

    Posted 13 Nov 2020 Link to this post

    Hi All,
    I would like to get support while implementing Angular Chart + a Kendo Range Slider. Please have a look to details below:

    What I have so far:
    - Kendo Chart Line with a Max/Min value in each axis is working fine. (read-only)
    - Range Slider is working fine.

    What is not working:
    - Not able control (min/max values) chart when user modify the range criteria on Range Slider exclusively for the Y axis.
    Only works the category Axis based on the recommendations on this answer.
    https://www.telerik.com/kendo-angular-ui/components/charts/elements/selection/#using-selection-as-navigator

    What I need:
    - Set Chart Zoom In & Out values, based on on Range Slider output for the axis Y.
     I would like to know if is feasible to have both sliders to control the min/max axis.
    Please see the attachment and let me know if you need anything else to understand better.
    Thanks for your help.
  2. Martin
    Admin
    Martin avatar
    283 posts

    Posted 17 Nov 2020 Link to this post

    Hi Oskar,

    In order to change the Y axis valies follow the approach that was suggested to you in this thread:

    https://www.telerik.com/forums/how-to-use-zoom-in-out-values-for-control-chart-range-slider

    but using the min and max properties of the ValueAxisItemComponent:

    <kendo-chart-value-axis>
            <kendo-chart-value-axis-item
              [min]="chartMin" 
              [max]="chartMax"
            ></kendo-chart-value-axis-item>
      </kendo-chart-value-axis>

    I hope this helps.

    Regards,
    Martin
    Progress Telerik

    Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Back to Top