hi sharad I am given the bellow code for svg generated chart for demo of bar . If you tell clearly That You want can try > html > head > style > .bar{ fill: blueviolet; } .highlight { fill:coral; } style > script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js" > script > head > body > svg id = "visualisation" style = "background-color:cadetblue" width = "1000" height = "500" > svg > script > var data = [100, 200, 300, 350, 400, 250,450] var width = 500 , barHeight = 20 , margin = 1 ; var scale = d3 .scaleLinear() .domain([d3.min(data), d3.max(data)]) .range([100, 400]); var svg = d3 .select("#visualisation") .append("svg") .attr("width", width) .attr("height", barHeight * data.length); var g = svg .selectAll("g") .data(data) .enter() .append("g") .attr("stroke", "blue") .attr("transform", function (d, i) { return "translate(0," + i * barHeight + ")"; }); g.append("rect") .attr("width", function (d) { return scale(d); }) .attr("class", "bar") .attr("height", barHeight - margin) .on("mouseover", onMouseOver) .on("mouseout", onMouseOut) g.append("text") .attr("x", function (d) { return (scale(d)); }) .attr("y", barHeight / 2).attr("dy", ".35em") .text(function (d) { return d; }); function onMouseOver(d, i) { d3.select(this) .attr('class', 'highlight'); } function onMouseOut(d, i) { d3.select(this) .attr('class', 'bar'); } script > body > html >