title: How to add a input text box for each bar in a bar graph using html, javascript and css
body: <p>I want to create a bar graph like below:</p>
  
  <p><a href="https://i.stack.imgur.com/bb9zZ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/bb9zZ.png" alt="Bar Graph"></a>
  Right now I have created the following graph:</p>
  
  <p><a href="https://i.stack.imgur.com/MR087.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/MR087.png" alt="enter image description here"></a>
  Please find my code below:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
  &lt;script src="http://d3js.org/d3.v3.min.js"&gt;&lt;/script&gt;
  &lt;style type="text/css"&gt;
  .x-axis path {
      stroke:white;
      fill:none;
  }
  .x-axis line {
      fill: none;
      stroke: none;
      stroke-opacity:.8;
      shape-rendering: crispEdges;
  }
  .bars rect {
      fill:steelblue;
      fill-opacity:.9;
  }
  .title {
      font-weight: bold;
  }
  #precise-value {
      fill:white;
      font-size: 12px;
  }
  
  &lt;/style&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;script type="text/javascript"&gt;
  
  
  (function(){
  
      var margin = {top: 50, bottom: 50, left:250, right: 40};
      var width = 900 - margin.left - margin.right;
      var height = 450 - margin.top - margin.bottom;
  
      var xScale = d3.scale.linear().range([0, width]);
      var yScale = d3.scale.ordinal().rangeRoundBands([0, height], 1.8,0);
  
      var numTicks = 5;
      var xAxis = d3.svg.axis().scale(xScale)
                      .orient("top")
                      .tickSize((-height))
                      .ticks(numTicks);
   
    
      var svg = d3.select("body").append("svg")
                  .attr("width", width+margin.left+margin.right)
                  .attr("height", height+margin.top+margin.bottom)
                  .attr("class", "base-svg");
   
      var barSvg = svg.append("g")
                  .attr("transform", "translate("+margin.left+","+margin.top+")")
                  .attr("class", "bar-svg");
   
      var x = barSvg.append("g")
              .attr("class", "x-axis");
  
   
   
   
    
      d3.csv("C:/Users/Owner/Desktop/Graph/sampledata.csv", function(error, data) {
  
          var xMax = d3.max(data, function(d) { return d.Count; } );
          var xMin = 0;
          xScale.domain([xMin, xMax]);
          yScale.domain(data.map(function(d) { return d.Symptom_Category; }));
  
          d3.select(".base-svg").append("text")
              .attr("x", margin.left)
              .attr("y", (margin.top)/2)
              .attr("text-anchor", "start")
              .text("Symptom Pareto")
              .attr("class", "title");
  
          var groups = barSvg.append("g").attr("class", "labels")
                      .selectAll("text")
                      .data(data)
                      .enter()
                      .append("g");
  
          groups.append("text")
                  .attr("x", "0")
                  .attr("y", function(d) { return yScale(d.Symptom_Category); })
                  .text(function(d) { return d.Symptom_Category; })
                  .attr("text-anchor", "end")
                  .attr("dy", ".9em")
                  .attr("dx", "-.32em")
                  .attr("id", function(d,i) { return "label"+i; });
  
          var bars = groups
                      .attr("class", "bars")
                      .append("rect")
                      .attr("width", function(d) { return xScale(d.Count); })
                      .attr("height", height/20)
                      .attr("x", xScale(xMin))
                      .attr("y", function(d) { return yScale(d.Symptom_Category); })
                      .attr("id", function(d,i) { return "bar"+i; });
  
          groups.append("text")
                  .attr("x", function(d) { return xScale(d.Count); })
                  .attr("y", function(d) { return yScale(d.Symptom_Category); })
                  .text(function(d) { return d.Count; })
      .attr("text-anchor", "end")
                  .attr("dy", "1.2em")
                  .attr("dx", "-.32em")
                  .attr("id", "precise-value");
    
          bars
              .on("mouseover", function() {`enter code here`
                  var currentGroup = d3.select(this.parentNode);
                  currentGroup.select("rect").style("fill", "brown");
                  currentGroup.select("text").style("font-weight", "bold");
              })
              .on("mouseout", function() {
                  var currentGroup = d3.select(this.parentNode);
                  currentGroup.select("rect").style("fill", "steelblue");
                  currentGroup.select("text").style("font-weight", "normal");
              });
     
          x.call(xAxis);
          var grid = xScale.ticks(numTicks);
          barSvg.append("g").attr("class", "grid")
              .selectAll("line")
              .data(grid, function(d) { return d; })
              .enter().append("line")
                  .attr("y1", 0)
                  .attr("y2", height+margin.bottom)
                  .attr("x1", function(d) { return xScale(d); })
                  .attr("x2", function(d) { return xScale(d); })
                  .attr("stroke", "white");
  
      });
  
  })();
  
  &lt;/script&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>How will I add right side text boxes in my current graph?
  I am new in learning javascript. Kindly help me in solving the problem. I know this can be done by svg d3 but I am not sure how to do that.</p>