Check out my latest creation - a donut chart: http://jsfiddle.net/4azpfk3r/217/
I'm trying to customize the appearance of the donut chart. Is there a way to give it a red outline and have the filled score/percentage in solid red, while leaving a transparent/red outlined section for the percentage not scored?
Here is an example of the CSS code I've been using:
.background {
background: grey;
}
.item {
position: relative;
float: left;
}
.item h2 {
text-align:center;
position: absolute;
line-height: 125px;
width: 100%;
}
svg {
transform: rotate(-90deg);
}
.circle_animation {
stroke-dasharray: 440;
stroke-dashoffset: 440;
}
.html .circle_animation {
-webkit-animation: html 1s ease-out forwards;
animation: html 1s ease-out forwards;
}
.css .circle_animation {
-webkit-animation: css 1s ease-out forwards;
animation: css 1s ease-out forwards;
}
@-webkit-keyframes html {
to {
stroke-dashoffset: 80;
}
}
@keyframes html {
to {
stroke-dashoffset: 80;
}
}