Donut Chart connect all arcs - svg

Question

Drawing svg donut chart using circle. I need to connect all arcs, instead gap between them. is it possible?
I set stroke-dasharray="${item.percent} 100" but it doesn't work. also I set pathLength="${100+0*arr.length}" but it doesn't work either. See the code below
var DonutSlice = [{
id: 1,
percent: 60,
color: 'DarkSeaGreen',
label: 'Slice 1'
},
{
id: 2,
percent: 30,
color: 'DarkOrchid',
label: 'Slice 2'
},
{
id: 3,
percent: 10,
color: 'Tomato',
label: 'Slice 3'
}
];
var circlecontainer = document.getElementById('circlecontainer');
var output = document.getElementById('output');
circlecontainer.innerHTML = DonutSlice.map((item, i, arr) => {
let offset = 1 * i + arr.filter((item, j) => j < i)
.reduce((total, item) => total + item.percent, 0);
return `<circle data-id="${item.id}" stroke="${item.color}"
cx="80" cy="80" r="79" class="slice"
pathLength="${100+0*arr.length}"
stroke-dasharray="${item.percent} 100"
stroke-dashoffset="-${offset}" />`;
}).join('');
circlecontainer.addEventListener('mouseover', e => {
let slice = e.target.closest('.slice');
if (slice) {
item = DonutSlice.find(item => item.id == parseInt(slice.dataset.id));
output.innerHTML = `${item.label} was clicked`;
}
});
.slice {
/* stroke-linecap: round; */
stroke-width: 15;
fill: none;
cursor: pointer;
}
p#output {
text-align: center;
}
<div style="width: 200px">
<svg class="svg2" width="174" height="174" preserveAspectRatio="xMinYMin meet"
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 174 174" version="1.1">
<circle fill="#000000" cx="87" cy="87" r="87" />
<g id="circlecontainer" transform="rotate(0 0 0)"></g>
</svg>
<p id="output"></p>
</div>

Answer 1

Instead of using stroke-dashoffset I prefer to use transform rotate. So the offset value needs to be a number of degrees. I added / 100 * 360 to the calculation.
If you use the circlecontainer group to position the chart you can skip the cx and cy attributes on the circle elements.
Update
There was a gap between the slices. I changed the pathLength to 360 so that is matches the rotation. Then I add 1 degree to the length of the slice and rotate the slice 1 degree. Now, the end of each slice will overlap the slice next to it.
var DonutSlice = [{
id: 1,
percent: 60,
color: 'DarkSeaGreen',
label: 'Slice 1'
},
{
id: 2,
percent: 30,
color: 'DarkOrchid',
label: 'Slice 2'
},
{
id: 3,
percent: 10,
color: 'Tomato',
label: 'Slice 3'
}
];
var circlecontainer = document.getElementById('circlecontainer');
var output = document.getElementById('output');
circlecontainer.innerHTML = DonutSlice.map((item, i, arr) => {
let offset = arr.filter((item, j) => j < i)
.reduce((total, item) => total + item.percent, 0) / 100 * 360;
return `<circle data-id="${item.id}" stroke="${item.color}"
r="72" class="slice"
pathLength="360"
stroke-dasharray="${item.percent / 100 * 360 + 1} 360"
transform="rotate(${offset - 1})" />`;
}).join('');
circlecontainer.addEventListener('mouseover', e => {
let slice = e.target.closest('.slice');
if (slice) {
item = DonutSlice.find(item => item.id == parseInt(slice.dataset.id));
output.innerHTML = `${item.label} was clicked`;
}
});
.slice {
/* stroke-linecap: round; */
stroke-width: 16;
fill: none;
cursor: pointer;
}
p#output {
text-align: center;
}
<div style="width: 200px">
<svg class="svg2" preserveAspectRatio="xMinYMin meet"
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 164 164">
<circle fill="#000000" cx="84" cy="84" r="80" />
<g id="circlecontainer" transform="translate(80 80) rotate(-90)"></g>
</svg>
<p id="output"></p>
</div>

Answer 2

Your offset calculation adds a gap.
Change it to (delete the additional 1 * i +):
let offset = arr.filter((item, j) => j < i)
.reduce((total, item) => total + item.percent, 0);
var DonutSlice = [{
id: 1,
percent: 60,
color: 'DarkSeaGreen',
label: 'Slice 1'
},
{
id: 2,
percent: 30,
color: 'DarkOrchid',
label: 'Slice 2'
},
{
id: 3,
percent: 10,
color: 'Tomato',
label: 'Slice 3'
}
];
var circlecontainer = document.getElementById('circlecontainer');
var output = document.getElementById('output');
circlecontainer.innerHTML = DonutSlice.map((item, i, arr) => {
let offset = arr.filter((item, j) => j < i)
.reduce((total, item) => total + item.percent, 0);
return `<circle data-id="${item.id}" stroke="${item.color}"
cx="80" cy="80" r="79" class="slice"
pathLength="${100+0*arr.length}"
stroke-dasharray="${item.percent} 100"
stroke-dashoffset="-${offset}" />`;
}).join('');
circlecontainer.addEventListener('mouseover', e => {
let slice = e.target.closest('.slice');
if (slice) {
item = DonutSlice.find(item => item.id == parseInt(slice.dataset.id));
output.innerHTML = `${item.label} was clicked`;
}
});
.slice {
/* stroke-linecap: round; */
stroke-width: 15;
fill: none;
cursor: pointer;
}
p#output {
text-align: center;
}
<div style="width: 200px">
<svg class="svg2" width="174" height="174" preserveAspectRatio="xMinYMin meet" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 174 174" version="1.1">
<circle fill="#000000" cx="87" cy="87" r="87" />
<g id="circlecontainer" transform="rotate(0 0 0)"></g>
</svg>
<p id="output"></p>
</div>