         .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

        left_stack += s.safe_present_value()
        right_stack += s.safe_future_value()

        mid_year = (@start_year + @end_year) / 2

        out = [
          {
            x: @start_year
            y: s.safe_present_value()
            id: "#{s.get 'gquery_key'}"
            color: s.get('color')
          },
          {
            x: mid_year
            y: mid_point
            id: "#{s.get 'gquery_key'}"
            color: s.get('color')
          },
          {
            x: @end_year
            y: s.safe_future_value()
            id: "#{s.get 'gquery_key'}"
            color: s.get('color')
          }
        ]

        .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(
