               mouseOver: ->
                 $("#{id} .highcharts-xaxis-labels span").removeClass('hover')
                 $("#{id} .highcharts-xaxis-labels span:contains(#{@category.short})").addClass('hover')
-      xAxis: [{
-        categories: @generateMonthCategories(data.labels),
-        crosshair: true,
+      xAxis:
+        categories: @generateCategories(data.labels)
         title:
           text: null
         labels:
           format: '{value.short}'
           useHTML: true
         plotBands: [{
-          color: 'rgba(66, 139, 202, 0.2)'
+          color: 'rgba(155, 200, 255, 0.2)'
           from: currentWeek.start
           to: currentWeek.end
         }]
-      }],
       yAxis:
         startOnTick: false
-        labels:
-          format: '{value}k €'
-          formatter: ->
-            value = if @value < 1000 then @value else "#{@value / 1000.0}k"
-            "#{value} €"
         title:
           text: null
       tooltip:
+        crosshairs: [{
+          color: 'rgba(200, 200, 200, 0.2)'
+        }]
         shared: true
         headerFormat: '<div class="highcharts-tooltip-header"><b>{point.key.long}</b></div>'
         pointFormatter: ->

        break
    currentWeek

  invoicesChart: (id, data) ->
    currentWeek = @getCurrentWeek(data.labels)
    $(id).highcharts
      chart:
        type: 'line'
      credits:
        enabled: false
      title:
        text: null
        useHTML: true
      noData:
        style:
          fontSize: "18px"

          enabled: false
      legend:
        enabled: false
      series: @generateSeries(data.datasets)
    }

  invoicesChart: (id, data) ->
    options = @baseChartOptions(id, data)
    options.yAxis['labels'] =
      format: '{value}k €'
      formatter: ->
        value = if @value < 1000 then @value else "#{@value / 1000.0}k"
        "#{value} €"

    $(id).highcharts(options)

  budgetChart: (id, data) ->
    options = @baseChartOptions(id, data)
    options.chart['events'] =
      load: (e) ->
        return unless data.datasets[0]
        segments = []
        width = @plotWidth / @pointCount
        lastPosition = -1
        for position in @xAxis[0].tickPositions
          segmentPosition = @plotLeft
          segmentWidth = 0
          for i in [0..@pointCount - 1]
            if i <= position
              segmentPosition += width
              if i > lastPosition
                segmentWidth += width

          segments.push
            position: segmentPosition
            width: segmentWidth

          lastPosition = position

        for segment, i in segments
          $label = $($(id).find('.highcharts-xaxis-labels span')[i])
          $label.css('left', segment.position - (segment.width / 2) - ($label.width() / 2) - 1)
    options.xAxis['tickPositions'] = data.ticks
    options.yAxis['min'] = if data.datasets[0] && parseInt(data.datasets[0].data[0], 10) is 0 then undefined else 0
    options.yAxis.startOnTick = false
    options.yAxis['labels'] =
      useHTML: true
      format: '{value}k €'
      formatter: ->
        value = if @value < 1000 then @value else "#{@value / 1000.0}k"
        "#{value} €"
    options.yAxis['plotLines'] = [{
      value: data.budget
      color: '#777777'
      width: 2
      label:
        useHTML: true
        style:
          fontSize: null
        text: "<span class='label label-default highcharts-plotline-budget'>#{I18n.t("labels.chart.project.budget_estimate")}: #{accounting.formatMoney(data.budget, {symbol: '€', format: '%v %s', decimal: ',', thousand: '.'})}</span>"
    }]

    $(id).highcharts(options)

$(document).on 'mouseleave', '.chart', ->
  $(@).find('.highcharts-xaxis-labels span').removeClass('hover')
