Label is not coming in proper position in D3 Bar graphs

Question

I have the following problems with my bar chart.How to set decimal label value in proper position in Bar graph.label should not be overlap in nearest bar.but in my case it's overlapping.please suggest how to correct it below is my code

var data = [
                    { Request: 1, AvgRequest: 4123.18 },
                    { Request: 2, AvgRequest: 5221.16 },
                    { Request: 3, AvgRequest: 32.42 },
                        { Request: 4, AvgRequest: 22.13 },
                    { Request: 5, AvgRequest: 413.21 },
                    { Request: 6, AvgRequest: 112.19 }
                ];



             var margin = { top: 40, right: 40, bottom: 35, left: 85 },
    width = 450 - margin.left - margin.right,
    height = 250 - 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 + ")");



             data.forEach(function (d) {

                 d.Request = d.Request;
                 d.AvgRequest = +d.AvgRequest;

             });

             x.domain(data.map(function (d) { return d.Request; }));
             y.domain([0, d3.max(data, function (d) { return d.AvgRequest; })]);

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


             // xAxis label
             svg.append("text")
    .attr("transform", "translate(" + (width / 2) + " ," + (height + margin.bottom + 5) + ")")
    .style("text-anchor", "middle")
    .text("Numbers of request");

             //yAxis label
             svg.append("text")
        .attr("transform", "rotate(-90)")
        .attr("y", 0 - margin.left)
        .attr("x", 0 - (height / 2))
        .attr("dy", "1em")
        .style("text-anchor", "middle")
        .text("avg request);

             // Title
             svg.append("text")
        .attr("x", (width / 2))
        .attr("y", 0 - (margin.top / 2))
        .attr("text-anchor", "middle")
        .style("font-size", "16px")
        .style("text-decoration", "underline")
        .text("Avg");

             svg.append("g")
      .attr("class", "y axis")
      .call(yAxis);


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




             var text = svg.selectAll("text1")
                .data(data)
                .enter()
                .append("text")
                .attr("class", function (d) { return "label " + d.Request; })
                .attr("x", function (d, i) {
                    return x(i) + x.rangeBand() / 5;
                })
                .attr("y", function (d, i) {
                    return y(d.AvgRequest) + 25;
                })

             .text(function (d) { return d.AvgRequest; })
                .attr("font-size", "15px")
                .style("stroke", "black");

[This question](http://stackoverflow.com/questions/13241475/how-do-i-include-newlines-in-labels-in-d3-charts) should help. — Lars Kotthoff, Mar 25 '14 at 08:56

score 0 · Answer 1 · answered Mar 25 '14 at 11:07

I added two new variables to separate dimensions of complete chart and plot area:

var margin = { top: 40, right: 40, bottom: 35, left: 85 },
    width = 450,
    height = 250;
    plotAreaWidth  = width - margin.left - margin.right,
    plotAreaHeight = height - margin.top - margin.bottom;

and changed other code accordingly.

And changes for text labels:

var text = svg.selectAll("text1")
    .data(data)
    .enter()
    .append("text")
    .attr("class", function (d) { return "label " + d.Request; })
    .attr("x", function (d, i) {
        //return x(i) + x.rangeBand() / 2;
        return x(d.Request);
    })
    .attr("y", function (d, i) {
        //return y(d.AvgRequest) + 25;
        return y(d.AvgRequest) - 5;
    })
    .text(function (d) { return d.AvgRequest; })
        .attr("font-size", "15px")
        .style("stroke", "black");

Changed example at jsbin.

Label is not coming in proper position in D3 Bar graphs

1 Answers1