javascript - How to reduce the spacing between Legend rect and Legend Text in dimple.js -

i need reduce spacing between legend rect(the box) , legend text in dimple.js

here fiddle - http://jsfiddle.net/keshav_1007/f4warsnu/3/

var ymax = 520; // overriding y axis         var score=8000/100;         var svg = dimple.newsvg("#chartcontainer", 600, 600);         var data = [{             "brand":"a",              "day":"mon",              "salesvolume":100 },             {              "brand":"b",              "day":"mon",              "salesvolume":200 }];         var mychart = new dimple.chart(svg, data);          mychart.setbounds(100, 50, 300, 300)         var x = mychart.addcategoryaxis("x", "day");         var y = mychart.addmeasureaxis("y", "salesvolume");         y.overridemax = ymax;          y.addorderrule("salesvolume");         var s = mychart.addseries("brand", dimple.plot.bar);         s.bargap=0.7;         mychart.addlegend(120, 400, 300, 30, "left");          s.addeventhandler("mouseover", onhover);          s.addeventhandler("mouseleave", onleave);           mychart.draw();          d3.selectall("rect").on("mouseover", null);         s.shapes.on("mouseover", function (e) { dimple._showbartooltip(e, this, chart, s); });         var defs = svg.append("g");         defs.append("marker")         .attr("id", "triangle-start")         .attr("viewbox", "-5 -5 10 10")         .attr("refx", -1)         .attr("refy", 0)         .attr("markerwidth", 10)         .attr("markerheight", 10)         .attr("orient", "auto")         .append("path")         .attr("class", "marker")         .attr("d", "m 0 0 l 3 4 l 3 -4 z");           svg.append("line")         .attr("x1",205)         .attr("x2", 295)         .attr("y1", (y._scale(score)))         .attr("y2",(y._scale(score)))         .attr('stroke','black')         .attr("marker-end", "url(#triangle-start)")         .style("stroke-dasharray", "3");      var defs1 = svg.append("g");         defs1.append("marker")         .attr("id", "triangle-start1")         .attr("viewbox", "-5 -5 10 10")         .attr("refx", -1)         .attr("refy", 0)         .attr("markerwidth", 10)         .attr("markerheight", 10)         .attr("orient", "auto")         .append("path")         .attr("class", "marker")         .attr("d", "m 0 0 l 3 4 l 3 -4 z");           svg.append("line")         .attr("x1",205)         .attr("x2", 295)         .attr("y1",200)         .attr("y2",200)         .attr('stroke','black')         .attr("marker-start", "url(#triangle-start1)")         .style("stroke-dasharray", "3");          function onhover(e) {             console.log("on enter");             var cx = parsefloat(e.selectedshape.attr("x")),                     cy = parsefloat(e.selectedshape.attr("y"));                  // set size , position of popup                 var width = 150,                     height = 70,                     x = (cx + width + 10 < svg.attr("width") ?                          cx + 10 :                 cx - width - 20);                     y = (cy - height / 2 < 0 ?                         15 :                         cy - height / 2);                  // create group popup objects                 popup = svg.append("g");                  // add rectangle surrounding text                 popup .append("rect")                         .attr("x", x + 5)                         .attr("y", y - 5)                         .attr("width", 150)                         .attr("height", height)                         .attr("rx", 5)                         .attr("ry", 5)                         .style("fill", 'white')                         .style("stroke", 'black')                         .style("stroke-width", 2);                 // add multiple lines of text               var pos1 = d3.select("path").node().gettotallength();              console.log(pos1);             var pos2 = d3.select("path").node().getpointatlength(312)                          console.log(pos2); console.log(pos2.x); console.log(pos2.y);         }          function onleave(e) {             console.log("on leave");             if (popup !== null) {                     popup.remove();                 }          } 

i need reduce spaces between legend box , legend text. please let me know how that..

you can d3

d3.selectall('.legendtext').attr('x', function(d) {     return d3.select(this).attr("x") - 2; }); 

just change relative position see fit changing 2 else.

fiddle - http://jsfiddle.net/pabwyk5d/