valueAxis range (min & max) based on chart series data in Kendo UI for jQuery Charts

Chris

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.

Iliana Nikolova

Admin

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.

Robert

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?

Robert

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.

Alex Hajigeorgieva

Admin

1082 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.