         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("transform", "translate(#{@width - 15}, 0)")
        .call(@y_axis)

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

        .data(stacked_data, (s) -> s.key)
        .transition()
        .attr('d', (d) => @area d.values)
        .attr('data-tooltip', (d) => "
          #{@start_year}: #{Metric.autoscale_value d.values[0].y, @model.get 'unit'}</br>
          #{@end_year}: #{Metric.autoscale_value d.values[2].y, @model.get 'unit'}
        ")

    # We need to pass the chart series through the stacking function and the SVG
    # area function. To do this let's format the data as an array. An
