diff --git a/rowers/interactiveplots.py b/rowers/interactiveplots.py
index fa637c32..cccd3486 100644
--- a/rowers/interactiveplots.py
+++ b/rowers/interactiveplots.py
@@ -3558,8 +3558,23 @@ def interactive_chart(id=0, promember=0, intervaldata={}):
 
     metrics_list = [{'name': name, 'rowingmetrics':d } for name, d in metrics.rowingmetrics]
 
-    print(intervaldata)
-    
+
+    intervals = []
+    # add shaded bar chart areas
+    if intervaldata != {}:
+        intervaldf = pd.DataFrame(intervaldata)
+        intervaldf['itime'] = intervaldf['itime']*1.e3
+        intervaldf['time'] = intervaldf['itime'].cumsum()
+        intervaldf['time'] = intervaldf['time'].shift(1)
+        intervaldf.loc[0, 'time'] = 0
+        intervaldf['time_r'] = intervaldf['time'] + intervaldf['itime']
+        intervaldf['value'] = 100
+        mask = intervaldf['itype'] == 3
+        intervaldf.loc[mask, 'value'] = 0
+        intervaldf['bottom'] = 0
+
+        intervals = intervaldf.to_dict("records")
+
     chart_data = {
         'title': row.name,
         'x': "time",
@@ -3567,9 +3582,9 @@ def interactive_chart(id=0, promember=0, intervaldata={}):
         'y2': "spm",
         'data': data_dict,
         'metrics': metrics_list,
-        'intervals': intervaldata,
+        'intervals': intervals,
     }
-
+    
     script, div = get_chart("/interactive", chart_data)
 
     return script, div
diff --git a/rowers/templates/instroke_interactive.html b/rowers/templates/instroke_interactive.html
index 6f3be39c..9c86fdb9 100644
--- a/rowers/templates/instroke_interactive.html
+++ b/rowers/templates/instroke_interactive.html
@@ -11,7 +11,6 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>jQuery UI Slider - Range slider</title>
   <link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
-  <link rel="stylesheet" href="/resources/demos/style.css">
   <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
   <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
 
@@ -30,11 +29,14 @@
       dataType: 'json',
 
       success: function(data) {
-        console.log(data);
-        $("#id_script").replaceWith('<div id="id_script">'+data.script+'</d'+'iv>');
-        $("#id_chart").replaceWith('<div id="id_chart">'+data.div+'</d'+'iv>');
-        $("#ds").replaceWith('<div id="ds">'+data.ds+'</d'+'iv>');
-        $("#dd").replaceWith('<div id="dd">'+data.dd+'</d'+'iv>');
+          $("#id_script").replaceWith('<div id="id_script">'+data.script+'</d'+'iv>');
+          $("#id_chart").replaceWith('<div id="id_chart">'+data.div+'</d'+'iv>');
+	  
+	
+	  $("#dd").empty();
+	  $("#dd").html(data.dd);
+	  $("#ds").empty();
+	  $('#ds').html(data.ds)
       }
     });
   }
@@ -169,11 +171,10 @@ $( function() {
       {{ the_div|safe }}
     </div>
   </li>
-  <li class="grid_2">
-    <div id="dd" class="flexplot">
-      <script src="https://d3js.org/d3.v6.js"></script>
-      {{ dd|safe }}
-
+  <script src="https://d3js.org/d3.v6.js"></script>
+  <li class="grid_2" id="interactive">
+      <div id="dd" class="flexplot">
+	{{ dd|safe }}
     </div>
     <div id="ds">
       {{ ds |safe }}