1

This is similar to a problem that I asked before. However instead of a bar chart, I'm trying to display the totals for a row chart.

I've tried to adjust the code accordingly, but my familiarity with JS is pretty low. Below is my attempt, any help would be greatly appreciated.

      genderChart.on('renderlet', function (chart) {

    var rowData = [];
    var rows = chart.selectAll('.row').each(function (d) {
      rowsData.push(d);
    });

    //Remove old values (if found)
    d3.select(rows[0][0].parentNode).select('#inline-labels').remove();
    //Create group for labels
    var gLabels = d3.select(bars[0][0].parentNode).append('g').attr('id', 'inline-labels');

    for (var i = rows[0].length - 1; i >= 0; i--) {

      var b = rows[0][i];

      gLabels.append("text")
          .text(d3.format(",f")(rowsData[i].data.value))
          .attr('x', +b.getAttribute('x') + (b.getAttribute('width') + 20)
          .attr('y', +b.getAttribute('y'))
          .attr('text-anchor', 'middle')
          .attr('fill', 'black');
    }
  });

Right now there's no error in the console, so it's being render correctly...somwhere. So far the text does not show up anywhere near my row chart. Thanks!

Community
  • 1
  • 1
Minh
  • 2,180
  • 5
  • 23
  • 50

1 Answers1

2

As an alternative to your approach, you could try using renderTitleLabel.

Something like this:

genderChart
  .title(function(d) {
    return d.value; // or your custom value accessor
  })
  .renderTitleLabel(true)
  .titleLabelOffsetX(10); // optional offset from the right side of the chart

(This is available in the 2.0 betas, I am not sure about previous versions.)

adlr0
  • 758
  • 9
  • 13
Arthur
  • 351
  • 1
  • 12