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

Guidance on implementing a chart spanning time

Hi! 😄

I have a need to visually display time spent performing different activities throughout the day. Each activity can be performed multiple times a day.

Attached is a screenshot of a similar chart.

I believe this would be a type of bar chart spanning 24 hours on it's X axis (ie the time of day). While the Y axis could be each day.

Any guidance on how this could be achieved is greatly appreciated 🙏


Attachment: SleepingChart_38896816.zip

5 Replies

BK Bharathiraja K Syncfusion Team June 12, 2019 11:38 AM UTC

Hi Ramirez, 
Greetings from Syncfusion. We have achieved your requirement with chart StripLine feature. The strip line is used to shade the different range of plot area to improve readability of chart. 
We have prepared the sample based on your application scenario and it can be downloaded from below link. 
In your case we have used DateTimeStripLine to separate the range based on the sleep mode by below. 
DateTimeStripLine stripLine = new DateTimeStripLine() 
                Start = rate.Minimum, 
                WidthType = DateTimeComponent.Minute, 
                Width = rate.SleepRange, 
                FillColor = rate.SleepMode == SleepMode.Awake ? Color.Yellow : rate.SleepMode == SleepMode.DeepSleep ? Color.DarkBlue : rate.SleepMode == SleepMode.LightSleep ? Color.LightBlue : Color.HotPink, 
To know more about strip lines please refer the below link. 
Hope the above information will help you to achieve your requirement.  

AR Anthony Ramirez June 12, 2019 12:45 PM UTC

WOW! Thanks so much Bharathi 🙏

That looks like it should be a perfect solution...I will give this a try and let you know. 

You guys ROCK! 😄🎉

BK Bharathiraja K Syncfusion Team June 12, 2019 12:48 PM UTC

Hi Ramirez,  
Thanks for your feedback. 

AR Anthony Ramirez July 18, 2019 12:06 AM UTC

Hi Bharathi!

Just wanted to followup and let you know that this worked perfectly! 😄 SfChart has proven to be very flexible and feature rich 💪

Many thanks again for your super fast and helpful support 🙏

All the best!

PR Padmini Ramamurthy Syncfusion Team July 18, 2019 05:21 AM UTC

Hi Anthony, 
Thanks for your appreciation:) and please get back to us if you need any other assistance. 

Live Chat Icon For mobile
Up arrow icon