New to Kendo UI for jQueryStart a free 30-day trial

Set the Min Value of the ValueAxis Dynamically

Environment

ProductProgress® Kendo UI® Chart for jQuery
Operating SystemWindows 2008 Server R2
BrowserGoogle Chrome
Browser Version60.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.

html
   <div id="example">
      <div class="demo-section k-content wide">
        <div id="chart" style="background: center no-repeat url('https://demos.telerik.com/kendo-ui/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
EnvironmentDescriptionSolution
Not finding the help you need?
Contact Support