We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Doughnut Chart as a clock with time intervals

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,

Attachment: example_e001ec5a.zip

3 Replies

SK Sanjith Kesavan Syncfusion Team September 24, 2015 04:21 PM UTC

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
Sanjith K.

WW Wojciech Wnuk September 25, 2015 12:36 PM UTC

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

Best regards,

SK Sanjith Kesavan Syncfusion Team September 28, 2015 06:01 AM UTC

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

Sanjith K.

Live Chat Icon For mobile
Up arrow icon