Doughnut Chart as a clock with time intervals

[Wojciech Wnuk]

Hi,
I'm trying to figure out how to create a chart displaying time intervals in a 24 hour circle (clock).
I think the best solution for completing this task would be using doughnut type of ejChart.
I've made an example (see attached file), result is acceptable, but i'm not able to add to the chart ticks representing 24 hours.
Help me please with this task, any clue will be appreciated.

Best regards,
Wojtek

Attachment: example_e001ec5a.zip

[Sanjith Kesavan]

Hi Wojtek,
Thanks for contacting Syncfusion support. We have analyzed your query, sample and screenshot provided by you. Your requirement can be achieved through annotation. We have prepared the sample as per your requirement. In the sample we have created the annotation with the data provided by you and placed it inside of the another doughnut chart. Please find the below code for annotation.


In the above code we have created the div and set that display as none.

In the above code we have added id of the div to the annotation. For the chart we have set the opacity as 0 so annotation only visible. For the chart we have enabled the datalabel like below

For the datalabel we have set the datalabel position as outside.



Please find the screenshot of the chart below.


Please find the sample from below location. Please let us know if you have any concern.
Sample Link: https://www.syncfusion.com/downloads/support/forum/120522/ze/example807539980
 
Regards,
Sanjith K.

[Wojciech Wnuk]

Hi Sanjith,
Thank you for an awesome solution. This is exactly what i was looking for.

Best regards,
Wojtek

[Sanjith Kesavan]

Hi Wojtek,
Thanks for the update. Please let us know if you need any further assistance on this.

Regards,
Sanjith K.