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.