How can I achieve this with a Doughnut chart

[tomasts248]

Hi!
I'm trying to achieve this, can it be done with Charts.js?

Source: https://www.bkmediagroup.com/about-us/our-process
The idea is to have a border with "the arrow form" indicating direction, as well as text connected by lines to the chart.

This is what I have so far: a Doughnut chart with multiple datasets
https://codepen.io/Snippet/pen/vYYZpQW
Do note I intend to have the multiple dataset which is the only difference towards what I want to achieve and the earlier image.

[zhuhang-jasper]

There are too many custom stuff there.
If you want to achieve it with ChartJS, at least there's a few things to note:

1. Custom border edges - You need a custom drawer to do the "arrow shape".
   See: https://stackoverflow.com/questions/45446153/chartjs-round-borders-on-a-doughnut-chart-with-multiple-datasets/48627653

2. Connected lines to describe data -

   • If you want it to show upon mouse hover, you need a custom drawer for tooltip.
   • If you want it always show, try changing behaviour of tooltip. Other than that, I have no idea how you can achieve that.

Conclusion, there are too many custom requirements here, I think it is very unwise to do it with Chart.js, because u will spend too much time to do a small stuff.

Furthermore, consider how likely are you going to change the data? If its a static flow chart, just use CSS or image, LOL. Chart.js is for data presentation, not powerpoint slides.

[tomasts248]

Thank you!! It is for a website and ideally it should be interactive, well what I think is most important is to distance the associated paragraph text to each stage, I'm sorry Im a noob with JS... I can live without the connected lines and the custom borders.

[sanki4489]

@tomasts248 were you able to achieve the desired results?

[tomasts248]

@tomasts248 were you able to achieve the desired results?

Its been a while, but if I reap correctly I didn't.

[Udemology]

I will look into this 2/3 days from now days.

Looking at this it seems like it will need probably 3 different (custom) plugins.
Part 1: Arrow Tip Endings: https://www.youtube.com/watch?v=3L4tMmPV64A

1. The lines should be a custom tooltip design that will draw the lines + text when you hover on the doughnut slice
2. The custom borders with arrow tip: https://www.youtube.com/watch?v=3L4tMmPV64A
3. Text in item (perhaps data labels plugin)

[Udemology]

Part 1: https://www.youtube.com/watch?v=3L4tMmPV64A
Part 2: https://youtu.be/V2ZgTUz0WqE
Part 3: https://youtu.be/VetmY7pKqiQ

[Udemology]

Part 4: https://youtu.be/BPG5qGBFpS0