[Solved]-How to add value of bar on the barChart?-d3.js

var id = "#container",
  dataArray = [10, 20, 45, 24, 36, 10, 26];
var width = 1000,
  height = 500;
var margin = {
  left: 250,
  right: 0,
  top: 20,
  bottom: 70
}
var verticalGap = 60;
var horizontalGap = 10;
var scaleMultiplier = 7;

var widthScale = d3.scale.linear().domain([0, 100]).range([0, 100])

var colorScale = d3.scale.ordinal().domain([0, 1, 2, 3, 4, 5, 6])
  .range(["#D7DF21", "#FCB040", "#F1592A", "#0F75BC", "#61CCEE", "#C49A6C", "#13A89E"])

var canvas = d3.select(id).append("svg").attr("width", width).attr("height", height);

canvas.append("line").attr("x1", margin.left).attr("y1", height - margin.bottom).attr("x2", width)
  .attr("y2", height - margin.bottom).attr("stroke-width", 2).attr("stroke", "#A6A7A6");

canvas.append("line").attr("x1", margin.left).attr("y1", height - margin.bottom + 1)
  .attr("x2", margin.left).attr("y2", 5).attr("stroke-width", 2).attr("stroke", "#A6A7A6");



canvas.selectAll(".facilitiesBar").append("rect").data(dataArray).enter().append("rect").attr("class", "facilitiesBar")
  .attr("width", function(d) {
    return widthScale(d) * scaleMultiplier;
  }).attr("height", 25)
  .attr("x", margin.left + 1).attr("y", function(d, i) {
    return margin.top + i * verticalGap;
  })
  .attr("fill", function(d, i) {
    return colorScale(i);
  })

var verticalLabel = ["Sports Field", "Sports Instruments", "Musical Instruments", "Different types of competition",
  "Scout,Girls/Boys Guide", "No Instrument Available", "Library"
]

canvas.selectAll(".facilitiesY").append("text")
  .data(verticalLabel).enter().append("text").text(function(d) {
    return d
  }).attr("class", "facilitiesY")
  .attr("x", 0).attr("y", function(d, i) {
    return margin.top + 20 + i * verticalGap
  })
  .attr("text-align", "left")

var horizontalLabel = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
canvas.selectAll(".facilitiesX").append("text").data(horizontalLabel).enter().append("text")
  .text(function(d) {
    return "" + d * 10;
  }).attr("class", "facilitiesX")
  .attr("x", function(d) {
    return (margin.left + 10 * d * scaleMultiplier);
  })
  .attr("y", 450).attr("text-align", "left")

canvas.append("text").text("(Response in %)").attr("x", 500).attr("y", 480);


var textPadding = 15;

canvas.selectAll(".bartext")
  .data(dataArray)
  .enter()
  .append("text")
  .attr("class", "bartext")
  .attr("text-anchor", "middle")
  .attr("fill", "black")
  .attr("x", function(d, i) {
    return margin.left + textPadding + widthScale(d) * scaleMultiplier;
  })
  .attr("y", function(d, i) {
    return margin.top + 20 + i * verticalGap;
  })
  .text(function(d) {
    return d;
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<div id="container">
</div>