Gantt chart not displaying details properly as per the time mentioned in datasource

I have followed all steps to create Gantt Chart on below link
but it is not displaying data correctly on graph as per the data in datasourse.Please find below screenshot in which for John time period is 8:00 - 10:00 but on graph its displaying different.Can anyone help me on this issue.

I see no replies to this, but I am having the same issue. Did you ever find a solution?

Make sure xAxes>appearance>grid>position = 0. This option allows a grid offset to the times by a fractional portion of an hour. A value of 0.5, for example, will offset the gridline by 30 min.