New to Kendo UI for jQuery? Download free 30-day trial

Set the Min Value of the ValueAxis Dynamically

Environment

Product Progress® Kendo UI® Chart for jQuery
Operating System Windows 2008 Server R2
Browser Google Chrome
Browser Version 60.0

Description

How can I dynamically set the min value of the valueAxis when the data or the visible Chart series are changed?

Solution

  1. Loop through the visible series values.
  2. Based on the visible lines, set the minimum value on the render event of the Chart.

For the full implementation, refer to this Dojo example.

   <div id="example">
      <div class="demo-section k-content wide">
        <div id="chart" style="background: center no-repeat url('../content/shared/styles/world-map.png');"></div>
      </div>
      <script>

        function createChart() {
          $("#chart").kendoChart({
            render:function(e){
              var currentMin = 100000;
              var series = e.sender.options.series
              for (let i = 0; i<series.length; i++){
                for(let k = 0; k <series[i].data.length; k++){
                  if(series[i].data[k] < currentMin && series[i].visible == true ){                    
                    currentMin = series[i].data[k]
                  }
                }                   
              }
              var oldMin = e.sender.options.valueAxis.min
              if(oldMin != currentMin){
                e.sender.options.valueAxis.min = currentMin;     
                e.sender.redraw()
              }
            },
            title: {
              text: "Gross domestic product growth \n /GDP annual %/"
            },
            legend: {
              position: "bottom"
            },
            chartArea: {
              background: ""
            },
            seriesDefaults: {
              type: "line",
              style: "smooth"
            },
            series: [{
              name: "India",
              data: [-1.66, 1.55, 1.848, 1.284, 1.263, 1.801, 1.890, 1.238, 1.552, 12.855]
            },{
              name: "World",
              data: [1.988, 1.733, 1.994, 1.464, 1.001, 1.939, 1.333, 1.245, 1.339, 1.727]
            },{
              name: "Russian Federation",
              data: [1.743, 1.295, 1.175, 1.376, 1.153, 1.535, 1.247, 1.832, 1.3, 1.3]
            },{
              name: "Haiti",
              data: [1.253, 1.362, 1.519, 1.799, 1.252, 1.343, 1.843, 1.877, 1.416, 1.590]
            }],
            valueAxis: {
              min:0,
              labels: {
                format: "{0:n2}"
              },
              line: {
                visible: false
              }
            },
            categoryAxis: {
              categories: [2002, 2003, 2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011],
              majorGridLines: {
                visible: false
              },
              labels: {
                rotation: "auto"
              }
            }
          });
        }

        $(document).ready(createChart);
        $(document).bind("kendo:skinChange", createChart);
      </script>
    </div>
In this article