-1

enter image description here

I am using Linear gradient to indicate the percentage of the task completed. As u can see above its not calculated correctly. Currently I am just adding another path over an existing one. Is there any way I can display the correct percentage? or Is there any other method to display the percentage.?

-

Here is the link to my code.

DevSa
  • 178
  • 3
  • 16
  • Instead of using `linearGradient` for this task I would use strokes: `stroke-dasharray`and `stroke-dashoffset` for example like this: [Create a circle progressbar in svg or css](https://stackoverflow.com/questions/53892517/create-a-circle-progressbar-in-svg-or-css/53893211#53893211) – enxaneta Jan 10 '19 at 12:37
  • https://stackoverflow.com/a/9031405/5385381 – ksav Jan 10 '19 at 17:24
  • Please show me what you have. I would like to help. – enxaneta Jan 11 '19 at 10:00
  • Thanks. Please use this link for the code. https://codepen.io/sashnk/pen/ebPPwB – DevSa Jan 11 '19 at 10:55
  • Please put a [mcve] in the question. Links can break. You seem to have had some of that in there in the past but you've removed it. – Robert Longson Jan 14 '19 at 12:46
  • You can delete this question. – DevSa Jan 16 '19 at 09:14

1 Answers1

1

You should be able to recycle your computeTextRotation function to add gradientTransform='rotate()' with the computed angle.

grad.attr('gradientTransform' , function(d) {
  var angle = computeTextRotation(d);
  return `rotate(${angle + 90})`
})

Codepen

ksav
  • 20,015
  • 6
  • 46
  • 66
  • Thanks.. I got the angles right but not able to show/calculate the percentage. https://codepen.io/sashnk/pen/WLLJRo – DevSa Jan 14 '19 at 09:39
  • I'm not sure what you mean? – ksav Jan 14 '19 at 09:48
  • I need to fill the Path with exact percentage. Pls see the link i jus mentioned. – DevSa Jan 14 '19 at 10:02
  • Yes I have seen the link but it's not clear what you are asking. – ksav Jan 14 '19 at 10:11
  • Hmm..for instance in my example arc "Sub A2" should be filled exactly 30%. But its filled above 60%. So how can I calculate the value of endAngle based on percentage? – DevSa Jan 14 '19 at 10:14
  • What do you mean by `filled exactly 30%`? – ksav Jan 14 '19 at 10:39
  • Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/186648/discussion-between-ksav-and-devsa). – ksav Jan 14 '19 at 10:39