Add labels to MultiBarCharts in NVD3

nvd3-labels-multibarchart.js

// You need to apply this once all the animations are already finished. Otherwise labels will be placed wrongly.

d3.selectAll('.nv-multibar .nv-group').each(function(group){
  var g = d3.select(this);
  
  // Remove previous labels if there is any
  g.selectAll('text').remove();
  g.selectAll('.nv-bar').each(function(bar){
    var b = d3.select(this);
    var barWidth = b.attr('width');
    var barHeight = b.attr('height');

    g.append('text')
      // Transforms shift the origin point then the x and y of the bar
      // is altered by this transform. In order to align the labels
      // we need to apply this transform to those.
      .attr('transform', b.attr('transform'))
      .text(function(){
        // Two decimals format
        return parseFloat(bar.y).toFixed(2);
      })
      .attr('y', function(){
        // Center label vertically
        var height = this.getBBox().height;
        return parseFloat(b.attr('y')) - 10; // 10 is the label's magin from the bar
      })
      .attr('x', function(){
        // Center label horizontally
        var width = this.getBBox().width;
        return parseFloat(b.attr('x')) + (parseFloat(barWidth) / 2) - (width / 2);
      })
      .attr('class', 'bar-values');
  });
});

How to detect when all the animations are already finished. Trying to see if I can capture that event but haven't been able to figure it out as yet.

I added a $timeout delay to then display the values. So its all good.

How to detect when all the animations are already finished.

chart.dispatch.on('renderEnd', function() { ... });

Hi,

I need to do the same for "multibarHorizontal"

did below changes

d3.selectAll('.nv-multibarHorizontal

but

b.attr('width');
var barHeight = b.attr('height');

are null.

Thanks!

Try with b.node().getBBox(), you'll get all the dimension you need { x: #, y: #, width: #, height: # }

Very useful thanks.

Is it possible to make labels a different colour from the bars?

Yeah it is possible.

Try only add the style attribute.

.attr('class', 'bar-values')
.style("stroke","black");

This is wonderful, thank you.

Is there any way to rotate the labels 90% so that they work their way up the graph?