Тёмный

How to Create Doughnut Chart with Labels Outside with Connecting Line in Chart js 

Chart JS
Подписаться 20 тыс.
Просмотров 25 тыс.
50% 1

Опубликовано:

 

22 окт 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 55   
@Emiwryy
@Emiwryy 4 месяца назад
You made me so happy with this video I literally cried tears of joy when I finally understood the gimmick behind the idea, thank you SO much, I do mean this
@shubhamdiwadkar1442
@shubhamdiwadkar1442 Месяц назад
Thankyou for making this video, their is another thing to the same I need multiple labels in place of single label. Can this also be configured in the same
@bhumikashah7461
@bhumikashah7461 2 года назад
Thank you for the video. It's of great help. I have a question though - when the slices of the Chart are small, the labels are overlapping with each other. How to fix this? Kindly respond.
@aexelm
@aexelm 2 года назад
Awesome, wonderful ... no words!!. Excelent explained!
@kslangdon2102
@kslangdon2102 Год назад
Excellent tutorial! thanks. But how do I show the data in percentage instead of the label?
@fish_the_robot
@fish_the_robot Год назад
Thank you very much learned much, thanks for explaining it so well and taking the time to make these videos. I Appreciate it, thx.
@ЗамирЮсупов-щ9к
@ЗамирЮсупов-щ9к 2 года назад
WOW! Very appreciate! You helped me and safe my time!
@ЗамирЮсупов-щ9к
@ЗамирЮсупов-щ9к 2 года назад
and you got new follower ))))
@kshitijkhot1401
@kshitijkhot1401 2 года назад
nice explanation , THANKS A LOT. 🙃🙃.
@alessandrop.5131
@alessandrop.5131 Год назад
Nice. I have a little issue, in my doughnut chart. I have a lot of data and little slices, the label outside overlaps each other, how can avoid overlapping?
@arianquechua5625
@arianquechua5625 Год назад
Would you mind to publish this plugin as an npm package?
@denniscelen
@denniscelen Год назад
hi there, first of all, i love this youtube channel. 1. is it also possible to add the values underneath the labels?
@riteshsingh-xi3hv
@riteshsingh-xi3hv 2 года назад
Thank you very much the way you explain step by step and very simple to understand. I am facing issue in this. When the data points have big difference like: data: [3, 2, 1, 100, 105] then labels are overlapping. Please provide some solution. Thanks
@mohanavamsikalangi2549
@mohanavamsikalangi2549 Год назад
HI this was a nice way and I have implemented this and worked but in my page I am destroying the chart and rebuilding again . When this happens the font of the text shown is becoming bolder . How to solve this ??
@CryptoKosh
@CryptoKosh 2 года назад
Really great tutorial ✅✅
@adenugaayoade1934
@adenugaayoade1934 2 года назад
Thank you for this❤
@prasadgore2166
@prasadgore2166 2 года назад
When there is small and very large datasets labels overlapp, what is the solution for that
@chineduotutu3723
@chineduotutu3723 2 года назад
Nice video man!!! I want to ask how can I get the lines to start from the centre but on top of each slice, right now it starts at the centre but from inside each slice, thanks!!
@naminjaepocaeramelhor
@naminjaepocaeramelhor 2 года назад
Great video friend, I would like you to explain in video how to make a chart that automatically updates with data in json...thanks great video
@ChartJS-tutorials
@ChartJS-tutorials 2 года назад
Hi Vinicius, thank you for your question. I have created an answer video covering you question here: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-7KBwz1pcQsw.html More videos within range of this topic will be added soon as there are still other parts that need to be covered. However this will give you a decent start.
@naminjaepocaeramelhor
@naminjaepocaeramelhor 2 года назад
@@ChartJS-tutorials Seriously man, I searched and ended up not finding it hahahah, I'll watch the video now, thank you very much and great job
@ankanbrahmachary6581
@ankanbrahmachary6581 Год назад
Hey... Could you please help me on how to use this technique with ng2 charts in angular 15? Is there any work around for that?
@ivankosheliev7227
@ivankosheliev7227 2 года назад
Hey, how to create multiple labels that not depends from numbers of data. For example like speedometer? is it possible to arrange the elements in that way?
@Shriio
@Shriio 2 года назад
Holy shit dude, thanks so much.
@IliaBroudno
@IliaBroudno Год назад
Can you post a link to your code please?
@afsarali9
@afsarali9 Год назад
Thank you for the video. It's great help. I have a question though - when the slices of the Chart are small, the labels are overlapping with each other. How to fix this?
@ChartJS-tutorials
@ChartJS-tutorials Год назад
Hi Afsar, thank you for your question. This video might be helpful for you: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-IR0uakl-GLM.html
@afsarali9
@afsarali9 Год назад
@@ChartJS-tutorials Thank you!
@afsarali9
@afsarali9 Год назад
@@ChartJS-tutorials Thanks! but this will not work.. please try to make a video using data 96.5, .5, .5, .5, .5, 1.5 if will use this type of data then the arrow points and label text would be overlapping. is there any solution for that.
@indofiz1077
@indofiz1077 2 года назад
Well, when i use pie, the tooltip far from the side, how can i change the position of tooltip (Side Pie)
@juancarloscarrasquillapela4756
@juancarloscarrasquillapela4756 2 года назад
how can I do this with chart js (2.9.3) - ng2 chart(2.3.2)?
@hathuan7457
@hathuan7457 Год назад
why when I select a legend to hide the dataset (checked that the condition hiddenIndices is satisfied to hide the line and text), when I turn the legend back on, it doesn't show up again?
@mauriciosanchez813
@mauriciosanchez813 2 года назад
Nice Video and really great content. Question, how can I make the same thing but with the datalabels inside each slice in piechart for example?, like when you have percentage datalabels inside each slice. Thanks!
@ChartJS-tutorials
@ChartJS-tutorials 2 года назад
Hi Mauricio, thank you for your question. I though I responded to this but notice the comment is not showing. This video would be helpful which is a plugin that can show values or percentages. Which is a nice plugin to use: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-xpN394MAhPA.html
@klaudiapaluch5868
@klaudiapaluch5868 2 года назад
THANK YOU !!!
@julianascandolafrossard226
@julianascandolafrossard226 2 года назад
Thank you for the video, but i wanna know how to Create PIE Chart with Labels Outside with Connecting line
@ChartJS-tutorials
@ChartJS-tutorials 2 года назад
Hi Juliana, thank you for your question. Just convert the chart type from "doughnut" to "pie". These chart types are essentially the same expect one has the cutout set on 50 while the pie chart has it set on 0.
@kasperskov1337
@kasperskov1337 2 года назад
So one thing I can't figure out is why your x and y tooltip coordinates aren't influenced by your chart padding. Or maybe it really is. If you were to set the padding to chart width / 2, wouldn't all your calculations be off by padding x value? The tooltip coordinates are calculated from canvas edges not the chart edges.
@ChartJS-tutorials
@ChartJS-tutorials 2 года назад
When we use the chart.getDatasetMeta we are able to extract the exact coordinates of where the tooltip is positioned. This is being recalculated as well. However, in this case we remove legend and all other items that would impact the position. And the layout padding is set on equal to all. If there would be a legend at the top you can assign top in chartArea. But if you struggle with your item, let me know where you struggle and I will try to explore it.
@sanjeebgochhayat6911
@sanjeebgochhayat6911 2 года назад
i do not get the data while console.log(chart.data.datasets)...anyone have the solution
@skyzane2735
@skyzane2735 2 года назад
At 43:32 Line 114 What’s the purpose of textWidth variable? It’s just getting console.log, Is it okay to delete it?
@ChartJS-tutorials
@ChartJS-tutorials 2 года назад
Hi SkyZane, thank you for your question. Looking at the video I realize I forgot to connect this. Officially textWidth would get the width of the text label and should been used. You can comment those out so see if would be impacted. I did not see anything that was connected so it should be no problem. As I used an alternative way by adding 5 px. These kind of mistakes tend to happen to me sometimes due to so called tunnel vision. Being so focus on what I need to code next I sometimes do not notice my mistakes.
@bagussonarangga7283
@bagussonarangga7283 Год назад
thankyou
@iganic7574
@iganic7574 6 месяцев назад
please provide me final code it look complicated i will just copy past it.
@Seven77tw
@Seven77tw Год назад
life saver
@sahilgrwl15
@sahilgrwl15 2 года назад
Is it possible to do the same to chartjs 2.9.4?
@ChartJS-tutorials
@ChartJS-tutorials 2 года назад
Hi Sahil, thank you for your question. The canvas code is universal as it is based on canvas API which JavaScript supports. However, I do not know of all the objects that are used are identical. That is a part you need to research.
@samlokta447
@samlokta447 2 года назад
How can we achieve same in piechart. Thanks
@ChartJS-tutorials
@ChartJS-tutorials 2 года назад
Hi Saml, thank you for your question. In Chart.js Doughnut and Pie chart have same structure. So you can use for both. Just insert type 'pie' instead of 'doughnut'. And you are good to go.
@gary7135
@gary7135 2 года назад
does it work with react typescript?
@CryptoKosh
@CryptoKosh 2 года назад
Yes
@oldold2027
@oldold2027 Год назад
In my dashboard I need multiple charts in the same page with different values. How can I do it?
@ChartJS-tutorials
@ChartJS-tutorials Год назад
Thank you for your question. Do you want to place multiple charts side by side like this: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-cxf_GEiryoc.html
@oldold2027
@oldold2027 Год назад
@@ChartJS-tutorials I want to have different charts on different divs in the same page.
Далее