       @series_height = 280
       @x = d3.scale.linear().domain([0, 100]).range([0, @width])
       @y = d3.scale.linear().domain([0, 100]).range([0, @series_height])
-      # inverted scale used by the y-axis
-      @yAxisScale = d3.scale.linear().domain([0, 100]).range([@series_height, 0])
-      @xAxis = d3.svg.axis().scale(@x).ticks(4).orient("bottom")
-      @yAxis = d3.svg.axis().scale(@yAxisScale).ticks(4).orient("left")
-      @svg = d3.select("#d3_container_merit_order").
-        append("svg:svg").
-        attr("height", @height + margins.top + margins.bottom).
-        attr("width", @width + margins.left + margins.right).
-        append("svg:g").
-        attr("transform", "translate(#{margins.left}, #{margins.top})")
+      @inverted_y = @y.copy().range([@series_height, 0])
+      @x_axis = d3.svg.axis().scale(@x).ticks(4).orient("bottom")
+      @y_axis = d3.svg.axis().scale(@inverted_y).ticks(4).orient("left")
+      @svg = d3.select("#d3_container_merit_order")
+        .append("svg:svg")
+        .attr("height", @height + margins.top + margins.bottom)
+        .attr("width", @width + margins.left + margins.right)
+        .append("svg:g")
+        .attr("transform", "translate(#{margins.left}, #{margins.top})")
 
       # axis
-      @svg.append("svg:g").
-        attr("class", "x_axis").
-        attr("transform", "translate(0, #{@height})").
-        call(@xAxis)
-      @svg.append("svg:g").
-        attr("class", "y_axis").
-        call(@yAxis)
-      @svg.append("svg:text").
-        text('Operating Costs [EUR/MWh]').
-        attr("x", @height / -2).
-        attr("y", -25).
-        attr("text-anchor", "middle").
-        attr("class", "axis_label").
-        attr("transform", "rotate(270)")
+      @svg.append("svg:g")
+        .attr("class", "x_axis")
+        .attr("transform", "translate(0, #{@height})")
+        .call(@x_axis)
+      @svg.append("svg:g")
+        .attr("class", "y_axis")
+        .call(@y_axis)
+      @svg.append("svg:text")
+        .text('Operating Costs [EUR/MWh]')
+        .attr("x", @height / -2)
+        .attr("y", -25)
+        .attr("text-anchor", "middle")
+        .attr("class", "axis_label")
+        .attr("transform", "rotate(270)")
 
       @svg.append("svg:text")
         .text('Installed Capacity [MW]')

        offset += d.value_x()
        d.set {x_offset: value}

      @svg.selectAll('rect.merit_order_node').
        data(@nodes.models, (d) -> d.get('key')).
        transition().duration(500).
        attr("height", (d) =>
          if (h = @y(d.value_y())) < @min_node_height
            @min_node_height
          else
            h
        ).
        attr("width", (d) => @x(d.value_x())).
        attr("y", (d) =>
          if (h = @y(d.value_y())) < @min_node_height
            @height - @min_node_height
          else
            @height - h
        ).
        attr("x", (d) => @x(d.get 'x_offset')).
        attr("data-tooltip-text", (d) ->
          html = "Installed capacity: #{Metric.autoscale_value(d.value_x() * 1000000, 'MW', 2)}"
          html += "<br/>"
          html += "Operating costs: #{Metric.autoscale_value d.original_y_value(), 'euro', 2}"

        left_margin: 15

    refresh: =>
      max_height = @nodes.max_height()
      @y.domain([0, max_height])
      @inverted_y.domain([0, max_height])
      @x.domain([0, @nodes.total_width()])
      @svg.selectAll(".x_axis").transition().call(@x_axis.scale(@x))
      @svg.selectAll(".y_axis").transition().call(@y_axis.scale(@inverted_y))

      @min_node_height = 2

