How to show values of bar on top of each bar in nvd3 angular multibarchart?

Question

I've tried using showValues: true in the options but no luck. This is the library http://krispo.github.io/angular-nvd3/#/ showValues works on discrete bar chart but not on multibarchart.This is the expected output

Answer 1

This code is worked for me.

1)call a function(setOnTopLabel();) after your chart option configured.

2)add this function in your js code.

function setOnTopLabel() {
            $timeout(function () {
                debugger;
                d3.selectAll('.nv-multibar .nv-group').each(function (group) {
                    debugger;
                    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);
                                })
                                .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);
                                }).style("fill", "black").style('stroke-width', "10").style('fill-opacity', "100");
                    });
                });
            }, 1000);
        }