How to change Plotbands dynamically

3 posts, 1 answers
  1. kako
    kako avatar
    36 posts
    Member since:
    Mar 2015

    Posted 07 May 2018 Link to this post


    I want to change the position of PlotBands of CategoryAxis when contents of Datasource are changed.

    Is there how to change Plotbands dynamically?

    I tried writing the code as follows, but it did not work.

  2. Answer
    Tsvetina avatar
    2442 posts

    Posted 08 May 2018 Link to this post

    Hello Kako,

    The general approach is correct, but the plot bands code in the Dojo runs before the Chart is initialized, so there is no Chart instance to work with.
    I moved the logic into a button click event handler. Also, because there is no schema.model defined in the dataSource, year values come as strings, so they should be parsed to int before compared to currentYMD.
    function showPlotBand(){
      var currentYMD = 2001; // Originally, It changes dynamically between 2000 and 2008.
      var chart = $("#chart").data("kendoChart");
      var data = chart.dataSource.view();
      var options = {};
      var start, end = 0;
      for(var i = 0; i <= data.length; i++){
        if(parseInt(data[i]["year"]) === currentYMD) {
          start = i;
          end = i+1;
      options["categoryAxis"] = { plotBands: [{ from: start, to: end, color: "red", opacity: 0.3 }] };

    Here is the modified working sample:

    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. kako
    kako avatar
    36 posts
    Member since:
    Mar 2015

    Posted 24 May 2018 Link to this post

    It worked fine.

    Thank you!

Back to Top