title: Text not showing on y-axis in horizontal bar chart d3.js
body: <p>I have <strong>csv</strong>: </p>
  
  <pre><code>Vendor,Units2016,Share2016,Units2015,Share2015
  Samsung,"306,446.60",20.5,"320,219.70",22.5
  Apple,"216,064.00",14.4,225850.6,15.9
  Huawei,"132,824.90",8.9,"104,094.70",7.3
  Oppo,"85,299.50",5.7,"39,489.00",2.8
  BBK Communication,"72,408.60",4.8,"35,291.30",2.5
  Others,"682,313.30",45.6,"698,955.10",49.1
  </code></pre>
  
  <p>What I'm trying to achieve here is to display Vendor's name on y axis and Share2016 data on x axis. </p>
  
  <p>Desired layout: <a href="https://i.stack.imgur.com/j0rnK.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/j0rnK.png" alt="enter image description here"></a></p>
  
  <pre><code>    var fullw = 320;
      var fullh = 240;
  
  
      var margin = {
          top: 1,
          right: 25,
          bottom: 25,
          left: 200
      }
  
      var widthScale = d3.scaleLinear()
          .range([0, fullw]);
  
      var heightScale = d3.scaleBand()
          .rangeRound([0, fullh])
          .paddingInner(0.05);
  
  
  
      var svg = d3.select("body")
          .append("svg")
          .attr("width", fullw + margin.left + margin.right)
          .attr("height", fullh + margin.top + margin.bottom)
          .append("g")
          .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
  
  
  
      d3.csv("smartphones-statistics.csv", function (error, data){
          if(error){
              console.log("An error occured while loading data");
          }
  
          console.log(data);
  
          var barcolor = d3.scaleLinear()
              .domain([0, d3.max(data, function(d){
                  return +d.Share2016;
              })])
              .range(["#E6F5FF", "blue"])
              .interpolate(d3.interpolateHcl);
  
  
          widthScale.domain([0, d3.max(data, function(d){
              return +d.Share2016;
          })]);
  
          heightScale.domain(data.map(function(d){
              return d.Vendor;
          }));
  
      myArray.sort(function(a,b){                 //This will sort data
          return a[2] - b[2];         //in descending order
      })
  
  var bars = svg.selectAll("rect")
              .data(data)
              .enter()
              .append("rect")
              .attr("x", 20)
              .attr("y", function(d){
                  return heightScale(d.Vendor);
              })
              .attr("width", function(d){
                  return widthScale(+d.Share2016);
              })
              .attr("height", heightScale.bandwidth())
              .style("fill", function(d, i){
                  return barcolor(i);
              })
  
  
          bars.append("text")
              .attr("x", 12)
              .attr("dy", "1.2em")
              .attr("text-anchor", "middle")
              .text(function(d) {
                  return d.Vendor; })
              .style("fill", "#000000");
      })
  </code></pre>
  
  <p>I have managed to get bar chart displayed:</p>
  
  <p><a href="https://i.stack.imgur.com/1sBRp.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/1sBRp.png" alt="enter image description here"></a></p>
  
  <p>But I can't figure out were is the text? What am I doing wrong here? I've been trying to add yAxis = d3.axisLeft(heightScale).tickValues(data) but it doesn't work. Please help.</p>