         left_stack += s.safe_present_value()
         right_stack += s.safe_future_value()
 
+        gquery = s.get 'gquery_key'
+
         mid_year = (@start_year + @end_year) / 2
 
         out = [
           {
             x: @start_year
             y: s.safe_present_value()
-            id: "#{s.get 'gquery_key'}"
+            id: gquery
             color: s.get('color')
+            label: s.get('label')
           },
           {
             x: mid_year
             y: mid_point
-            id: "#{s.get 'gquery_key'}"
+            id: gquery
             color: s.get('color')
           },
           {
             x: @end_year
             y: s.safe_future_value()
-            id: "#{s.get 'gquery_key'}"
+            id: gquery
             color: s.get('color')
           }
         ]

        .attr('class', 'serie')
        .attr('d', (d) => @area d.values)
        .style('fill', (d) => d.values[0].color)

      # draw a nice axis
      @y_axis = d3.svg.axis()

        .attr("transform", "translate(#{@width - 15}, 0)")
        .call(@y_axis)

      # series tooltips
      $('path.serie').qtip
        content:
          title: -> $(this).attr('data-title')
          text: -> $(this).attr('data-tooltip')
        show:
          event: 'mouseover' # silly IE
        hide:
          event: 'mouseout'  # silly IE
        position:
          target: 'mouse'
          my: 'bottom right'
          at: 'top center'
        style:
          classes: "ui-tooltip-bootstrap"

    refresh: =>
      # calculate tallest column
      tallest = Math.max(
