Dc.js barchart valueAccessor render object object

I've used dc.js rowChart to display the average indexes of the index calculated in custom reduceAdd / reduceRemove functions and it all works fine. Now I want to change rowChart to barChart and for some reason valueAccessor returns [object object] when hovering over the columns (representing the index column) in the chart instead of showing the average. If I print the avg value to the console, it is defined correctly.

My csv file is structured like this:

Index,Model,Year,Season
Heat,Model1,1974,0
Heat,Model1,1974,1
Heat,Model1,1974,2
Heat,Model2,1974,3
Heat,Model2,1994,0
Heat,Model2,1994,1
Heat,Model2,1994,2
Heat,Model2,1994,3
Rain,Model1,1974,0
Rain,Model1,1974,1
Rain,Model1,1974,2
Rain,Model2,1974,3
Rain,Model2,1994,0
Rain,Model2,1994,1
Rain,Model2,1994,2
Rain,Model2,1994,3

      

        
        
        
      

    

These are the versions of the libraries:

<script type="text/javascript" src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/dc/1.7.0/dc.js"></script>
<script type="text/javascript" src="https://rawgithub.com/NickQiZhu/dc.js/master/web/js/crossfilter.js"></script>
<link rel="stylesheet" type="text/css" href="http://tvinci.github.io/webs/css/dc.css"/>

      

        
        
        
      

    

Here is the definition of barChart and filter:

indexChart = dc.barChart("#chart-index");
var indexDimension = filter.dimension(function(d) { return d.Index; });
var indexGroup = indexDimension.group();
var avgIndexGroup = indexDimension.group().reduce(reduceAdd, reduceRemove, reduceInitial);

function reduceAdd(p, v) {
  ++p.count;
  p.total += v.value;
  p.average = p.total / p.count
  return p;
}

function reduceRemove(p, v) {
  --p.count;
  p.total -= v.value;
  p.average = p.total / p.count
  return p;
}

function reduceInitial() {
  return {count: 0, total: 0, average: 0};
}

      

        
        
        
      

    

And finally, the chart options:

indexChart
.width(300).height(200)
.margins({ top: 10, right: 30, bottom: 30, left: 10 })    
.dimension(indexDimension)    
.group(avgIndexGroup)
.valueAccessor(function(p) { 
    //console.log("p.value.average: ", p.value.average) //displays the avg fine
    return p.value.average; 
})    
.elasticY(true)
.gap(0)
.x(d3.scale.ordinal())
.xUnits(dc.units.ordinal); // Tell dc.js that we're using an ordinal x-axis;

indexChart.yAxis().ticks(4);

      

        
        
        
      

    

Any suggestions are greatly appreciated. Thanks in advance!