CODEWITHSUNDEEP
angularjsd3.jsnvd3.js
Mangesh
Mangesh

Reputation: 3997

Display the Values inside the bar in nvd3 (d3) discreteBarChart in angular

enter image description here

Here is the link. http://krispo.github.io/angular-nvd3/#/discreteBarChart

I want to position the values shown at the top of each bar inside the bar. Is there any way to do it in angular nvd3.

Upvotes: 1

Views: 609

Answers (1)

Cyril Cherian
Cyril Cherian

Reputation: 32327

Using nvd3 I don't think so:

But using d3 you can do it like this:

$timeout triggering function later(used here so that nvd3 ends up making the chart) same as window timeout.

$timeout(function() {
    //get all the positive bars and to its text y add 14
    d3.selectAll(".positive").selectAll("text").forEach(function(k) {
      var v = parseFloat(d3.select(k[0]).attr("y")) + 14;
      d3.select(k[0]).attr("y", v)
    })
  }, 1000);//do this after a time out of 1 sec

$timeout(function() {
    //get all the negative bars and to its text y minus 14
    d3.selectAll(".negative").selectAll("text").forEach(function(k) {
      var v = parseFloat(d3.select(k[0]).attr("y")) - 14;
      d3.select(k[0]).attr("y", v)
    })
  }, 1000);//do this after a time out of 1 sec

Working code here

Hope this helps!

Upvotes: 1

Related Questions