bbtimeline-foreground-canvas.js

@@ -100,9 +100,15 @@ class BBTimelineForegroundCanvas extends BBTimelineCanvas {
 
     a.Clear();
 
-    const startPosY = (rect.Y + a.Parent.Marker.Width);
+    let startPosY = 0;
     const visibleEvents = a.Parent.VisibleEvents;
 
+    if (a.Parent.XAxis.Position == 'top') {
+      startPosY = (rect.Y + a.Parent.Marker.Width + 20);
+    } else {
+      startPosY = (rect.Y + a.Parent.Marker.Width);
+    }
+
     // Clear for collisions detection
     visibleEvents.forEach(function (e, i) {
       e.HitBox = { X: 0, Y:0, W: 0, H: 0};
@@ -111,9 +117,16 @@ class BBTimelineForegroundCanvas extends BBTimelineCanvas {
     visibleEvents.forEach(function (e, i) {
       // Calculate Y position
       let posY = a.calcMarkerPosition(e.Position.X, startPosY);
+      let posY2 = 0;
+
+      if (a.Parent.XAxis.Position == 'top') {
+        posY2 = a.Parent.Layer.Background.GraphRectangle.Y;
+      } else {
+        posY2 = (a.Parent.Layer.Background.GraphRectangle.Y + a.Parent.Layer.Background.GraphRectangle.H);
+      }
 
       if (a.Parent.MarkerLabel.Line.Width > 0) {
-        a.drawVerticalLine(e.Position.X, posY, (a.Parent.Layer.Background.GraphRectangle.Y + a.Parent.Layer.Background.GraphRectangle.H), a.Parent.MarkerLabel.Line.Width, a.Parent.MarkerLabel.Line.Colour);
+        a.drawVerticalLine(e.Position.X, posY, posY2, a.Parent.MarkerLabel.Line.Width, a.Parent.MarkerLabel.Line.Colour);
       }
 
       const markerRectangle = a.drawCircle(e.Position.X, posY, a.Parent.Marker.Width, a.Parent.Marker.BorderWidth, e.BorderColour, e.BackColour);

bbtimeline.js

@@ -11,7 +11,7 @@ class BBTimeline {
       Left: 20,
       Top: 20,
       Right: 20,
-      Bottom: 20
+      Bottom: 0
     };
     a.Size = {
       W: a.Container.innerWidth || a.Container.clientWidth,
@@ -39,7 +39,7 @@ class BBTimeline {
       HourLineColour: "#EAEAEA",
       DayLineHeight: 20,
       DayLineColour: "#9E9E9E",
-      Position: 'top'
+      Position: 'bottom'
     };
 
     a.Marker = {

demo-test.html

@@ -197,7 +197,16 @@ function ToggleShowLabel() {
 }
 
 function ToggleXAxisPosition() {
-  timeline1.XAxis.Position = (timeline1.XAxis.Position == 'top' ? 'bottom' : 'top');
+  if (timeline1.XAxis.Position == 'top') {
+    timeline1.XAxis.Position = 'bottom';
+    timeline1.Padding.Top = 20;
+    timeline1.Padding.Bottom = 0;
+  } else {
+    timeline1.XAxis.Position = 'top';
+    timeline1.Padding.Top = 0;
+    timeline1.Padding.Bottom = 20;
+  }
+
   timeline1.Invalidate(true, true);
 }