title: Highcharts dynamically creating a primitives and setting position and size
body: <p>Is it possible to place the rectangles over the lines?</p>
  
  <p>One rectangle should have one or more lines in yAxis.
  Rectangles should be added, moved and resized dynamically depends on data.</p>
  
  <p>Here's a <a href="http://jsfiddle.net/yv84/rzrc1vnv/" rel="nofollow">FIDDLE</a>.</p>
  
  <p><strong>HTML:</strong></p>
  
  
  
  <pre class="lang-html prettyprint-override"><code>&lt;div id="container"&gt;
     &lt;div id="graph"&gt;&lt;/div&gt;
     &lt;button id="create"&gt;Create serier and add&lt;/button&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>JS:</strong></p>
  
  
  
  <pre class="lang-js prettyprint-override"><code>var chart;
  $(document).ready(function(){
  
  var counter = 0;
  var addRect = function (chart, x1, y1, x2, y2, r) {
      chart.renderer.rect(x1, y1, x2, y2, r)
          .attr({
              'stroke-width': 2,
              stroke: 'red',
              fill: new Highcharts.Color('#ff0000').setOpacity(0.4).get(),
              zIndex: 10
          })
          .add();
  }
  
  function randomData(len, counter){
      var arr = [];
      i = 0;
      var rand;
      while (i&lt;len) {
          if (!(Math.floor(Math.random()*3))) {
              arr.push(null);
          }
          //else {
              rand = Math.random()*5;
              i += rand;
              arr.push(counter);
              rand = Math.random()*5;
              i += rand;
              arr.push(counter);
              arr.push(null);
          //}
      }
      return arr;
  }
  
  var options = {
      chart:{
          renderTo:'graph',
          type:'line'
      },
      title:{
          text:null
      },
      xAxis: {
      },
      plotOptions:{
          series:{
              animation:false,
          }
      }
  }
  
  chart = new Highcharts.Chart(options,
          function (chart) {
              addRect(chart, 70, 120, 250, 120, 5);
              addRect(chart, 500, 120, 400, 120, 5);
              addRect(chart, 1200, 120, 150, 120, 5);
          });
  var i = 1, s1,s2,s3,s4;
  
     function createChart(){
      s1 = chart.addSeries({
          data:randomData(20, counter++),
          name:'Line'+counter,
          lineWidth: 20},false);
      chart.redraw();
  }
  
  $('#create').click(function(){  createChart() });
  
  })
  </code></pre>