title: Highlight a part of an extjs4 line chart
body: <p>In the extjs 4.1.1a code below is a working example of a line chart. Now I need to highlight a part of that chart on a given min and max timestamp.</p>
  
  <pre><code>{'xtype' : 'chart',
  'store' : 'ChartData',
  'height' : '100%',
  'width' : '100%',
  'legend' : {'position' : top},
  'axes': [{
      'title': 'Power',
      'type': 'Numeric',
      'position': 'left',
      'fields': ['power']
  },{
      'title': 'Timestamp',
      'type': 'Numeric',
      'position': 'bottom',
      'fields': ['timestamp'],
      'minorTickSteps': 3
  }],
  'series': [{
      'type': 'line',
      'fill': true,
      'axis' : 'left',
      'xField': 'timestamp',
      'yField': 'power'
  }]}
  </code></pre>
  
  <p>I've searched the sencha forum and found nothing in particular that meets my requirements.
  For now I managed to change the color of the points on the line chart with a custom renderer.</p>
  
  <pre><code>'renderer': function(sprite, record, attr, index, store) {
  var item = store.getAt(index);
  if(item != undefined &amp;&amp; (item.get('timestamp') &lt; startdate || item.get('timestamp') &gt; enddate)){
      return Ext.apply(attr, {'fill': '#00cc00', 'stroke-width': 3, 'radius': 4});
  }else{
      return Ext.apply(attr, {'fill': '#ff0000', 'stroke-width': 3, 'radius': 4});
  }}
  </code></pre>
  
  <p>But I have not found a way to change the color below the line.
  Any suggestions on that?</p>
  
  <p><strong>UPDATE - Working fine now</strong></p>
  
  <p>I  implement a solution based on the answer given by Colombo.</p>
  
  <pre><code>doCustomDrawing: function () {: function (p){
  var me = this, chart = me.chart;
  if(chart.rendered){
      var series = chart.series.items[0];
      if (me.groupChain != null) {
          me.groupChain.destroy();
          me.groupChain = null;
      }
      me.groupChain = Ext.create('Ext.draw.CompositeSprite', {
          surface: chart.surface
      });
      if(series != null &amp;&amp; series.items != null){
          var surface = chart.surface;
          var pathV = 'M';
          var first = true;
          // need first and last x cooridnate
          var mX = 0,hX = 0;
          Ext.each(series.items, function(item){
              var storeItem = item.storeItem,
                      pointX = item.point[0],
                      pointY = item.point[1];
              // based on given startdate and enddate start collection path coordinates
              if(!(storeItem.get('timestamp') &lt; startdate || storeItem.get('timestamp') &gt; enddate)){
                  if(hX&lt;pointX){
                      hX = pointX;
                  }
                  if(first){
                      first = false;
                      mX = pointX;
                      pathV+= + pointX + ' ' + pointY;
                  }else{
                      pathV+= ' L' + pointX + ' ' + pointY;
                  }
              }
          });
          var sprite = Ext.create('Ext.draw.Sprite', {
              type: 'path',
              fill: '#f00',
              surface: surface,
              // to draw a sprite with the area below the line we need the y coordinate of the x axe which is in my case items[1]
              path : pathV + ' L'+ hX + ' ' + chart.axes.items[1].y + ' L'+ mX + ' ' + chart.axes.items[1].y + 'z'
          });
          me.groupChain.add(sprite);
          me.groupChain.show(true);
      }
  }}
  </code></pre>
  
  <p>This looks really good and has the effect I was hoping for <strong>and</strong> in case you resize the container the new sprite <strong>is</strong> cleared from the chart. Thx to Colombo again.</p>