           event: 'mouseout'  # silly IE
         position:
           my: 'bottom right'
-          at: 'top right'
+          at: 'top center'
 
       # add legend
       legends = @svg.selectAll("svg.legend").

        append("svg:rect").
        attr("data-rel", (d) -> d.get('key')).
        attr("class", "merit_order_node").
        attr("fill", (d, i) => @color(i)).
        attr("data-original-color", (d, i) => @color(i)).
        style("stroke", (d, i) => d3.rgb(@color(i)).darker(1)).
        attr("y", (d) => @height - @y(d.value_y()) - .5).
        attr("x", (d, i) -> i * 30).
        attr("height", (d) => @y d.value_y()).
        attr("width", (d) => @x d.value_x()).
        on("mouseover", ->
          item = d3.select(this)
          item.transition().attr("fill", -> d3.rgb(item.attr("data-original-color")).brighter(1))
        ).
        on("mouseout", ->
          item = d3.select(this)
          item.transition().attr("fill", -> item.attr("data-original-color"))
        )

      $('rect.merit_order_node').qtip

              attr("text-anchor", "middle").
              attr("class", "axis_label")

      # nodes
      @svg.selectAll('rect.merit_order_node').
        data(@nodes.models, (d) -> d.get('key')).
