Set chart Max value based on chart data

Question

I'm using the Kendo bar chart to represent data.

my sample code as follows,

<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.3.1023/styles/kendo.common.min.css"/>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.3.1023/styles/kendo.rtl.min.css"/>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.3.1023/styles/kendo.silver.min.css"/>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.3.1023/styles/kendo.mobile.all.min.css"/>

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2019.3.1023/js/kendo.all.min.js"></script>

<div id="chart"></div>
<script>
    $("#chart").kendoChart({
        title: {
            text: "Kendo Chart Example"
        },
        series: [ {
            name: "Example Series",
            data: [200, 450, 300, 125]
        } ],
        valueAxis: {
          min:100,
          max:600
        },
        categoryAxis:{
            categories: [ 2000, 2001, 2002, 2003 ]
        }
    });
</script>

Currently I set chart's max value as max:600.Now I need to set chart's max: value dynamically based on chart data.

as an example,

if chart data largestvalue is > 500 then need to set the chart's max value as 1000,
if chart data largestvalue is 500 > largestvalue >= 400 then need to set the chart's max value as 600,
if chart data largestvalue is 400 > largestvalue >= 300 then need to set the chart's max value as 500,

How can I do it?

User863 · Answer 1 · 2020-03-25T14:55:13.633

You can use Math.max() to find the largestvalue and determine the max using that

var data = [200, 450, 300, 125];
var largestvalue = Math.max(...data);

var max;
if (largestvalue > 500) {
  max = 1000;
} else if (largestvalue < 500 && largestvalue >= 400) {
  max = 600;
} else if (largestvalue < 400 && largestvalue >= 300) {
  max = 500;
}

$("#chart").kendoChart({
  title: {
    text: "Kendo Chart Example"
  },
  series: [{
    name: "Example Series",
    data: [200, 450, 300, 125]
  }],
  valueAxis: {
    min: 100,
    max: max
  },
  categoryAxis: {
    categories: [2000, 2001, 2002, 2003]
  }
});

<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.3.1023/styles/kendo.common.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.3.1023/styles/kendo.rtl.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.3.1023/styles/kendo.silver.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.3.1023/styles/kendo.mobile.all.min.css" />

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2019.3.1023/js/kendo.all.min.js"></script>

<div id="chart"></div>

@USer683 why `var largestvalue = Math.max(data);` returns `NaN` — Sachith Wickramaarachchi, Mar 25 '20 at 14:43
problem is spread operator not working some browsers. such as IE browser — Sachith Wickramaarachchi, Mar 25 '20 at 14:57
@Adam try [Math.max.apply(null, data)](https://stackoverflow.com/questions/21255138/how-does-the-math-max-apply-work) — User863, Mar 25 '20 at 14:59

score 1 · Answer 2 · answered Mar 25 '20 at 14:58

Try below script

let data = [200, 600, 300, 125];
var largestvalue = Math.max.apply(Math, data);
var chart;
var max;

if (largestvalue > 500) {
  max = 1000;
} else if (largestvalue < 500 && largestvalue >= 400) {
  max = 600;
} else if (largestvalue < 400 && largestvalue >= 300) {
  max = 500;
}

$("#chart").kendoChart({
  title: {
    text: "Kendo Chart Example"
  },
  series: [{
    name: "Example Series",
    data: data
  }],
  valueAxis: {},
  categoryAxis: {
    categories: [2000, 2001, 2002, 2003]
  }
});

var chart = $("#chart").data("kendoChart");        
chart.setOptions({
                 valueAxis: {
                              min: 100,
                              max:  max
                            }
            });

Hope this help Play around here

Set chart Max value based on chart data

2 Answers2