Mixing
Build Circular Percentage chart
I want to build response SVG circular chart, I have succeeded up to some extent.
HTML
<div>
<p class="Project_Analytics_Heading text-center">
Time per Application
</p>
<svg viewBox="0 0 36 36" class="circular-chart">
<path class="that-circle" stroke="#ffba00" stroke-dasharray="50" d="M18 2.0845
a 15.9155 15.9155 0 0 1 0 31.831
a 15.9155 15.9155 0 0 1 0 -31.831" />
<path class="that-circle" stroke="#ff4858" stroke-dasharray="25" d="M18 2.0845
a 15.9155 15.9155 0 0 1 0 31.831
a 15.9155 15.9155 0 0 1 0 -31.831" />
<path class="that-circle" stroke="#845cee" stroke-dasharray="25" d="M18 2.0845
a 15.9155 15.9155 0 0 1 0 31.831
a 15.9155 15.9155 0 0 1 0 -31.831" />
<text x="18" y="20.35" class="percentage">50%</text>
<text x="13" y="25" class="percentage_done">iOS</text>
</svg>
</div>
CSS
.circular-chart {
display: block;
margin: 5% auto;
max-width: 80%;
max-height: 240px;
margin-bottom: 15%;
}
.that-circle {
fill: none;
stroke-width: 2;
stroke-linecap: round;
animation: progress 1s ease-out forwards;
box-shadow: 0 8px 25px 0 #e5e5e5;
}
@keyframes progress {
0% {
stroke-dasharray: 0 100;
}
}
.percentage {
fill: #4285f4;
font-size: 0.375em;
text-anchor: middle;
font-family: AvenirNext;
font-weight: bold;
font-style: normal;
font-stretch: normal;
line-height: 1;
letter-spacing: normal;
}
.percentage_done {
fill: #9b9b9b;
font-size: 0.2em;
font-family: AvenirNext;
font-weight: 500;
font-style: normal;
font-stretch: normal;
line-height: normal;
letter-spacing: 0.1px;
}
Getting Output
Desired Output
I think there is an issue with the stroke-dash array.
Comments are greatly appreciated.
I have referred
https://medium.com/@pppped/how-to-code-a-responsive-circular-percentage-chart-with-svg-and-css-3632f8cd7705
html css html5 css3 svg
edited Oct 4 '18 at 10:36
Rarblack
2,82241025
asked Oct 4 '18 at 10:33
Ratan Uday KumarRatan Uday Kumar
1,05721432
add a comment |
I want to build response SVG circular chart, I have succeeded up to some extent.
HTML
<div>
<p class="Project_Analytics_Heading text-center">
Time per Application
</p>
<svg viewBox="0 0 36 36" class="circular-chart">
<path class="that-circle" stroke="#ffba00" stroke-dasharray="50" d="M18 2.0845
a 15.9155 15.9155 0 0 1 0 31.831
a 15.9155 15.9155 0 0 1 0 -31.831" />
<path class="that-circle" stroke="#ff4858" stroke-dasharray="25" d="M18 2.0845
a 15.9155 15.9155 0 0 1 0 31.831
a 15.9155 15.9155 0 0 1 0 -31.831" />
<path class="that-circle" stroke="#845cee" stroke-dasharray="25" d="M18 2.0845
a 15.9155 15.9155 0 0 1 0 31.831
a 15.9155 15.9155 0 0 1 0 -31.831" />
<text x="18" y="20.35" class="percentage">50%</text>
<text x="13" y="25" class="percentage_done">iOS</text>
</svg>
</div>
CSS
.circular-chart {
display: block;
margin: 5% auto;
max-width: 80%;
max-height: 240px;
margin-bottom: 15%;
}
.that-circle {
fill: none;
stroke-width: 2;
stroke-linecap: round;
animation: progress 1s ease-out forwards;
box-shadow: 0 8px 25px 0 #e5e5e5;
}
@keyframes progress {
0% {
stroke-dasharray: 0 100;
}
}
.percentage {
fill: #4285f4;
font-size: 0.375em;
text-anchor: middle;
font-family: AvenirNext;
font-weight: bold;
font-style: normal;
font-stretch: normal;
line-height: 1;
letter-spacing: normal;
}
.percentage_done {
fill: #9b9b9b;
font-size: 0.2em;
font-family: AvenirNext;
font-weight: 500;
font-style: normal;
font-stretch: normal;
line-height: normal;
letter-spacing: 0.1px;
}
Getting Output
Desired Output
I think there is an issue with the stroke-dash array.
Comments are greatly appreciated.
I have referred
https://medium.com/@pppped/how-to-code-a-responsive-circular-percentage-chart-with-svg-and-css-3632f8cd7705
html css html5 css3 svg
edited Oct 4 '18 at 10:36
Rarblack
2,82241025
asked Oct 4 '18 at 10:33
Ratan Uday KumarRatan Uday Kumar
1,05721432
add a comment |
I want to build response SVG circular chart, I have succeeded up to some extent.
HTML
<div>
<p class="Project_Analytics_Heading text-center">
Time per Application
</p>
<svg viewBox="0 0 36 36" class="circular-chart">
<path class="that-circle" stroke="#ffba00" stroke-dasharray="50" d="M18 2.0845
a 15.9155 15.9155 0 0 1 0 31.831
a 15.9155 15.9155 0 0 1 0 -31.831" />
<path class="that-circle" stroke="#ff4858" stroke-dasharray="25" d="M18 2.0845
a 15.9155 15.9155 0 0 1 0 31.831
a 15.9155 15.9155 0 0 1 0 -31.831" />
<path class="that-circle" stroke="#845cee" stroke-dasharray="25" d="M18 2.0845
a 15.9155 15.9155 0 0 1 0 31.831
a 15.9155 15.9155 0 0 1 0 -31.831" />
<text x="18" y="20.35" class="percentage">50%</text>
<text x="13" y="25" class="percentage_done">iOS</text>
</svg>
</div>
CSS
.circular-chart {
display: block;
margin: 5% auto;
max-width: 80%;
max-height: 240px;
margin-bottom: 15%;
}
.that-circle {
fill: none;
stroke-width: 2;
stroke-linecap: round;
animation: progress 1s ease-out forwards;
box-shadow: 0 8px 25px 0 #e5e5e5;
}
@keyframes progress {
0% {
stroke-dasharray: 0 100;
}
}
.percentage {
fill: #4285f4;
font-size: 0.375em;
text-anchor: middle;
font-family: AvenirNext;
font-weight: bold;
font-style: normal;
font-stretch: normal;
line-height: 1;
letter-spacing: normal;
}
.percentage_done {
fill: #9b9b9b;
font-size: 0.2em;
font-family: AvenirNext;
font-weight: 500;
font-style: normal;
font-stretch: normal;
line-height: normal;
letter-spacing: 0.1px;
}
Getting Output
Desired Output
I think there is an issue with the stroke-dash array.
Comments are greatly appreciated.
I have referred
https://medium.com/@pppped/how-to-code-a-responsive-circular-percentage-chart-with-svg-and-css-3632f8cd7705
html css html5 css3 svg
edited Oct 4 '18 at 10:36
Rarblack
2,82241025
asked Oct 4 '18 at 10:33
Ratan Uday KumarRatan Uday Kumar
1,05721432
I want to build response SVG circular chart, I have succeeded up to some extent.
HTML
<div>
<p class="Project_Analytics_Heading text-center">
Time per Application
</p>
<svg viewBox="0 0 36 36" class="circular-chart">
<path class="that-circle" stroke="#ffba00" stroke-dasharray="50" d="M18 2.0845
a 15.9155 15.9155 0 0 1 0 31.831
a 15.9155 15.9155 0 0 1 0 -31.831" />
<path class="that-circle" stroke="#ff4858" stroke-dasharray="25" d="M18 2.0845
a 15.9155 15.9155 0 0 1 0 31.831
a 15.9155 15.9155 0 0 1 0 -31.831" />
<path class="that-circle" stroke="#845cee" stroke-dasharray="25" d="M18 2.0845
a 15.9155 15.9155 0 0 1 0 31.831
a 15.9155 15.9155 0 0 1 0 -31.831" />
<text x="18" y="20.35" class="percentage">50%</text>
<text x="13" y="25" class="percentage_done">iOS</text>
</svg>
</div>
CSS
.circular-chart {
display: block;
margin: 5% auto;
max-width: 80%;
max-height: 240px;
margin-bottom: 15%;
}
.that-circle {
fill: none;
stroke-width: 2;
stroke-linecap: round;
animation: progress 1s ease-out forwards;
box-shadow: 0 8px 25px 0 #e5e5e5;
}
@keyframes progress {
0% {
stroke-dasharray: 0 100;
}
}
.percentage {
fill: #4285f4;
font-size: 0.375em;
text-anchor: middle;
font-family: AvenirNext;
font-weight: bold;
font-style: normal;
font-stretch: normal;
line-height: 1;
letter-spacing: normal;
}
.percentage_done {
fill: #9b9b9b;
font-size: 0.2em;
font-family: AvenirNext;
font-weight: 500;
font-style: normal;
font-stretch: normal;
line-height: normal;
letter-spacing: 0.1px;
}
Getting Output
Desired Output
I think there is an issue with the stroke-dash array.
Comments are greatly appreciated.
I have referred
https://medium.com/@pppped/how-to-code-a-responsive-circular-percentage-chart-with-svg-and-css-3632f8cd7705
html css html5 css3 svg
html css html5 css3 svg
edited Oct 4 '18 at 10:36
Rarblack
2,82241025
asked Oct 4 '18 at 10:33
Ratan Uday KumarRatan Uday Kumar
1,05721432
edited Oct 4 '18 at 10:36
Rarblack
2,82241025
asked Oct 4 '18 at 10:33
Ratan Uday KumarRatan Uday Kumar
1,05721432
edited Oct 4 '18 at 10:36
Rarblack
2,82241025
edited Oct 4 '18 at 10:36
Rarblack
2,82241025
edited Oct 4 '18 at 10:36
Rarblack
2,82241025
2,82241025
asked Oct 4 '18 at 10:33
Ratan Uday KumarRatan Uday Kumar
1,05721432
asked Oct 4 '18 at 10:33
Ratan Uday KumarRatan Uday Kumar
1,05721432
asked Oct 4 '18 at 10:33
Ratan Uday KumarRatan Uday Kumar
1,05721432
1,05721432
add a comment |
add a comment |
3 Answers
3
active
oldest
votes
Try using Charty which creates charts without single line of code in seconds.
As per your requirement, try this link, https://charty.live/charts?chtype=doughnutpie&chl=mon,tue,sdf,lkjls,23,LKS&chd=10,9,98,76,23,23,45,65,09,89,78.3&acid=1234&token=5e5ed276f04b0cb0d713a5213f185e1105c83bdd9026076e81e313bb6d94c279
answered Oct 4 '18 at 10:37
BHASKARBHASKAR
428
no we can't use custom charts, we have to use desired chart given by designer
– Ratan Uday Kumar
Oct 4 '18 at 10:38
add a comment |
This is how I would do it: I would animate the stroke-dashoffset from 50 to 0.
In your code I've changed the stroke-dasharray. In this case the first value is the length of the stroke and the second value is the length of the gap. The gap has to be big enough in order for the stroke to apear only once. In the code I use 100, the value of the perimeter.
Your first path goes last because I want it above the other 2 paths. For this path I'm using stroke-dasharray="50,100" The length of the stroke is 50 and the gap is 100.
For your first path I'm using stroke-dasharray="70,100" Why 75? 50+25 = 75. The first 50 units are under the next path. Only 25 units will remain visible.
Your last path goes first, and the stroke-dasharray="100,100". 75 units of this path are now underneath the previous paths.
I hope this is what you need.
svg{border:1px solid}
.circular-chart {
display: block;
margin: 5% auto;
max-width: 80%;
max-height: 240px;
margin-bottom: 15%;
}
.that-circle {
fill: none;
stroke-width: 2;
stroke-linecap: round;
stroke-dashoffset:50;
animation: progress 1s ease-out forwards;
box-shadow: 0 8px 25px 0 #e5e5e5;
}
@keyframes progress {
100% {
stroke-dashoffset: 0;
}
}
.percentage {
fill: #4285f4;
font-size: 0.375em;
text-anchor: middle;
font-family: AvenirNext;
font-weight: bold;
font-style: normal;
font-stretch: normal;
line-height: 1;
letter-spacing: normal;
}
.percentage_done {
fill: #9b9b9b;
font-size: 0.2em;
font-family: AvenirNext;
font-weight: 500;
font-style: normal;
font-stretch: normal;
line-height: normal;
letter-spacing: 0.1px;
}<div>
<svg viewBox="0 0 36 36" width="150" class="circular-chart">
<path class="that-circle" stroke="#845cee" stroke-dasharray="100,100" d="M18 2.0845
a 15.9155 15.9155 0 0 1 0 31.831
a 15.9155 15.9155 0 0 1 0 -31.831" />
<path class="that-circle" stroke="#ff4858" stroke-dasharray="75,100" d="M18 2.0845
a 15.9155 15.9155 0 0 1 0 31.831
a 15.9155 15.9155 0 0 1 0 -31.831" />
<path class="that-circle" stroke="#ffba00" stroke-dasharray="50,100" d="M18 2.0845
a 15.9155 15.9155 0 0 1 0 31.831
a 15.9155 15.9155 0 0 1 0 -31.831" />
<text x="18" y="20.35" class="percentage">50%</text>
<text x="13" y="25" class="percentage_done">iOS</text>
</svg>
</div>answered Oct 4 '18 at 13:57
enxanetaenxaneta
7,6842518
In current graph only 3 elements percentages are there. If suppose there are 10 elements percentages are there then how to draw the above graph. All are dynamic from api
– Ratan Uday Kumar
Oct 5 '18 at 3:56
In this case you will need to create an object with the data, But this is another question, If you liked my answer please accept it and ask another question, I'll be glad to help,
– enxaneta
Oct 5 '18 at 5:44
You just created chart without any logical values
– Ratan Uday Kumar
Oct 5 '18 at 6:11
I have found a working way will update my answer after some time
– Ratan Uday Kumar
Oct 5 '18 at 6:12
add a comment |
I have found a way with my own logical tries
.circular-chart {
display: block;
margin: 5% auto;
max-width: 80%;
max-height: 240px;
margin-bottom: 15%;
}
.that-circle {
fill: none;
stroke-width: 2;
stroke-linecap: round;
animation: progress 1s ease-out forwards;
box-shadow: 0 8px 25px 0 #e5e5e5;
}
@keyframes progress {
0% {
stroke-dasharray: 0 100;
}
}
.percentage {
fill: #4285f4;
font-size: 0.375em;
text-anchor: middle;
font-family: AvenirNext;
font-weight: bold;
font-style: normal;
font-stretch: normal;
line-height: 1;
letter-spacing: normal;
}
.percentage_done {
fill: #9b9b9b;
font-size: 0.2em;
font-family: AvenirNext;
font-weight: 500;
font-style: normal;
font-stretch: normal;
line-height: normal;
letter-spacing: 0.1px;
}<div>
<p class="Project_Analytics_Heading text-center">
Time per Application
</p>
<svg viewBox="0 0 36 36" class="circular-chart">
<path class="that-circle" stroke="#ffba00" stroke-dasharray="100 50" d="M18 2.0845
a 15.9155 15.9155 0 0 1 0 31.831
a 15.9155 15.9155 0 0 1 0 -31.831" />
<path class="that-circle" stroke="#ff4858" stroke-dasharray="50 75" d="M18 2.0845
a 15.9155 15.9155 0 0 1 0 31.831
a 15.9155 15.9155 0 0 1 0 -31.831" />
<path class="that-circle" stroke="#845cee" stroke-dasharray="25 100" d="M18 2.0845
a 15.9155 15.9155 0 0 1 0 31.831
a 15.9155 15.9155 0 0 1 0 -31.831" />
<text x="18" y="20.35" class="percentage">50%</text>
<text x="13" y="25" class="percentage_done">iOS</text>
</svg>
</div>** Example 1:===> If i have 3 elements 50, 25, 25 we have to write functionality such that from last element**
3rd element
we have to set stroke-dasharray 25 100
---> where 25 is the value out of 100 at first attempt
2nd element
we have to set stroke-dasharray 50 75
--> first value is 50 because (2nd element + 3rd element) ==> 25 + 25 ==> 50
--> second value is 75 because (100 - 3rd element value) ==> 100-25 ==> 75
1st element
we have to set stroke-dasharray 100 50
--> first value is 100 because (1st element + 2nd element + 3rd element) ==> 50 + 25 + 25 ==> 100
--> second value is 50 because (100 - (2nd element + 3rd element value)) ==> 100-(25 + 25) ==> 50
** Example 2:===> If i have 4 elements 30, 20, 40, 10 we have to write functionality such that from last element**
4th element
we have to set stroke-dasharray 10 100
---> where 10 is the value out of 100 at first attempt
3rd element
we have to set stroke-dasharray 50 90
---> first value is 50 because (3rd element + 4th element) ==> 40 + 10 ==> 50
--> second value is 90 because (100 - 3rd element value) ==> 100-10 ==> 90
2nd element
we have to set stroke-dasharray 70 50
--> first value is 70 because (2nd element + 3rd element + 4th element) ==> 20 + 40 + 10 ==> 70
--> second value is 50 because (100 - (3rd element value + 4th element)) ==> 100 - (40+10) ==> 50
1st element
we have to set stroke-dasharray 100 30
--> first value is 100 because (1st element + 2nd element + 3rd element + 4th element) ==> 30+ 20 + 40 + 10 ==> 100
--> second value is 30 because (100 - (2nd element + 3rd element + 4th element value)) ==> 100-(20 + 40 + 10) ==> 30
hope you understand the logic
answered Nov 21 '18 at 10:58
Ratan Uday KumarRatan Uday Kumar
1,05721432
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f52644567%2fbuild-circular-percentage-chart%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
3 Answers
3
active
oldest
votes
3 Answers
3
active
oldest
votes
active
oldest
votes
active
oldest
votes
Try using Charty which creates charts without single line of code in seconds.
As per your requirement, try this link, https://charty.live/charts?chtype=doughnutpie&chl=mon,tue,sdf,lkjls,23,LKS&chd=10,9,98,76,23,23,45,65,09,89,78.3&acid=1234&token=5e5ed276f04b0cb0d713a5213f185e1105c83bdd9026076e81e313bb6d94c279
answered Oct 4 '18 at 10:37
BHASKARBHASKAR
428
no we can't use custom charts, we have to use desired chart given by designer
– Ratan Uday Kumar
Oct 4 '18 at 10:38
add a comment |
Try using Charty which creates charts without single line of code in seconds.
As per your requirement, try this link, https://charty.live/charts?chtype=doughnutpie&chl=mon,tue,sdf,lkjls,23,LKS&chd=10,9,98,76,23,23,45,65,09,89,78.3&acid=1234&token=5e5ed276f04b0cb0d713a5213f185e1105c83bdd9026076e81e313bb6d94c279
answered Oct 4 '18 at 10:37
BHASKARBHASKAR
428
no we can't use custom charts, we have to use desired chart given by designer
– Ratan Uday Kumar
Oct 4 '18 at 10:38
add a comment |
Try using Charty which creates charts without single line of code in seconds.
As per your requirement, try this link, https://charty.live/charts?chtype=doughnutpie&chl=mon,tue,sdf,lkjls,23,LKS&chd=10,9,98,76,23,23,45,65,09,89,78.3&acid=1234&token=5e5ed276f04b0cb0d713a5213f185e1105c83bdd9026076e81e313bb6d94c279
answered Oct 4 '18 at 10:37
BHASKARBHASKAR
428
Try using Charty which creates charts without single line of code in seconds.
As per your requirement, try this link, https://charty.live/charts?chtype=doughnutpie&chl=mon,tue,sdf,lkjls,23,LKS&chd=10,9,98,76,23,23,45,65,09,89,78.3&acid=1234&token=5e5ed276f04b0cb0d713a5213f185e1105c83bdd9026076e81e313bb6d94c279
answered Oct 4 '18 at 10:37
BHASKARBHASKAR
428
answered Oct 4 '18 at 10:37
BHASKARBHASKAR
428
answered Oct 4 '18 at 10:37
BHASKARBHASKAR
428
answered Oct 4 '18 at 10:37
BHASKARBHASKAR
428
428
no we can't use custom charts, we have to use desired chart given by designer
– Ratan Uday Kumar
Oct 4 '18 at 10:38
add a comment |
no we can't use custom charts, we have to use desired chart given by designer
– Ratan Uday Kumar
Oct 4 '18 at 10:38
no we can't use custom charts, we have to use desired chart given by designer
– Ratan Uday Kumar
Oct 4 '18 at 10:38
no we can't use custom charts, we have to use desired chart given by designer
– Ratan Uday Kumar
Oct 4 '18 at 10:38
add a comment |
This is how I would do it: I would animate the stroke-dashoffset from 50 to 0.
In your code I've changed the stroke-dasharray. In this case the first value is the length of the stroke and the second value is the length of the gap. The gap has to be big enough in order for the stroke to apear only once. In the code I use 100, the value of the perimeter.
Your first path goes last because I want it above the other 2 paths. For this path I'm using stroke-dasharray="50,100" The length of the stroke is 50 and the gap is 100.
For your first path I'm using stroke-dasharray="70,100" Why 75? 50+25 = 75. The first 50 units are under the next path. Only 25 units will remain visible.
Your last path goes first, and the stroke-dasharray="100,100". 75 units of this path are now underneath the previous paths.
I hope this is what you need.
svg{border:1px solid}
.circular-chart {
display: block;
margin: 5% auto;
max-width: 80%;
max-height: 240px;
margin-bottom: 15%;
}
.that-circle {
fill: none;
stroke-width: 2;
stroke-linecap: round;
stroke-dashoffset:50;
animation: progress 1s ease-out forwards;
box-shadow: 0 8px 25px 0 #e5e5e5;
}
@keyframes progress {
100% {
stroke-dashoffset: 0;
}
}
.percentage {
fill: #4285f4;
font-size: 0.375em;
text-anchor: middle;
font-family: AvenirNext;
font-weight: bold;
font-style: normal;
font-stretch: normal;
line-height: 1;
letter-spacing: normal;
}
.percentage_done {
fill: #9b9b9b;
font-size: 0.2em;
font-family: AvenirNext;
font-weight: 500;
font-style: normal;
font-stretch: normal;
line-height: normal;
letter-spacing: 0.1px;
}<div>
<svg viewBox="0 0 36 36" width="150" class="circular-chart">
<path class="that-circle" stroke="#845cee" stroke-dasharray="100,100" d="M18 2.0845
a 15.9155 15.9155 0 0 1 0 31.831
a 15.9155 15.9155 0 0 1 0 -31.831" />
<path class="that-circle" stroke="#ff4858" stroke-dasharray="75,100" d="M18 2.0845
a 15.9155 15.9155 0 0 1 0 31.831
a 15.9155 15.9155 0 0 1 0 -31.831" />
<path class="that-circle" stroke="#ffba00" stroke-dasharray="50,100" d="M18 2.0845
a 15.9155 15.9155 0 0 1 0 31.831
a 15.9155 15.9155 0 0 1 0 -31.831" />
<text x="18" y="20.35" class="percentage">50%</text>
<text x="13" y="25" class="percentage_done">iOS</text>
</svg>
</div>answered Oct 4 '18 at 13:57
enxanetaenxaneta
7,6842518
In current graph only 3 elements percentages are there. If suppose there are 10 elements percentages are there then how to draw the above graph. All are dynamic from api
– Ratan Uday Kumar
Oct 5 '18 at 3:56
In this case you will need to create an object with the data, But this is another question, If you liked my answer please accept it and ask another question, I'll be glad to help,
– enxaneta
Oct 5 '18 at 5:44
You just created chart without any logical values
– Ratan Uday Kumar
Oct 5 '18 at 6:11
I have found a working way will update my answer after some time
– Ratan Uday Kumar
Oct 5 '18 at 6:12
add a comment |
This is how I would do it: I would animate the stroke-dashoffset from 50 to 0.
In your code I've changed the stroke-dasharray. In this case the first value is the length of the stroke and the second value is the length of the gap. The gap has to be big enough in order for the stroke to apear only once. In the code I use 100, the value of the perimeter.
Your first path goes last because I want it above the other 2 paths. For this path I'm using stroke-dasharray="50,100" The length of the stroke is 50 and the gap is 100.
For your first path I'm using stroke-dasharray="70,100" Why 75? 50+25 = 75. The first 50 units are under the next path. Only 25 units will remain visible.
Your last path goes first, and the stroke-dasharray="100,100". 75 units of this path are now underneath the previous paths.
I hope this is what you need.
svg{border:1px solid}
.circular-chart {
display: block;
margin: 5% auto;
max-width: 80%;
max-height: 240px;
margin-bottom: 15%;
}
.that-circle {
fill: none;
stroke-width: 2;
stroke-linecap: round;
stroke-dashoffset:50;
animation: progress 1s ease-out forwards;
box-shadow: 0 8px 25px 0 #e5e5e5;
}
@keyframes progress {
100% {
stroke-dashoffset: 0;
}
}
.percentage {
fill: #4285f4;
font-size: 0.375em;
text-anchor: middle;
font-family: AvenirNext;
font-weight: bold;
font-style: normal;
font-stretch: normal;
line-height: 1;
letter-spacing: normal;
}
.percentage_done {
fill: #9b9b9b;
font-size: 0.2em;
font-family: AvenirNext;
font-weight: 500;
font-style: normal;
font-stretch: normal;
line-height: normal;
letter-spacing: 0.1px;
}<div>
<svg viewBox="0 0 36 36" width="150" class="circular-chart">
<path class="that-circle" stroke="#845cee" stroke-dasharray="100,100" d="M18 2.0845
a 15.9155 15.9155 0 0 1 0 31.831
a 15.9155 15.9155 0 0 1 0 -31.831" />
<path class="that-circle" stroke="#ff4858" stroke-dasharray="75,100" d="M18 2.0845
a 15.9155 15.9155 0 0 1 0 31.831
a 15.9155 15.9155 0 0 1 0 -31.831" />
<path class="that-circle" stroke="#ffba00" stroke-dasharray="50,100" d="M18 2.0845
a 15.9155 15.9155 0 0 1 0 31.831
a 15.9155 15.9155 0 0 1 0 -31.831" />
<text x="18" y="20.35" class="percentage">50%</text>
<text x="13" y="25" class="percentage_done">iOS</text>
</svg>
</div>answered Oct 4 '18 at 13:57
enxanetaenxaneta
7,6842518
In current graph only 3 elements percentages are there. If suppose there are 10 elements percentages are there then how to draw the above graph. All are dynamic from api
– Ratan Uday Kumar
Oct 5 '18 at 3:56
In this case you will need to create an object with the data, But this is another question, If you liked my answer please accept it and ask another question, I'll be glad to help,
– enxaneta
Oct 5 '18 at 5:44
You just created chart without any logical values
– Ratan Uday Kumar
Oct 5 '18 at 6:11
I have found a working way will update my answer after some time
– Ratan Uday Kumar
Oct 5 '18 at 6:12
add a comment |
This is how I would do it: I would animate the stroke-dashoffset from 50 to 0.
In your code I've changed the stroke-dasharray. In this case the first value is the length of the stroke and the second value is the length of the gap. The gap has to be big enough in order for the stroke to apear only once. In the code I use 100, the value of the perimeter.
Your first path goes last because I want it above the other 2 paths. For this path I'm using stroke-dasharray="50,100" The length of the stroke is 50 and the gap is 100.
For your first path I'm using stroke-dasharray="70,100" Why 75? 50+25 = 75. The first 50 units are under the next path. Only 25 units will remain visible.
Your last path goes first, and the stroke-dasharray="100,100". 75 units of this path are now underneath the previous paths.
I hope this is what you need.
svg{border:1px solid}
.circular-chart {
display: block;
margin: 5% auto;
max-width: 80%;
max-height: 240px;
margin-bottom: 15%;
}
.that-circle {
fill: none;
stroke-width: 2;
stroke-linecap: round;
stroke-dashoffset:50;
animation: progress 1s ease-out forwards;
box-shadow: 0 8px 25px 0 #e5e5e5;
}
@keyframes progress {
100% {
stroke-dashoffset: 0;
}
}
.percentage {
fill: #4285f4;
font-size: 0.375em;
text-anchor: middle;
font-family: AvenirNext;
font-weight: bold;
font-style: normal;
font-stretch: normal;
line-height: 1;
letter-spacing: normal;
}
.percentage_done {
fill: #9b9b9b;
font-size: 0.2em;
font-family: AvenirNext;
font-weight: 500;
font-style: normal;
font-stretch: normal;
line-height: normal;
letter-spacing: 0.1px;
}<div>
<svg viewBox="0 0 36 36" width="150" class="circular-chart">
<path class="that-circle" stroke="#845cee" stroke-dasharray="100,100" d="M18 2.0845
a 15.9155 15.9155 0 0 1 0 31.831
a 15.9155 15.9155 0 0 1 0 -31.831" />
<path class="that-circle" stroke="#ff4858" stroke-dasharray="75,100" d="M18 2.0845
a 15.9155 15.9155 0 0 1 0 31.831
a 15.9155 15.9155 0 0 1 0 -31.831" />
<path class="that-circle" stroke="#ffba00" stroke-dasharray="50,100" d="M18 2.0845
a 15.9155 15.9155 0 0 1 0 31.831
a 15.9155 15.9155 0 0 1 0 -31.831" />
<text x="18" y="20.35" class="percentage">50%</text>
<text x="13" y="25" class="percentage_done">iOS</text>
</svg>
</div>answered Oct 4 '18 at 13:57
enxanetaenxaneta
7,6842518
This is how I would do it: I would animate the stroke-dashoffset from 50 to 0.
In your code I've changed the stroke-dasharray. In this case the first value is the length of the stroke and the second value is the length of the gap. The gap has to be big enough in order for the stroke to apear only once. In the code I use 100, the value of the perimeter.
Your first path goes last because I want it above the other 2 paths. For this path I'm using stroke-dasharray="50,100" The length of the stroke is 50 and the gap is 100.
For your first path I'm using stroke-dasharray="70,100" Why 75? 50+25 = 75. The first 50 units are under the next path. Only 25 units will remain visible.
Your last path goes first, and the stroke-dasharray="100,100". 75 units of this path are now underneath the previous paths.
I hope this is what you need.
svg{border:1px solid}
.circular-chart {
display: block;
margin: 5% auto;
max-width: 80%;
max-height: 240px;
margin-bottom: 15%;
}
.that-circle {
fill: none;
stroke-width: 2;
stroke-linecap: round;
stroke-dashoffset:50;
animation: progress 1s ease-out forwards;
box-shadow: 0 8px 25px 0 #e5e5e5;
}
@keyframes progress {
100% {
stroke-dashoffset: 0;
}
}
.percentage {
fill: #4285f4;
font-size: 0.375em;
text-anchor: middle;
font-family: AvenirNext;
font-weight: bold;
font-style: normal;
font-stretch: normal;
line-height: 1;
letter-spacing: normal;
}
.percentage_done {
fill: #9b9b9b;
font-size: 0.2em;
font-family: AvenirNext;
font-weight: 500;
font-style: normal;
font-stretch: normal;
line-height: normal;
letter-spacing: 0.1px;
}<div>
<svg viewBox="0 0 36 36" width="150" class="circular-chart">
<path class="that-circle" stroke="#845cee" stroke-dasharray="100,100" d="M18 2.0845
a 15.9155 15.9155 0 0 1 0 31.831
a 15.9155 15.9155 0 0 1 0 -31.831" />
<path class="that-circle" stroke="#ff4858" stroke-dasharray="75,100" d="M18 2.0845
a 15.9155 15.9155 0 0 1 0 31.831
a 15.9155 15.9155 0 0 1 0 -31.831" />
<path class="that-circle" stroke="#ffba00" stroke-dasharray="50,100" d="M18 2.0845
a 15.9155 15.9155 0 0 1 0 31.831
a 15.9155 15.9155 0 0 1 0 -31.831" />
<text x="18" y="20.35" class="percentage">50%</text>
<text x="13" y="25" class="percentage_done">iOS</text>
</svg>
</div>svg{border:1px solid}
.circular-chart {
display: block;
margin: 5% auto;
max-width: 80%;
max-height: 240px;
margin-bottom: 15%;
}
.that-circle {
fill: none;
stroke-width: 2;
stroke-linecap: round;
stroke-dashoffset:50;
animation: progress 1s ease-out forwards;
box-shadow: 0 8px 25px 0 #e5e5e5;
}
@keyframes progress {
100% {
stroke-dashoffset: 0;
}
}
.percentage {
fill: #4285f4;
font-size: 0.375em;
text-anchor: middle;
font-family: AvenirNext;
font-weight: bold;
font-style: normal;
font-stretch: normal;
line-height: 1;
letter-spacing: normal;
}
.percentage_done {
fill: #9b9b9b;
font-size: 0.2em;
font-family: AvenirNext;
font-weight: 500;
font-style: normal;
font-stretch: normal;
line-height: normal;
letter-spacing: 0.1px;
}<div>
<svg viewBox="0 0 36 36" width="150" class="circular-chart">
<path class="that-circle" stroke="#845cee" stroke-dasharray="100,100" d="M18 2.0845
a 15.9155 15.9155 0 0 1 0 31.831
a 15.9155 15.9155 0 0 1 0 -31.831" />
<path class="that-circle" stroke="#ff4858" stroke-dasharray="75,100" d="M18 2.0845
a 15.9155 15.9155 0 0 1 0 31.831
a 15.9155 15.9155 0 0 1 0 -31.831" />
<path class="that-circle" stroke="#ffba00" stroke-dasharray="50,100" d="M18 2.0845
a 15.9155 15.9155 0 0 1 0 31.831
a 15.9155 15.9155 0 0 1 0 -31.831" />
<text x="18" y="20.35" class="percentage">50%</text>
<text x="13" y="25" class="percentage_done">iOS</text>
</svg>
</div>svg{border:1px solid}
.circular-chart {
display: block;
margin: 5% auto;
max-width: 80%;
max-height: 240px;
margin-bottom: 15%;
}
.that-circle {
fill: none;
stroke-width: 2;
stroke-linecap: round;
stroke-dashoffset:50;
animation: progress 1s ease-out forwards;
box-shadow: 0 8px 25px 0 #e5e5e5;
}
@keyframes progress {
100% {
stroke-dashoffset: 0;
}
}
.percentage {
fill: #4285f4;
font-size: 0.375em;
text-anchor: middle;
font-family: AvenirNext;
font-weight: bold;
font-style: normal;
font-stretch: normal;
line-height: 1;
letter-spacing: normal;
}
.percentage_done {
fill: #9b9b9b;
font-size: 0.2em;
font-family: AvenirNext;
font-weight: 500;
font-style: normal;
font-stretch: normal;
line-height: normal;
letter-spacing: 0.1px;
}<div>
<svg viewBox="0 0 36 36" width="150" class="circular-chart">
<path class="that-circle" stroke="#845cee" stroke-dasharray="100,100" d="M18 2.0845
a 15.9155 15.9155 0 0 1 0 31.831
a 15.9155 15.9155 0 0 1 0 -31.831" />
<path class="that-circle" stroke="#ff4858" stroke-dasharray="75,100" d="M18 2.0845
a 15.9155 15.9155 0 0 1 0 31.831
a 15.9155 15.9155 0 0 1 0 -31.831" />
<path class="that-circle" stroke="#ffba00" stroke-dasharray="50,100" d="M18 2.0845
a 15.9155 15.9155 0 0 1 0 31.831
a 15.9155 15.9155 0 0 1 0 -31.831" />
<text x="18" y="20.35" class="percentage">50%</text>
<text x="13" y="25" class="percentage_done">iOS</text>
</svg>
</div>answered Oct 4 '18 at 13:57
enxanetaenxaneta
7,6842518
answered Oct 4 '18 at 13:57
enxanetaenxaneta
7,6842518
answered Oct 4 '18 at 13:57
enxanetaenxaneta
7,6842518
answered Oct 4 '18 at 13:57
enxanetaenxaneta
7,6842518
7,6842518
In current graph only 3 elements percentages are there. If suppose there are 10 elements percentages are there then how to draw the above graph. All are dynamic from api
– Ratan Uday Kumar
Oct 5 '18 at 3:56
In this case you will need to create an object with the data, But this is another question, If you liked my answer please accept it and ask another question, I'll be glad to help,
– enxaneta
Oct 5 '18 at 5:44
You just created chart without any logical values
– Ratan Uday Kumar
Oct 5 '18 at 6:11
I have found a working way will update my answer after some time
– Ratan Uday Kumar
Oct 5 '18 at 6:12
add a comment |
In current graph only 3 elements percentages are there. If suppose there are 10 elements percentages are there then how to draw the above graph. All are dynamic from api
– Ratan Uday Kumar
Oct 5 '18 at 3:56
In this case you will need to create an object with the data, But this is another question, If you liked my answer please accept it and ask another question, I'll be glad to help,
– enxaneta
Oct 5 '18 at 5:44
You just created chart without any logical values
– Ratan Uday Kumar
Oct 5 '18 at 6:11
I have found a working way will update my answer after some time
– Ratan Uday Kumar
Oct 5 '18 at 6:12
In current graph only 3 elements percentages are there. If suppose there are 10 elements percentages are there then how to draw the above graph. All are dynamic from api
– Ratan Uday Kumar
Oct 5 '18 at 3:56
In current graph only 3 elements percentages are there. If suppose there are 10 elements percentages are there then how to draw the above graph. All are dynamic from api
– Ratan Uday Kumar
Oct 5 '18 at 3:56
In this case you will need to create an object with the data, But this is another question, If you liked my answer please accept it and ask another question, I'll be glad to help,
– enxaneta
Oct 5 '18 at 5:44
In this case you will need to create an object with the data, But this is another question, If you liked my answer please accept it and ask another question, I'll be glad to help,
– enxaneta
Oct 5 '18 at 5:44
You just created chart without any logical values
– Ratan Uday Kumar
Oct 5 '18 at 6:11
You just created chart without any logical values
– Ratan Uday Kumar
Oct 5 '18 at 6:11
I have found a working way will update my answer after some time
– Ratan Uday Kumar
Oct 5 '18 at 6:12
I have found a working way will update my answer after some time
– Ratan Uday Kumar
Oct 5 '18 at 6:12
add a comment |
I have found a way with my own logical tries
.circular-chart {
display: block;
margin: 5% auto;
max-width: 80%;
max-height: 240px;
margin-bottom: 15%;
}
.that-circle {
fill: none;
stroke-width: 2;
stroke-linecap: round;
animation: progress 1s ease-out forwards;
box-shadow: 0 8px 25px 0 #e5e5e5;
}
@keyframes progress {
0% {
stroke-dasharray: 0 100;
}
}
.percentage {
fill: #4285f4;
font-size: 0.375em;
text-anchor: middle;
font-family: AvenirNext;
font-weight: bold;
font-style: normal;
font-stretch: normal;
line-height: 1;
letter-spacing: normal;
}
.percentage_done {
fill: #9b9b9b;
font-size: 0.2em;
font-family: AvenirNext;
font-weight: 500;
font-style: normal;
font-stretch: normal;
line-height: normal;
letter-spacing: 0.1px;
}<div>
<p class="Project_Analytics_Heading text-center">
Time per Application
</p>
<svg viewBox="0 0 36 36" class="circular-chart">
<path class="that-circle" stroke="#ffba00" stroke-dasharray="100 50" d="M18 2.0845
a 15.9155 15.9155 0 0 1 0 31.831
a 15.9155 15.9155 0 0 1 0 -31.831" />
<path class="that-circle" stroke="#ff4858" stroke-dasharray="50 75" d="M18 2.0845
a 15.9155 15.9155 0 0 1 0 31.831
a 15.9155 15.9155 0 0 1 0 -31.831" />
<path class="that-circle" stroke="#845cee" stroke-dasharray="25 100" d="M18 2.0845
a 15.9155 15.9155 0 0 1 0 31.831
a 15.9155 15.9155 0 0 1 0 -31.831" />
<text x="18" y="20.35" class="percentage">50%</text>
<text x="13" y="25" class="percentage_done">iOS</text>
</svg>
</div>** Example 1:===> If i have 3 elements 50, 25, 25 we have to write functionality such that from last element**
3rd element
we have to set stroke-dasharray 25 100
---> where 25 is the value out of 100 at first attempt
2nd element
we have to set stroke-dasharray 50 75
--> first value is 50 because (2nd element + 3rd element) ==> 25 + 25 ==> 50
--> second value is 75 because (100 - 3rd element value) ==> 100-25 ==> 75
1st element
we have to set stroke-dasharray 100 50
--> first value is 100 because (1st element + 2nd element + 3rd element) ==> 50 + 25 + 25 ==> 100
--> second value is 50 because (100 - (2nd element + 3rd element value)) ==> 100-(25 + 25) ==> 50
** Example 2:===> If i have 4 elements 30, 20, 40, 10 we have to write functionality such that from last element**
4th element
we have to set stroke-dasharray 10 100
---> where 10 is the value out of 100 at first attempt
3rd element
we have to set stroke-dasharray 50 90
---> first value is 50 because (3rd element + 4th element) ==> 40 + 10 ==> 50
--> second value is 90 because (100 - 3rd element value) ==> 100-10 ==> 90
2nd element
we have to set stroke-dasharray 70 50
--> first value is 70 because (2nd element + 3rd element + 4th element) ==> 20 + 40 + 10 ==> 70
--> second value is 50 because (100 - (3rd element value + 4th element)) ==> 100 - (40+10) ==> 50
1st element
we have to set stroke-dasharray 100 30
--> first value is 100 because (1st element + 2nd element + 3rd element + 4th element) ==> 30+ 20 + 40 + 10 ==> 100
--> second value is 30 because (100 - (2nd element + 3rd element + 4th element value)) ==> 100-(20 + 40 + 10) ==> 30
hope you understand the logic
answered Nov 21 '18 at 10:58
Ratan Uday KumarRatan Uday Kumar
1,05721432
add a comment |
I have found a way with my own logical tries
.circular-chart {
display: block;
margin: 5% auto;
max-width: 80%;
max-height: 240px;
margin-bottom: 15%;
}
.that-circle {
fill: none;
stroke-width: 2;
stroke-linecap: round;
animation: progress 1s ease-out forwards;
box-shadow: 0 8px 25px 0 #e5e5e5;
}
@keyframes progress {
0% {
stroke-dasharray: 0 100;
}
}
.percentage {
fill: #4285f4;
font-size: 0.375em;
text-anchor: middle;
font-family: AvenirNext;
font-weight: bold;
font-style: normal;
font-stretch: normal;
line-height: 1;
letter-spacing: normal;
}
.percentage_done {
fill: #9b9b9b;
font-size: 0.2em;
font-family: AvenirNext;
font-weight: 500;
font-style: normal;
font-stretch: normal;
line-height: normal;
letter-spacing: 0.1px;
}<div>
<p class="Project_Analytics_Heading text-center">
Time per Application
</p>
<svg viewBox="0 0 36 36" class="circular-chart">
<path class="that-circle" stroke="#ffba00" stroke-dasharray="100 50" d="M18 2.0845
a 15.9155 15.9155 0 0 1 0 31.831
a 15.9155 15.9155 0 0 1 0 -31.831" />
<path class="that-circle" stroke="#ff4858" stroke-dasharray="50 75" d="M18 2.0845
a 15.9155 15.9155 0 0 1 0 31.831
a 15.9155 15.9155 0 0 1 0 -31.831" />
<path class="that-circle" stroke="#845cee" stroke-dasharray="25 100" d="M18 2.0845
a 15.9155 15.9155 0 0 1 0 31.831
a 15.9155 15.9155 0 0 1 0 -31.831" />
<text x="18" y="20.35" class="percentage">50%</text>
<text x="13" y="25" class="percentage_done">iOS</text>
</svg>
</div>** Example 1:===> If i have 3 elements 50, 25, 25 we have to write functionality such that from last element**
3rd element
we have to set stroke-dasharray 25 100
---> where 25 is the value out of 100 at first attempt
2nd element
we have to set stroke-dasharray 50 75
--> first value is 50 because (2nd element + 3rd element) ==> 25 + 25 ==> 50
--> second value is 75 because (100 - 3rd element value) ==> 100-25 ==> 75
1st element
we have to set stroke-dasharray 100 50
--> first value is 100 because (1st element + 2nd element + 3rd element) ==> 50 + 25 + 25 ==> 100
--> second value is 50 because (100 - (2nd element + 3rd element value)) ==> 100-(25 + 25) ==> 50
** Example 2:===> If i have 4 elements 30, 20, 40, 10 we have to write functionality such that from last element**
4th element
we have to set stroke-dasharray 10 100
---> where 10 is the value out of 100 at first attempt
3rd element
we have to set stroke-dasharray 50 90
---> first value is 50 because (3rd element + 4th element) ==> 40 + 10 ==> 50
--> second value is 90 because (100 - 3rd element value) ==> 100-10 ==> 90
2nd element
we have to set stroke-dasharray 70 50
--> first value is 70 because (2nd element + 3rd element + 4th element) ==> 20 + 40 + 10 ==> 70
--> second value is 50 because (100 - (3rd element value + 4th element)) ==> 100 - (40+10) ==> 50
1st element
we have to set stroke-dasharray 100 30
--> first value is 100 because (1st element + 2nd element + 3rd element + 4th element) ==> 30+ 20 + 40 + 10 ==> 100
--> second value is 30 because (100 - (2nd element + 3rd element + 4th element value)) ==> 100-(20 + 40 + 10) ==> 30
hope you understand the logic
answered Nov 21 '18 at 10:58
Ratan Uday KumarRatan Uday Kumar
1,05721432
add a comment |
I have found a way with my own logical tries
.circular-chart {
display: block;
margin: 5% auto;
max-width: 80%;
max-height: 240px;
margin-bottom: 15%;
}
.that-circle {
fill: none;
stroke-width: 2;
stroke-linecap: round;
animation: progress 1s ease-out forwards;
box-shadow: 0 8px 25px 0 #e5e5e5;
}
@keyframes progress {
0% {
stroke-dasharray: 0 100;
}
}
.percentage {
fill: #4285f4;
font-size: 0.375em;
text-anchor: middle;
font-family: AvenirNext;
font-weight: bold;
font-style: normal;
font-stretch: normal;
line-height: 1;
letter-spacing: normal;
}
.percentage_done {
fill: #9b9b9b;
font-size: 0.2em;
font-family: AvenirNext;
font-weight: 500;
font-style: normal;
font-stretch: normal;
line-height: normal;
letter-spacing: 0.1px;
}<div>
<p class="Project_Analytics_Heading text-center">
Time per Application
</p>
<svg viewBox="0 0 36 36" class="circular-chart">
<path class="that-circle" stroke="#ffba00" stroke-dasharray="100 50" d="M18 2.0845
a 15.9155 15.9155 0 0 1 0 31.831
a 15.9155 15.9155 0 0 1 0 -31.831" />
<path class="that-circle" stroke="#ff4858" stroke-dasharray="50 75" d="M18 2.0845
a 15.9155 15.9155 0 0 1 0 31.831
a 15.9155 15.9155 0 0 1 0 -31.831" />
<path class="that-circle" stroke="#845cee" stroke-dasharray="25 100" d="M18 2.0845
a 15.9155 15.9155 0 0 1 0 31.831
a 15.9155 15.9155 0 0 1 0 -31.831" />
<text x="18" y="20.35" class="percentage">50%</text>
<text x="13" y="25" class="percentage_done">iOS</text>
</svg>
</div>** Example 1:===> If i have 3 elements 50, 25, 25 we have to write functionality such that from last element**
3rd element
we have to set stroke-dasharray 25 100
---> where 25 is the value out of 100 at first attempt
2nd element
we have to set stroke-dasharray 50 75
--> first value is 50 because (2nd element + 3rd element) ==> 25 + 25 ==> 50
--> second value is 75 because (100 - 3rd element value) ==> 100-25 ==> 75
1st element
we have to set stroke-dasharray 100 50
--> first value is 100 because (1st element + 2nd element + 3rd element) ==> 50 + 25 + 25 ==> 100
--> second value is 50 because (100 - (2nd element + 3rd element value)) ==> 100-(25 + 25) ==> 50
** Example 2:===> If i have 4 elements 30, 20, 40, 10 we have to write functionality such that from last element**
4th element
we have to set stroke-dasharray 10 100
---> where 10 is the value out of 100 at first attempt
3rd element
we have to set stroke-dasharray 50 90
---> first value is 50 because (3rd element + 4th element) ==> 40 + 10 ==> 50
--> second value is 90 because (100 - 3rd element value) ==> 100-10 ==> 90
2nd element
we have to set stroke-dasharray 70 50
--> first value is 70 because (2nd element + 3rd element + 4th element) ==> 20 + 40 + 10 ==> 70
--> second value is 50 because (100 - (3rd element value + 4th element)) ==> 100 - (40+10) ==> 50
1st element
we have to set stroke-dasharray 100 30
--> first value is 100 because (1st element + 2nd element + 3rd element + 4th element) ==> 30+ 20 + 40 + 10 ==> 100
--> second value is 30 because (100 - (2nd element + 3rd element + 4th element value)) ==> 100-(20 + 40 + 10) ==> 30
hope you understand the logic
answered Nov 21 '18 at 10:58
Ratan Uday KumarRatan Uday Kumar
1,05721432
I have found a way with my own logical tries
.circular-chart {
display: block;
margin: 5% auto;
max-width: 80%;
max-height: 240px;
margin-bottom: 15%;
}
.that-circle {
fill: none;
stroke-width: 2;
stroke-linecap: round;
animation: progress 1s ease-out forwards;
box-shadow: 0 8px 25px 0 #e5e5e5;
}
@keyframes progress {
0% {
stroke-dasharray: 0 100;
}
}
.percentage {
fill: #4285f4;
font-size: 0.375em;
text-anchor: middle;
font-family: AvenirNext;
font-weight: bold;
font-style: normal;
font-stretch: normal;
line-height: 1;
letter-spacing: normal;
}
.percentage_done {
fill: #9b9b9b;
font-size: 0.2em;
font-family: AvenirNext;
font-weight: 500;
font-style: normal;
font-stretch: normal;
line-height: normal;
letter-spacing: 0.1px;
}<div>
<p class="Project_Analytics_Heading text-center">
Time per Application
</p>
<svg viewBox="0 0 36 36" class="circular-chart">
<path class="that-circle" stroke="#ffba00" stroke-dasharray="100 50" d="M18 2.0845
a 15.9155 15.9155 0 0 1 0 31.831
a 15.9155 15.9155 0 0 1 0 -31.831" />
<path class="that-circle" stroke="#ff4858" stroke-dasharray="50 75" d="M18 2.0845
a 15.9155 15.9155 0 0 1 0 31.831
a 15.9155 15.9155 0 0 1 0 -31.831" />
<path class="that-circle" stroke="#845cee" stroke-dasharray="25 100" d="M18 2.0845
a 15.9155 15.9155 0 0 1 0 31.831
a 15.9155 15.9155 0 0 1 0 -31.831" />
<text x="18" y="20.35" class="percentage">50%</text>
<text x="13" y="25" class="percentage_done">iOS</text>
</svg>
</div>** Example 1:===> If i have 3 elements 50, 25, 25 we have to write functionality such that from last element**
3rd element
we have to set stroke-dasharray 25 100
---> where 25 is the value out of 100 at first attempt
2nd element
we have to set stroke-dasharray 50 75
--> first value is 50 because (2nd element + 3rd element) ==> 25 + 25 ==> 50
--> second value is 75 because (100 - 3rd element value) ==> 100-25 ==> 75
1st element
we have to set stroke-dasharray 100 50
--> first value is 100 because (1st element + 2nd element + 3rd element) ==> 50 + 25 + 25 ==> 100
--> second value is 50 because (100 - (2nd element + 3rd element value)) ==> 100-(25 + 25) ==> 50
** Example 2:===> If i have 4 elements 30, 20, 40, 10 we have to write functionality such that from last element**
4th element
we have to set stroke-dasharray 10 100
---> where 10 is the value out of 100 at first attempt
3rd element
we have to set stroke-dasharray 50 90
---> first value is 50 because (3rd element + 4th element) ==> 40 + 10 ==> 50
--> second value is 90 because (100 - 3rd element value) ==> 100-10 ==> 90
2nd element
we have to set stroke-dasharray 70 50
--> first value is 70 because (2nd element + 3rd element + 4th element) ==> 20 + 40 + 10 ==> 70
--> second value is 50 because (100 - (3rd element value + 4th element)) ==> 100 - (40+10) ==> 50
1st element
we have to set stroke-dasharray 100 30
--> first value is 100 because (1st element + 2nd element + 3rd element + 4th element) ==> 30+ 20 + 40 + 10 ==> 100
--> second value is 30 because (100 - (2nd element + 3rd element + 4th element value)) ==> 100-(20 + 40 + 10) ==> 30
hope you understand the logic
.circular-chart {
display: block;
margin: 5% auto;
max-width: 80%;
max-height: 240px;
margin-bottom: 15%;
}
.that-circle {
fill: none;
stroke-width: 2;
stroke-linecap: round;
animation: progress 1s ease-out forwards;
box-shadow: 0 8px 25px 0 #e5e5e5;
}
@keyframes progress {
0% {
stroke-dasharray: 0 100;
}
}
.percentage {
fill: #4285f4;
font-size: 0.375em;
text-anchor: middle;
font-family: AvenirNext;
font-weight: bold;
font-style: normal;
font-stretch: normal;
line-height: 1;
letter-spacing: normal;
}
.percentage_done {
fill: #9b9b9b;
font-size: 0.2em;
font-family: AvenirNext;
font-weight: 500;
font-style: normal;
font-stretch: normal;
line-height: normal;
letter-spacing: 0.1px;
}<div>
<p class="Project_Analytics_Heading text-center">
Time per Application
</p>
<svg viewBox="0 0 36 36" class="circular-chart">
<path class="that-circle" stroke="#ffba00" stroke-dasharray="100 50" d="M18 2.0845
a 15.9155 15.9155 0 0 1 0 31.831
a 15.9155 15.9155 0 0 1 0 -31.831" />
<path class="that-circle" stroke="#ff4858" stroke-dasharray="50 75" d="M18 2.0845
a 15.9155 15.9155 0 0 1 0 31.831
a 15.9155 15.9155 0 0 1 0 -31.831" />
<path class="that-circle" stroke="#845cee" stroke-dasharray="25 100" d="M18 2.0845
a 15.9155 15.9155 0 0 1 0 31.831
a 15.9155 15.9155 0 0 1 0 -31.831" />
<text x="18" y="20.35" class="percentage">50%</text>
<text x="13" y="25" class="percentage_done">iOS</text>
</svg>
</div>.circular-chart {
display: block;
margin: 5% auto;
max-width: 80%;
max-height: 240px;
margin-bottom: 15%;
}
.that-circle {
fill: none;
stroke-width: 2;
stroke-linecap: round;
animation: progress 1s ease-out forwards;
box-shadow: 0 8px 25px 0 #e5e5e5;
}
@keyframes progress {
0% {
stroke-dasharray: 0 100;
}
}
.percentage {
fill: #4285f4;
font-size: 0.375em;
text-anchor: middle;
font-family: AvenirNext;
font-weight: bold;
font-style: normal;
font-stretch: normal;
line-height: 1;
letter-spacing: normal;
}
.percentage_done {
fill: #9b9b9b;
font-size: 0.2em;
font-family: AvenirNext;
font-weight: 500;
font-style: normal;
font-stretch: normal;
line-height: normal;
letter-spacing: 0.1px;
}<div>
<p class="Project_Analytics_Heading text-center">
Time per Application
</p>
<svg viewBox="0 0 36 36" class="circular-chart">
<path class="that-circle" stroke="#ffba00" stroke-dasharray="100 50" d="M18 2.0845
a 15.9155 15.9155 0 0 1 0 31.831
a 15.9155 15.9155 0 0 1 0 -31.831" />
<path class="that-circle" stroke="#ff4858" stroke-dasharray="50 75" d="M18 2.0845
a 15.9155 15.9155 0 0 1 0 31.831
a 15.9155 15.9155 0 0 1 0 -31.831" />
<path class="that-circle" stroke="#845cee" stroke-dasharray="25 100" d="M18 2.0845
a 15.9155 15.9155 0 0 1 0 31.831
a 15.9155 15.9155 0 0 1 0 -31.831" />
<text x="18" y="20.35" class="percentage">50%</text>
<text x="13" y="25" class="percentage_done">iOS</text>
</svg>
</div>answered Nov 21 '18 at 10:58
Ratan Uday KumarRatan Uday Kumar
1,05721432
edited Nov 21 '18 at 11:30
answered Nov 21 '18 at 10:58
Ratan Uday KumarRatan Uday Kumar
1,05721432
answered Nov 21 '18 at 10:58
Ratan Uday KumarRatan Uday Kumar
1,05721432
answered Nov 21 '18 at 10:58
Ratan Uday KumarRatan Uday Kumar
1,05721432
1,05721432
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f52644567%2fbuild-circular-percentage-chart%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
