Interactive region highlighting with dygraph.js

For a project I'm working on, I'm trying to interactively highlight certain regions of a graph I plotted using dygraphs.js. This is what I'm trying to :

So each time the user clicks on the checkbox, a part of the graph will be highlighted. On the dygraphs website an example (without user interaction) is given using the code below:

var g = new Dygraph(
      document.getElementById("div_g"),
      data,
      {
        labels: ['X', 'Est.', 'Actual'],
        animatedZooms: true,
        underlayCallback: function(canvas, area, g) {
          var bottom_left = g.toDomCoords(highlight_start, -20);
          var top_right = g.toDomCoords(highlight_end, +20);

          var left = bottom_left[0];
          var right = top_right[0];

          canvas.fillStyle = "rgba(255, 255, 102, 1.0)";
          canvas.fillRect(left, area.y, right - left, area.h);
        }

      }

They are using the underlayCallback option which is called before the chart is drawn and provides the canvas context for drawing on (http://dygraphs.com/options.html#underlayCallback).

However, since my graph already exist when the highlight button is clicked, I cannot use this method. To make this work I would have to re-draw the complete graphs each time the user clicks on the highlight button. Does anyone know a way to make this work in a more interactive and dynamic manner?