CODEWITHSUNDEEP
d3.js
user3827326
user3827326

Reputation:

Add labels to bar in d3 chart

I'm struck trying to add bar labels into my chart. I want the number of tickets from my array to hover over each bar. Here's what my chart looks like now.

Here's my code: 

var data = [
        {"year":2013,"tickets": 500},
        {"year":2014,"tickets": 1500}];

    //creates svg
   var chart = d3.select('#chart').append('svg')
        .style('background', '#E7E0CB')
        .attr('width', width + margin.left + margin.right)
        .attr('height',height + margin.top + margin.bottom)
        .append('g')
        .attr('transform', 'translate('+ margin.left +','+ margin.right +')')
        .style('background','#eee')

chart.selectAll('rect')
            .data(data)//read bar data
            .enter()
            .append('rect')//data makes a rectangle
                    .style('fill','steelblue')
                    .attr('width', xScale.rangeBand())
                    .attr('height', function(d){return yScale(d.tickets);})
                    .attr('x', function(d, i) {return xScale(d.year);})       
                    .attr('y', function (d) {return height - yScale(d.tickets);}) //sets bars at the bottom

    chart.selectAll("rect")
            .data(data).enter()
            .append("text")                 
                .attr("x", function(d) { return xScale(d.tickets); })
                .attr("y", function(d) { return yScale(d.tickets); })
                .text(function(d) { return (d.tickets); });

Upvotes: 0

Views: 141

Answers (1)

FernOfTheAndes
FernOfTheAndes

Reputation: 5015

This should do the trick for you:

var text = chart.selectAll(".text")
    .data(data)
  .enter()
  .append("text")
    .attr("class","text");

var labels = text.attr("x", function (d) {
        return xScale(d.year) + xScale.rangeBand()/2;
    })
    .attr("y", function (d) {return yScale(d.tickets);})
    .text(function (d) { return d.tickets;});

Here is a minimal FIDDLE with the snippet above and some minor corrections to the code you posted.

Upvotes: 1

Related Questions