title: Is there a way to draw floating rectangle using chart.js
body: <p>I need to plot a rectangle on my line graph.. someone please help,,, I want to draw a floating rectangle on the line graph. The xy co-ordinates of the rectangle are dynamic &amp; will be passed as variable just as how arrays are created below.</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;Line Chart&lt;/title&gt;
      &lt;script src="Chart.js"&gt;&lt;/script&gt;
      &lt;meta http-equiv="refresh" content="1"/&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div style="width: 60%"&gt;
      &lt;canvas id="mycanvas" height="300" width="750" class="subcanvas"&gt; &lt;/canvas&gt;
      &lt;/div&gt;
      &lt;script&gt;
      var chrt1 = document.getElementById("mycanvas").getContext("2d");
      chrt1.beginPath();
      chrt1.lineWidth="20";
      chrt1.strokeStyle="red";
      chrt1.rect(200,200,50,50);
      chrt1.stroke();
      var lineOptions = {
          animation:false,
          pointDotRadius: 0,
          responsive: false
      };
      var mmaxis = [];
      var loadaxis = [];
  
      mmaxis[0] = :="plotdb".xarray[0]:
      mmaxis[1] = :="plotdb".xarray[1]:
      mmaxis[2] = :="plotdb".xarray[2]:
      mmaxis[3] = :="plotdb".xarray[3]:
      mmaxis[4] = :="plotdb".xarray[4]:
      mmaxis[5] = :="plotdb".xarray[5]:
      mmaxis[6] = :="plotdb".xarray[6]:
      mmaxis[7] = :="plotdb".xarray[7]:
      mmaxis[8] = :="plotdb".xarray[8]:
      mmaxis[9] = :="plotdb".xarray[9]:
      mmaxis[10] = :="plotdb".xarray[10]:
      mmaxis[11] = :="plotdb".xarray[11]:
      mmaxis[12] = :="plotdb".xarray[12]:
      mmaxis[13] = :="plotdb".xarray[13]:
      mmaxis[14] = :="plotdb".xarray[14]:
      mmaxis[15] = :="plotdb".xarray[15]:
      mmaxis[16] = :="plotdb".xarray[16]:
      mmaxis[17] = :="plotdb".xarray[17]:
      mmaxis[18] = :="plotdb".xarray[18]:
      mmaxis[19] = :="plotdb".xarray[19]:
      mmaxis[20] = :="plotdb".xarray[20]:
  
      loadaxis[0] = :="plotdb".yarray[0]:
      loadaxis[1] = :="plotdb".yarray[1]:
      loadaxis[2] = :="plotdb".yarray[2]:
      loadaxis[3] = :="plotdb".yarray[3]:
      loadaxis[4] = :="plotdb".yarray[4]:
      loadaxis[5] = :="plotdb".yarray[5]:
      loadaxis[6] = :="plotdb".yarray[6]:
      loadaxis[7] = :="plotdb".yarray[7]:
      loadaxis[8] = :="plotdb".yarray[8]:
      loadaxis[9] = :="plotdb".yarray[9]:
      loadaxis[10] = :="plotdb".yarray[10]:
      loadaxis[11] = :="plotdb".yarray[11]:
      loadaxis[12] = :="plotdb".yarray[12]:
      loadaxis[13] = :="plotdb".yarray[13]:
      loadaxis[14] = :="plotdb".yarray[14]:
      loadaxis[15] = :="plotdb".yarray[15]:
      loadaxis[16] = :="plotdb".yarray[16]:
      loadaxis[17] = :="plotdb".yarray[17]:
      loadaxis[18] = :="plotdb".yarray[18]:
      loadaxis[19] = :="plotdb".yarray[19]:
      loadaxis[20] = :="plotdb".yarray[20]:
  
  
      var lineChartData = {
          labels :mmaxis,
          datasets : [
          {
          label: "Load Vs Disp",
          fillColor : "rgba(255,255,255,0.2)",
          strokeColor : "rgba(10,10,10,1)",
          pointColor : "rgba(0,0,0,1)",
          pointStrokeColor : "#0",
          pointHighlightFill : "#0",
          pointHighlightStroke : "rgba(0,0,0,10)",
          data :loadaxis
          }
          ]
      }
      window.onload = function()
      {
          window.chrt1
          var chrt = document.getElementById("mycanvas").getContext("2d");
          window.myFirstChart = new Chart(chrt).Line(lineChartData,lineOptions);
      }
      &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><a href="http://i.stack.imgur.com/d3UCX.jpg" rel="nofollow">Graph has to look like this</a></p>