charts - How change width for series? -


i make chart:

enter image description here

but can't find in kendo ui property bind width 1 of series.

do know how it? or please suggest me other library or static solution.

i have example http://jsfiddle.net/da5ln/290/

    function piechart(percentage, size, color) {         var svgns = "http://www.w3.org/2000/svg";         var chart = document.createelementns(svgns, "svg:svg");         chart.setattribute("width", size);         chart.setattribute("height", size);         chart.setattribute("viewbox", "0 0 " + size + " " + size);         // background circle         var = document.createelementns(svgns, "circle");         back.setattributens(null, "cx", size / 2);         back.setattributens(null, "cy", size / 2);         back.setattributens(null, "r",  size / 2);         var color = "#d0d0d0";         if (size > 50) {              color = "#ebebeb";         }         back.setattributens(null, "fill", color);         chart.appendchild(back);         // primary wedge         var path = document.createelementns(svgns, "path");         var unit = (math.pi *2) / 100;             var startangle = 0;         var endangle = percentage * unit - 0.001;         var x1 = (size / 2) + (size / 2) * math.sin(startangle);         var y1 = (size / 2) - (size / 2) * math.cos(startangle);         var x2 = (size / 2) + (size / 2) * math.sin(endangle);         var y2 = (size / 2) - (size / 2) * math.cos(endangle);         var big = 0;         if (endangle - startangle > math.pi) {             big = 1;         }         var d = "m " + (size / 2) + "," + (size / 2) +  // start @ circle center             " l " + x1 + "," + y1 +     // draw line (x1,y1)             " " + (size / 2) + "," + (size / 2) +       // draw arc of radius r             " 0 " + big + " 1 " +       // arc details...             x2 + "," + y2 +             // arc goes to (x2,y2)             " z";                       // close path (cx,cy)         path.setattribute("d", d); // set path          path.setattribute("fill", '#f05f3b');         chart.appendchild(path); // add wedge chart         // foreground circle         var front = document.createelementns(svgns, "circle");         front.setattribu  tens(null, "cx", (size / 2));     front.setattributens(null, "cy", (size / 2));     front.setattributens(null, "r",  (size * 0.17)); //about 34% big circle      front.setattributens(null, "fill", "#fff");     chart.appendchild(front);     return chart; } var c = document.getelementbyid('container'); c.appendchild( piechart(30, 200 ) ); 

var can = document.getelementbyid('canvas1'); var ctx = can.getcontext('2d');  //ctx.arc(x,y,radius,startangle,endangle, anticlockwise);    ctx.beginpath() ctx.arc(100,100,100,0,math.pi, false); // outer (filled) // tip of "pen @ 0,100 ctx.arc(100,100,80,math.pi,math.pi*2, true); // outer (unfills it) ctx.closepath(); ctx.fill();    ctx.beginpath() ctx.fillstyle = "#c82124"; //red ctx.arc(100,100,110,math.pi,0, false); // outer (filled) // tip of "pen @ 0,100 ctx.arc(100,100,70,math.pi*2,math.pi, true); // outer (unfills it)  ctx.fill();  ctx.closepath(); 

http://jsfiddle.net/hnw6a/1417/


Comments