docs: function DrawKey_gutter (obj, key, colors)
          {
              var text_size    = typeof(prop['chart.key.text.size']) == 'number' ? prop['chart.key.text.size'] : prop['chart.text.size'],
                  text_bold    = prop['chart.key.text.bold'],
                  text_italic  = prop['chart.key.text.italic'],
                  text_font    = prop['chart.key.text.font'] || prop['chart.key.font'] || prop['chart.text.font'],
                  text_color   = prop['chart.key.text.color'],
                  gutterLeft   = obj.gutterLeft,
                  gutterRight  = obj.gutterRight,
                  gutterTop    = obj.gutterTop,
                  gutterBottom = obj.gutterBottom,
                  hpos         = ((ca.width - gutterLeft - gutterRight) / 2) + obj.gutterLeft,
                  vpos         = gutterTop - text_size - 5,
                  title        = prop['chart.title'],
                  blob_size    = text_size, // The blob of color
                  hmargin      = 8, // This is the size of the gaps between the blob of color and the text
                  vmargin      = 4, // This is the vertical margin of the key
                  fillstyle    = prop['chart.key.background'],
                  strokestyle  = '#999',
                  length       = 0;
  
              if (!obj.coords) obj.coords = {};
              obj.coords.key = [];
      
      
      
              // Need to work out the length of the key first
              co.font = text_size + 'pt ' + text_font;
              for (i=0; i<key.length; ++i) {
                  length += hmargin;
                  length += blob_size;
                  length += hmargin;
                  length += co.measureText(key[i]).width;
              }
              length += hmargin;
      
      
      
      
              /**
              * Work out hpos since in the Pie it isn't necessarily dead center
              */
              if (obj.type == 'pie') {
                  if (prop['chart.align'] == 'left') {
                      var hpos = obj.radius + gutterLeft;
                      
                  } else if (prop['chart.align'] == 'right') {
                      var hpos = ca.width - obj.radius - gutterRight;
      
                  } else {
                      hpos = ca.width / 2;
                  }
              }
      
      
      
      
      
              /**
              * This makes the key centered
              */  
              hpos -= (length / 2);
      
      
              /**
              * Override the horizontal/vertical positioning
              */
              if (typeof(prop['chart.key.position.x']) == 'number') {
                  hpos = prop['chart.key.position.x'];
              }
              if (typeof(prop['chart.key.position.y']) == 'number') {
                  vpos = prop['chart.key.position.y'];
              }
      
      
      
              /**
              * Draw the box that the key sits in
              */
              if (obj.Get('chart.key.position.gutter.boxed')) {
      
                  if (prop['chart.key.shadow']) {
                      co.shadowColor   = prop['chart.key.shadow.color'];
                      co.shadowBlur    = prop['chart.key.shadow.blur'];
                      co.shadowOffsetX = prop['chart.key.shadow.offsetx'];
                      co.shadowOffsetY = prop['chart.key.shadow.offsety'];
                  }
      
                  
                  co.beginPath();
                      co.fillStyle = fillstyle;
                      co.strokeStyle = strokestyle;
      
                      if (prop['chart.key.rounded']) {
                          RG.strokedCurvyRect(co, hpos, vpos - vmargin, length, text_size + vmargin + vmargin)
                          // Odd... RG.filledCurvyRect(co, hpos, vpos - vmargin, length, text_size + vmargin + vmargin);
                      } else {
                          co.rect(hpos, vpos - vmargin, length, text_size + vmargin + vmargin);
                      }
                      
                  co.stroke();
                  co.fill();
      
      
                  RG.NoShadow(obj);
              }
      
      
              /**
              * Draw the blobs of color and the text
              */
      
              // Custom colors for the key
              if (prop['chart.key.colors']) {
                  colors = prop['chart.key.colors'];
              }
      
              for (var i=0, pos=hpos; i<key.length; ++i) {
                  pos += hmargin;
      
      
      
                  //////////////////////////////////////////////////////////////////////////////////////////////////////
      
      
      
                  // Draw the blob of color
                  if (typeof(prop['chart.key.color.shape']) == 'object' && typeof(prop['chart.key.color.shape'][i]) == 'string') {
                      var blob_shape = prop['chart.key.color.shape'][i];
                  
                  } else if (typeof(prop['chart.key.color.shape']) == 'string') {
                      var blob_shape = prop['chart.key.color.shape'];
                  
                  } else {
                      var blob_shape = 'square';
                  }
      
      
                  /**
                  * Draw the blob of color - line
                  */
                  if (blob_shape =='line') {
                      
                      co.beginPath();
                          co.strokeStyle = colors[i];
                          co.moveTo(pos, vpos + (blob_size / 2));
                          co.lineTo(pos + blob_size, vpos + (blob_size / 2));
                      co.stroke();
                      
                  // Circle
                  } else if (blob_shape == 'circle') {
                      
                      co.beginPath();
                          co.fillStyle = colors[i];
                          co.moveTo(pos, vpos + (blob_size / 2));
                          co.arc(pos + (blob_size / 2), vpos + (blob_size / 2), (blob_size / 2), 0, 6.28, 0);
                      co.fill();
                  
                  } else if (blob_shape == 'triangle') {
                  
                      co.fillStyle = colors[i];
                      co.beginPath();
                          co.strokeStyle = colors[i];
                          co.moveTo(pos, vpos + blob_size);
                          co.lineTo(pos + (blob_size / 2), vpos);
                          co.lineTo(pos + blob_size, vpos + blob_size);
                      co.closePath();
                      co.fill();
                  
                  } else {
                  
                      co.beginPath();
                          co.fillStyle = colors[i];
                          co.rect(pos, vpos, blob_size, blob_size);
                      co.fill();
                  }
      
      
      
                  //////////////////////////////////////////////////////////////////////////////////////////////////////
      
      
      
      
                  pos += blob_size;
                  
                  pos += hmargin;
      
                  co.beginPath();
                      co.fillStyle = typeof text_color == 'object' ? text_color[i] : text_color;;
                      var ret = RG.Text2(obj, {
                          'font':text_font,
                          'bold':text_bold,
                          'size':text_size,
                          'italic': text_italic,
                          'x':pos,
                          'y':vpos + text_size + 3,
                          'text': key[i]
                      });
                  co.fill();
                  pos += co.measureText(key[i]).width;
                  
                  obj.coords.key[i] = [ret.x, ret.y, ret.width, ret.height, key[i], colors[i], obj];
              }
          }