Saurabh Sinha
Saurabh Sinha

Reputation: 1800

how to add tooltip bar chart d3.js

I want to print the value of the data in a bar chart on top of the bar ... like if the count of population in 2012 was say 20000124 then on top of the bar at 2012 it should print 20000124.

how do i do that? this is i worote the code to print bar chart..

var margin = {top: 20, right: 20, bottom: 30, left: 40},
width = 220 - margin.left - margin.right,
height = 220 - margin.top - margin.bottom;

var formatPercent = d3.format(".0%");

var x = d3.scale.ordinal()
.rangeRoundBands([0, width], .1);

var y = d3.scale.linear()
.range([height, 0]);

var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");

var yAxis = d3.svg.axis()
.scale(y)
.orient("left");

var svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

  d3.tsv("data/bar2.tsv", function(error, data) {

  data.forEach(function(d) {
d.frequency = +d.frequency;
});

x.domain(data.map(function(d) { return d.letter; }));
y.domain([0, 100]);

svg.append("g")
  .attr("class", "x axis")
  .attr("transform", "translate(0," + height + ")")
  .call(xAxis);

svg.append("g")
  .attr("class", "y axis")
  .call(yAxis)
.append("text")
  .attr("transform", "rotate(-90)")
  .attr("y", 6)
  .attr("dy", ".71em")
  .style("text-anchor", "end")
  .text("Frequency");

svg.selectAll(".bar")
  .data(data)
.enter().append("rect")
  .attr("class", "bar")
  .attr("x", function(d) { return x(d.letter); })
  .attr("width", x.rangeBand())
  .attr("y", function(d) { return y(d.frequency); })
  .attr("height", function(d) { return height - y(d.frequency); })
  .text(function(d) { return d.letter});

});

so basically how do i add a label on top of every bar ?

Upvotes: 1

Views: 4113

Answers (1)

Lars Kotthoff
Lars Kotthoff

Reputation: 109232

You can add the label to the bars by appending text elements after the rectangles. Something along the lines of

var sel = svg.selectAll(".bar")
    .data(data).enter();

sel.append("rect")
   .attr("class", "bar")
   .attr("x", function(d) { return x(d.letter); })
   .attr("width", x.rangeBand())
   .attr("y", function(d) { return y(d.frequency); })
   .attr("height", function(d) { return height - y(d.frequency); });

sel.append("text")
   .attr("x", function(d) { return x(d.letter); })
   .attr("y", function(d) { return y(d.frequency); })
   .text(function(d) { return d.letter});

You might want to tweak the position of the text to your liking.

Upvotes: 3

Related Questions