Linechart graph drawing vertical dotted lines and circles within it

Question

http://jsfiddle.net/ub69o0xw/7/

 jQuery(function ($) {

 var r = Raphael("graph", 303, 118);
 var lines = r.linechart(0, 0, 303, 126, [
     [0, 1, 2, 3, 4, 5, 6]
 ], [
     [1, 2, 3, 7, 4, 5, 4]
 ], {
     nostroke: false,
     axis: "0 0 1 1",
     axisxstep: 4,
     axisystep: 7,
     colors: ['#fff'],
     symbol: "circle",
     smooth: false,
     shade: true
 }).hoverColumn(function () {

 }, function () {
     this.tags && this.tags.remove();
 });

 var w = 300;
 var h = 122;
 x = 0;
 y = 0;
 // Draw horizontal lines
 for (var i = 0; i < lines.axis[1].text.items.length; i++) {
     r.path(['M', x, lines.axis[1].text.items[i].attrs.y, 'H', w + x]).attr({
         stroke: '#ccc'
     }).toBack();
 }
 lines.axis.hide();

 var i = 1;
 $("#graph svg circle").each(function () {
     rect_x = $(this).attr("cx");
     if (i >= 1) {
         r.path(['M', rect_x, 1, 'V', 114]).attr({
             "stroke-dasharray": ".",
             "stroke-width": "2.8",
             "stroke": "#818e8f",
             "stroke-linecap": "round",
             "stroke-linejoin": "round",
             "stroke-miterlimit": "2",
             "stroke-opacity": "0.5"
         }).toBack();
     }
     i++;
 });
});

I have created this linechart graph which has vertical dotted lines crossing the plotted co-ordinates.

This code works fine in mozilla and safari, but not in chrome. Any suggestions?

In addition to this I would like to draw circles having centered text within it, aligned to these vertical lines below the graph. Any idea how can that be achieved?

Thanks for all the help.

Answer 1

Remove "stroke-linecap" and/or "stroke-linejoin".