diff --git a/demo/client.ts b/demo/client.ts
index b219b733..70588213 100644
--- a/demo/client.ts
+++ b/demo/client.ts
@@ -556,9 +556,12 @@ function addDecoration() {
 
 function addOverviewRuler() {
   term.options['overviewRulerWidth'] = 15;
-  const canvas = term.registerDecoration({marker: term.addMarker(1), { color }: 'red'});
-  term.registerDecoration({marker: term.addMarker(3), { color }: 'green'});
-  term.registerDecoration({marker: term.addMarker(5), { color }: 'blue'});
+  const canvas = term.registerDecoration({marker: term.addMarker(1), overviewRulerOptions: { color: 'red' }});
+  term.registerDecoration({marker: term.addMarker(3), overviewRulerOptions: { color: 'green' }});
+  term.registerDecoration({marker: term.addMarker(5), overviewRulerOptions: { color: 'blue' }});
+  term.registerDecoration({marker: term.addMarker(7), overviewRulerOptions: { color: 'red', position: 'left' }});
+  term.registerDecoration({marker: term.addMarker(7), overviewRulerOptions: { color: 'green', position: 'center' }});
+  term.registerDecoration({marker: term.addMarker(7), overviewRulerOptions: { color: 'blue', position: 'right' }});
   canvas.onRender((e) => {
     e.style.left = `${document.querySelector('.xterm-viewport').clientWidth + 5}px`;
   });
diff --git a/src/browser/Decorations/OverviewRulerRenderer.ts b/src/browser/Decorations/OverviewRulerRenderer.ts
index 45f30c35..eb58bc10 100644
--- a/src/browser/Decorations/OverviewRulerRenderer.ts
+++ b/src/browser/Decorations/OverviewRulerRenderer.ts
@@ -67,7 +67,7 @@ export class OverviewRulerRenderer extends Disposable {
   }
 
   private _refreshStyle(decoration: IInternalDecoration): void {
-    if (!this._ctx) {
+    if (!this._ctx || !this._optionsService.options.overviewRulerWidth) {
       return;
     }
     if (decoration.options.anchor === 'right') {
@@ -81,10 +81,12 @@ export class OverviewRulerRenderer extends Disposable {
     }
     this._ctx.lineWidth = 1;
     this._ctx.strokeStyle = decoration.options.overviewRulerOptions.color;
+    const size = Math.floor(this._optionsService.options.overviewRulerWidth / 3);
+    const position = decoration.options.overviewRulerOptions.position;
     this._ctx.strokeRect(
-      0,
+      !position ||  position === 'left' ? 0 : position === 'right' ? size * 2 + 1: size,
       Math.round(this._canvas.height * (decoration.options.marker.line / this._bufferService.buffers.active.lines.length)),
-      this._canvas.width,
+      !position ? this._canvas.width : position === 'center' ? size + 1 : size,
       window.devicePixelRatio
     );
   }