         .call(@x_axis)
 
       # let's rotate the labels
+      offset = @column_width / 2
       @svg.selectAll('.x_axis text')
         .attr('text-anchor', 'end')
-        .attr('transform', 'rotate(-90) translate(-10, -15)')
-
+        .attr('transform', "rotate(-90) translate(-10, #{-offset})")
 
       @svg.selectAll('rect.serie')
         .data(@prepare_data(), (d) -> d.key)

        .append("svg:g")
        .attr("transform", "translate(#{margins.left}, #{margins.top})")

      @x = d3.scale.ordinal().rangeRoundBands([0, @width - 15])
        .domain(@labels())

      @y = d3.scale.linear().range([0, @series_height]).domain([0, 1])
      @inverted_y = d3.scale.linear().range([@series_height, 0]).domain([0, 1])

      @y_axis = d3.svg.axis()
        .scale(@inverted_y)
        .ticks(4)
        .tickSize(-429, 10, 0)
        .orient("right")
        .tickFormat((x) => Metric.autoscale_value x, @model.get('unit'))

      @x_axis = d3.svg.axis()
        .scale(@x)
        .ticks(4)
        .tickSize(2, 2, 0)
        .orient("bottom")

      @svg.append("svg:g")
        .attr("class", "y_axis inner_grid")
        .attr("transform", "translate(#{@width - 15}, 0)")
        .call(@y_axis)

      @svg.append("svg:g")

      data = @prepare_data()
      # update the scales as needed
      max_value = d3.max(data, (d) -> d.offset)
      @y.domain([0, max_value])
      @inverted_y.domain([0, max_value])

      # animate the y-axis
      @svg.selectAll(".y_axis").transition().call(@y_axis.scale(@inverted_y))
