CODEWITHSUNDEEP
javascriptd3.jsnvd3.js
azi
azi

Reputation: 929

How to display values on top of nvd3 multi par graph?

I want the actual value of each bar displayed on top in the way it's shown here

I am trying this on multi bar chart.

Can't find reference anywhere.

Upvotes: 6

Views: 4046

Answers (3)

Björn Andreasson
Björn Andreasson

Reputation: 61

Duplicate of How to display values in Stacked Multi-bar chart - nvd3 Graphs

There is a fix you can implement yourself at https://gist.github.com/topicus/217444acb4204f364e46

EDIT: Copied the code if the github link gets removed:

// 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');
  });
});

Upvotes: 5

Holger
Holger

Reputation: 1839

Apparently this doesn't exist yet. There is an issue (https://github.com/novus/nvd3/issues/150) that was closed because this is (apparently) hard to implement.

Upvotes: 2

shabeer90
shabeer90

Reputation: 5151

I am not sure what you have tried so fat, but the example in here is pretty straight forward.

.showValues(true) pretty much does the trick.

Hope it helps.

Upvotes: -1

Related Questions