I am creating a donut chart with svg, and I would like to have tooltips on hover of the donut rings. I am building the donut like this:
.container {
display: flex;
flex-flow: row wrap;
}
.card {
width: 20em;
height: 20em;
padding: 2em;
background-color: white;
margin: 2em;
box-shadow: 0 0 5px #222;
}
.pie-center {
background: transparent;
border-radius: 50%;
transform: rotate(-90deg);
}
.circle1 {
fill: transparent;
stroke: teal;
stroke-width: 7;
stroke-dasharray: 30 70;
}
.circle2 {
fill: transparent;
stroke: orangered;
stroke-width: 7;
stroke-dasharray: 45 55;
stroke-dashoffset: -30;
}
.circle3 {
fill: transparent;
stroke: orchid;
stroke-width: 7;
stroke-dasharray: 20 80;
stroke-dashoffset: -75;
}
.circle4 {
fill: transparent;
stroke: yellowgreen;
stroke-width: 7;
stroke-dasharray: 5 95;
stroke-dashoffset: -95;
}<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container">
<div class="card">
<svg class="pie-center" viewBox="0 0 32 32">
<circle class="circle1" r="15.915494309" cx="16" cy="16" />
<circle class="circle2" r="15.915494309" cx="16" cy="16" />
<circle class="circle3" r="15.915494309" cx="16" cy="16" />
<circle class="circle4" r="15.915494309" cx="16" cy="16" />
</svg>
</div>
</div>
</body>
</html>I know that I can use the <set /> tag to capture mouse events, and I can use those to create a tooltip. The problem is each section of the donut ring is actually a circle, and the stroke property on the circle is the part I actually want to capture the hover event for.
Therefore, when I try to add hover actions to my circles I don't get desired results.
This is what I have tried (just turning the donut section red on hover to simulate capturing the event for adding a tooltip):
.container {
display: flex;
flex-flow: row wrap;
}
.card {
width: 20em;
height: 20em;
padding: 2em;
background-color: white;
margin: 2em;
box-shadow: 0 0 5px #222;
}
.pie-center {
background: transparent;
border-radius: 50%;
transform: rotate(-90deg);
}
.circle1 {
fill: transparent;
stroke: teal;
stroke-width: 7;
stroke-dasharray: 30 70;
}
.circle2 {
fill: transparent;
stroke: orangered;
stroke-width: 7;
stroke-dasharray: 45 55;
animation: dash3 1s ease 0s 1 forwards;
stroke-dashoffset: -30;
}
.circle3 {
fill: transparent;
stroke: orchid;
stroke-width: 7;
stroke-dasharray: 20 80;
animation: dash2 1s ease 0s 1 forwards;
stroke-dashoffset: -75;
}
.circle4 {
fill: transparent;
stroke: yellowgreen;
stroke-width: 7;
stroke-dasharray: 5 95;
animation: dash 1s ease 0s 1 forwards;
stroke-dashoffset: -95;
}<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container">
<div class="card new">
<svg class="pie-center" viewBox="0 0 32 32">
<circle class="circle1" r="15.915494309" cx="16" cy="16" >
<set attributeName='stroke' from='teal' to='red' begin='mouseover' end='mouseout' />
</circle>
<circle class="circle2" r="15.915494309" cx="16" cy="16" >
<set attributeName='stroke' from='orangered' to='red' begin='mouseover' end='mouseout' />
</circle>
<circle class="circle3" r="15.915494309" cx="16" cy="16" >
<set attributeName='stroke' from='orchid' to='red' begin='mouseover' end='mouseout' />
</circle>
<circle class="circle4" r="15.915494309" cx="16" cy="16" >
<set attributeName='stroke' from='yellowgreen' to='red' begin='mouseover' end='mouseout' />
</circle>
</svg>
</div>
</body>
</html>My question is: Is there any way to capture hover events on the circle strokes? Or is there another way to create a donut chart, using say <path /> or some other svg element that will better support the hover events?
I would like to not use third party libraries if possible (no D3, or chart.js).