Chartist.js, SVG circle element is not showing up in the container - svg

Question

I'm using Chartist.js to work on a pie chart.
I am trying to add a simple circle in the background, but for some reason the circle element just ends up in the top left corner with 0x0 dimensions.
Here is the SVG:
<div class="contents" id="chart-container">
<svg xmlns:ct="http://gionkunz.github.com/chartist-js/ct" width="100%" height="100%" class="ct-chart-pie" style="width: 100%; height: 100%;" viewBox="0 0 359 219">
<g class="basecircle">
<cirlce class="basecircleelement" cx="10" cy="10" fill="black" cr="181.76999999999998">
</cirlce>
</g>
<g ct:series-name="value" class="ct-series ct-series-a">
<path d="M147.071,10.108A104.375,104.375,0,1,0,179.325,5L179.325,109.375Z" class="ct-slice-pie" ct:value="95" style="fill: gray; stroke: white; stroke-width: #fff;"></path>
</g>
<g ct:series-name="rest" class="ct-series ct-series-b">
<path d="M179.325,5A104.375,104.375,0,0,0,146.725,10.222L179.325,109.375Z" class="ct-slice-pie" ct:value="5" style="fill: transparent;"></path>
</g>
</svg>
</div>
I expected the "g.basecircle" and "circle.basecircleelement" should be showing up(It's supposed to be in the center of the container but I didn't calculate the cx and cy yet) with radius of 181.76999999999998 -this value is calculated to be half of the clientWidth-, but it ends up in the upper left corner of the SVG element with dimension of 0 x 0
Is there anything I am missing?

Answer 1

this value is calculated to be half of the clientWidth-, but it ends
up in the upper left corner of the SVG element with dimension of 0 x 0
Typos must be fixed:
circle instead ofcirlce
Radius designation -r instead ofcr
Svg canvas borders are bounded by a red square style = "border: 1px solid red;"
It is very convenient to visually see the borders of SVG. When you finish debugging your application, this line can be removed.
To place the black circle in the center of the svg canvas, you need to set the coordinates cx =" 359/2 " cy =" 219/2 "
<div class="contents" id="chart-container">
<svg xmlns:ct="http://gionkunz.github.com/chartist-js/ct" width="100%" height="100%" class="ct-chart-pie" viewBox="0 0 359 219" style="border:1px solid red;">
<g class="basecircle">
<circle class="basecircleelement" cx="179.5" cy="109.5" fill="black" r="179.5">
</circle>
</g>
<g ct:series-name="value" class="ct-series ct-series-a">
<path d="M147.071,10.108A104.375,104.375,0,1,0,179.325,5L179.325,109.375Z" class="ct-slice-pie" ct:value="95" style="fill: gray; stroke: white; stroke-width: #fff;"></path>
</g>
<g ct:series-name="rest" class="ct-series ct-series-b">
<path d="M179.325,5A104.375,104.375,0,0,0,146.725,10.222L179.325,109.375Z" class="ct-slice-pie" ct:value="5" style="fill: transparent;"></path>
</g>
</svg>
</div>
Update
If you want the black circle to not form and completely fit on the canvas svg you need to set its radius equal to half the height of the canvas r= 219 / 2 = 109.5
<div class="contents" id="chart-container">
<svg xmlns:ct="http://gionkunz.github.com/chartist-js/ct" width="100%" height="100%" class="ct-chart-pie" viewBox="0 0 359 219" style="border:1px solid red;">
<g class="basecircle">
<circle class="basecircleelement" cx="179.5" cy="109.5" fill="black" r="109.5">
</circle>
</g>
<g ct:series-name="value" class="ct-series ct-series-a">
<path d="M147.071,10.108A104.375,104.375,0,1,0,179.325,5L179.325,109.375Z" class="ct-slice-pie" ct:value="95" style="fill: gray; stroke: white; stroke-width: #fff;"></path>
</g>
<g ct:series-name="rest" class="ct-series ct-series-b">
<path d="M179.325,5A104.375,104.375,0,0,0,146.725,10.222L179.325,109.375Z" class="ct-slice-pie" ct:value="5" style="fill: transparent;"></path>
</g>
</svg>
</div>