How you can create a Donut Chart in Jetpack Compose?

hello welcome back to techum I pratik Sharma and in this video I will take you through a variant of npy chart animation in Jetpack compose we'll call this Gap pie chart you can notice the differences between these two animation from this video you will have two key takeaways Dynamic start angle with n Pi the first one has all the arcs starting at the same time from Top Center position that is - 90° but for the second pie chart the start position is different for every Ark the second Arc always start from where the first one left off and this goes on for other arcs as well second would be animation with the above changes we will achieve the pie chart where all arcs start together but what if we want to make it sequential the second Arc will start when the first one finishes and so on isn't it exciting I'm thrilled to see your responses when you all also learn this so let's jump to the code before I start I would urge you to subscribe the channel and leave feedback in the comment section this is a free Channel and I'm happy to see you watching this video we together have to reach many more developers like you to keep this Channel Growing we have to get 100K Subs as soon as possible for this Channel and it's not possible without you so if this video helps you in any way share this with your friends colleagues or in community so I can bring more search videos let's start let's first make a copy of this chart we'll modify this composable to get a pie chart that has gaps between every section this Gap will be in degrees so this is a copy of animated and py chart let's rename it to animated Gap pie chart down in the preview we have a p data now this P data for this composable doesn't need labels so I made a copy of that too without label also I created a screen that will host this widget Gap pie chart screen now let's use animated Gap by chart in this screen let's see if everything is running as before let's remove the opacity because now arcs won't overlap on each other so we don't need opacity you will notice change in the color of arcs now you can see that the Gap by chart has rounded corners for sections so add cap to the stroke you can see that due to these rounded Corners we have the ARs overlap a little bit that is because of the rounded extra part but that's not what we need to worry we will make it work using gaps as I said before that the sections can have different colors because they don't overlap so this means that they can also have a variable start angle so definitely we need to add start angle field to our Arc data and now you have got error that Arc data requires start angle so let's give it just before that now we need not find cumulative sweep angles so change this to it do value instead of current sum but now current sum should be used as the start angle we should be storing a start angle before updating the current sum because when you run for first iteration it should be zero and for second and further sections it should be the end where the previous one ended you need to add minus 90 to this because the pie chart starts from Top Center also update the draw Arc to use this new start Angle now nice I'm changing color so that you can see it in on white background as well let's add gaps now when you introduce gaps the overall degrees have to be compromised let's say Gap is of 10° and four sections will have four four gaps so we have remaining degrees as 320 360 - 40 now our total will be equivalent to this 320 instead of 360 compared to previous pie chart let's do that in the code you will get total Gap degrees by multiplying number of sections with each Gap degree use this remaining Gap degree instead of 360 now you can see the gaps but all the Gap is added to one place so we need to consider adding Gap to our start angles as well but we cannot add fixed Gap degrees to start angle it will be dynamic we need to also see how many sections are there before a particular section and for that we have index so let's say for First St you will have 10° added as Gap Index but for second you need 20° added because for every Arc we start calculating from Top center now use map indexed instead of map so that we will also have the index now now replace it with pi data point and use index for calculating start angle great let's increase the Gap a bit and now we have gaps and arcs at perfect place so this is one type of Animation which you can use where all the ARs start at the same time but from a different location but what if we want to make it sequential so after first AR finishes animating the second AR will start and so on we need to introduce delays with animating each Arc so let's say first Arc takes in 1 second to complete the second should start after 1 second similarly the third should start after 2 seconds and of course the first one should start without any delay so change change the duration to 1,000 milliseconds because earlier the whole pie chart was formed in 4,000 milliseconds and now every Arc will take 1,000 mes and will aggregate to 4,000 mes to get this Dynamic delay we should be using index again use map index again and let's run it nice the easing doesn't look ideal now it should be just linear easing let me increase the duration so we can see animation for [Music] longer we can also start this overall animation after 500 [Music] milliseconds let's also change our data set to see how it works with one more data rerun the application nice well you can also give Dynamic interval Gap but that is for another video and this is it from this tutorial did you like it then hit the like button so that I can bring more such tutorials also let me know in the comment section if there are any improvements you think are needed in this chart and of course don't forget to subscribe the channel your one subscription will mean a lot to me and will help Channel grow and reach its Target of 100K Subs thanks for watching and see you in the next one

Channel: TECHIE BLOSSOM

Views: 1,042

Keywords: Jetpack compose, animation, donut chart, pie chart

Id: eD0aETRZPs0

Length: 8min 1sec (481 seconds)

Published: Thu Sep 28 2023