Is there a way to draw floating rectangle using chart.js
<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>