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

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

4 Answers 1791 Views
Charts
This is a migrated thread and some comments may be shown as answers.
Chris
Top achievements
Rank 1
Chris asked on 11 Apr 2014, 07:42 PM
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.

4 Answers, 1 is accepted

Sort by
0
Iliana Dyankova
Telerik team
answered on 15 Apr 2014, 08:24 AM
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.

 
0
Robert
Top achievements
Rank 1
Veteran
answered on 09 Jan 2020, 02:49 PM
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?
0
Robert
Top achievements
Rank 1
Veteran
answered on 09 Jan 2020, 03:51 PM

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.

0
Alex Hajigeorgieva
Telerik team
answered on 13 Jan 2020, 01:20 PM

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.
Tags
Charts
Asked by
Chris
Top achievements
Rank 1
Answers by
Iliana Dyankova
Telerik team
Robert
Top achievements
Rank 1
Veteran
Alex Hajigeorgieva
Telerik team
Share this question
or