valueAxis range (min & max) based on chart series data

5 posts, 0 answers
  1. Chris
    Chris avatar
    7 posts
    Member since:
    Mar 2014

    Posted 11 Apr 2014 Link to this post

    Quick question: is there a way set the valueAxis min and max based on the series data? For example I want the min to be 25 less than the minimum value present in my data set and I want the max to be 25 more than the maximum value in my data set?

    Thanks in advance.
  2. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2622 posts

    Posted 15 Apr 2014 Link to this post

    Hello Chris,

    In order to achieve the expected result I can suggest setting valueAxis min/max values dynamically via the setOptions() method. As an example:
    //get reference to the chart widget
    var chart = $("#chart").data("kendoChart");
    //set min / max options
    chart.setOptions({valueAxis: {min: 0, max: 400}});

    Regards,
    Iliana Nikolova
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  3. Robert
    Robert avatar
    36 posts
    Member since:
    Dec 2016

    Posted 09 Jan 2020 in reply to Iliana Nikolova Link to this post

    So if i am binding the chart via remote data and then attempting to set min and max via the render event, how would I set the min and max based on values from the chart?  ie - how do I access the series mix and max values from javascript?
  4. Robert
    Robert avatar
    36 posts
    Member since:
    Dec 2016

    Posted 09 Jan 2020 Link to this post

    Actually I found a post

    https://docs.telerik.com/kendo-ui/knowledge-base/change-the-min-value-of-the-valueaxis-dynamically

    however, my chart is in MVC not created in Jquery so is there a way to set these after render?  I tried setting in the render event, but it has no effect.  And if I try to redraw() within that event, you get an infinite loop as redraw fires render event again.

  5. Alex Hajigeorgieva
    Admin
    Alex Hajigeorgieva avatar
    1081 posts

    Posted 13 Jan 2020 Link to this post

    Hello, Robert,

    The DataBound event should provide you with the desired functionality. For example, if you wanted to set the valueAxis height to always be a quarter of the height of its bars, you could use a function like the one below:

    .Events(events => events
         .DataBound("calculateColumnsMax")
    )
    
    function calculateColumnsMax(e) {
        var chart = this;
        var volumeValueAxisMax = Math.max(...chart.dataSource.data().map(stock => stock.Volume)) * 4;
        // set valueAxis max so the bars are always 1/4 of the chart height
        chart.options.valueAxis[0].max = volumeValueAxisMax;
        chart.redraw();
    }

    Give this a try and let us know in case of further questions.

    Kind Regards,
    Alex Hajigeorgieva
    Progress Telerik

    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Back to Top