diff --git a/src/plugins/kbn_vislib_vis_types/public/area.js b/src/plugins/kbn_vislib_vis_types/public/area.js
index 9f94093e45627..9bc3441f0da82 100644
--- a/src/plugins/kbn_vislib_vis_types/public/area.js
+++ b/src/plugins/kbn_vislib_vis_types/public/area.js
@@ -22,6 +22,7 @@ define(function (require) {
           mode: 'stacked',
           times: [],
           addTimeMarker: false,
+          syncTimeMarker: false,
           defaultYExtents: false,
           setYExtents: false,
           yAxis: {}
diff --git a/src/plugins/kbn_vislib_vis_types/public/controls/point_series_options.html b/src/plugins/kbn_vislib_vis_types/public/controls/point_series_options.html
index e20c168f983bb..314ea842d0000 100644
--- a/src/plugins/kbn_vislib_vis_types/public/controls/point_series_options.html
+++ b/src/plugins/kbn_vislib_vis_types/public/controls/point_series_options.html
@@ -5,6 +5,12 @@
       Current time marker
     </label>
   </div>
+  <div class="vis-option-item" ng-show="vis.hasSchemaAgg('segment', 'date_histogram')">
+    <label>
+      <input type="checkbox" ng-model="vis.params.syncTimeMarker" ng-checked="vis.params.syncTimeMarker">
+      Synchronized Time Marker
+    </label>
+  </div>
   <div class="vis-option-item">
     <label>
       <input type="checkbox" ng-model="vis.params.setYExtents">
diff --git a/src/plugins/kbn_vislib_vis_types/public/histogram.js b/src/plugins/kbn_vislib_vis_types/public/histogram.js
index aeb01ef7d7990..fc945ffa8ad22 100644
--- a/src/plugins/kbn_vislib_vis_types/public/histogram.js
+++ b/src/plugins/kbn_vislib_vis_types/public/histogram.js
@@ -18,6 +18,7 @@ define(function (require) {
           mode: 'stacked',
           times: [],
           addTimeMarker: false,
+          syncTimeMarker: false,
           defaultYExtents: false,
           setYExtents: false,
           yAxis: {}
diff --git a/src/plugins/kbn_vislib_vis_types/public/line.js b/src/plugins/kbn_vislib_vis_types/public/line.js
index dbc9fdc8dc2da..b34b2ad769201 100644
--- a/src/plugins/kbn_vislib_vis_types/public/line.js
+++ b/src/plugins/kbn_vislib_vis_types/public/line.js
@@ -22,6 +22,7 @@ define(function (require) {
           radiusRatio: 9,
           times: [],
           addTimeMarker: false,
+          syncTimeMarker: false,
           defaultYExtents: false,
           setYExtents: false,
           yAxis: {}
diff --git a/src/plugins/kibana/public/dashboard/components/panel/lib/visualization.js b/src/plugins/kibana/public/dashboard/components/panel/lib/visualization.js
index f5cbdd8923864..72436c9ab8d67 100644
--- a/src/plugins/kibana/public/dashboard/components/panel/lib/visualization.js
+++ b/src/plugins/kibana/public/dashboard/components/panel/lib/visualization.js
@@ -1,5 +1,5 @@
 define(function (require) {
-  return function visualizationLoader(savedVisualizations, Private) { // Inject services here
+  return function visualizationLoader(savedVisualizations, markerSync, Private) { // Inject services here
     var brushEvent = Private(require('ui/utils/brush_event'));
     var filterBarClickHandler = Private(require('ui/filter_bar/filter_bar_click_handler'));
 
@@ -9,6 +9,7 @@ define(function (require) {
           // $scope.state comes via $scope inheritence from the dashboard app. Don't love this.
           savedVis.vis.listeners.click = filterBarClickHandler($scope.state);
           savedVis.vis.listeners.brush = brushEvent;
+          savedVis.vis.listeners.hover = markerSync.hoverHandler();
 
           return {
             savedObj: savedVis,
diff --git a/src/ui/public/vislib/__tests__/lib/marker_renderer.js b/src/ui/public/vislib/__tests__/lib/marker_renderer.js
new file mode 100644
index 0000000000000..dc37f6b5e21d8
--- /dev/null
+++ b/src/ui/public/vislib/__tests__/lib/marker_renderer.js
@@ -0,0 +1,231 @@
+var d3 = require('d3');
+var angular = require('angular');
+var expect = require('expect.js');
+var sinon = require('sinon');
+var moment = require('moment');
+var _ = require('lodash');
+var $ = require('jquery');
+
+describe('Vislib Marker Renderer Test Suite', function () {
+  var markerRenderer = require('ui/vislib/lib/marker_renderer');
+  var renderer;
+  var markers;
+  var partial = {
+    'class': 'partially-customized-marker',
+    opacity: 0.67
+  };
+  var full = {
+    'class': 'fully-customized-marker',
+    layer: 'fully-customized-marker-layer',
+    color: 'blue',
+    opacity: 0.45,
+    width: 3
+  };
+
+  describe('module structure', function () {
+    it('should be an object that has 3 props', function () {
+      expect(_.isObject(markerRenderer)).to.be(true);
+      expect(_.keys(markerRenderer)).to.have.length(3);
+      expect(typeof markerRenderer.render).to.be('function');
+      expect(typeof markerRenderer.configure).to.be('function');
+      expect(_.isObject(markerRenderer.opts)).to.be(true);
+    });
+  });
+
+  describe('configure method', function () {
+    it('should return default renderer', function () {
+      renderer = markerRenderer.configure();
+      expect(_.keys(renderer.opts)).to.have.length(5);
+      expect(renderer.opts).to.eql(markerRenderer.opts);
+    });
+
+    it('should return partially configured renderer', function () {
+      renderer = markerRenderer.configure(partial);
+      expect(_.keys(renderer.opts)).to.have.length(5);
+      expect(renderer.opts).to.eql({
+        'class': 'partially-customized-marker',
+        layer: 'time-marker-layer',
+        color: '#aaa',
+        opacity: 0.67,
+        width: 1
+      });
+    });
+
+    it('should return fully configured renderer', function () {
+      renderer = markerRenderer.configure(full);
+      expect(_.keys(renderer.opts)).to.have.length(5);
+      expect(renderer.opts).to.eql(full);
+    });
+
+    it('should inherit properties from base renderer', function () {
+      renderer = markerRenderer.configure(partial);
+      renderer = renderer.configure({
+        'class': 'inherit-customized-marker'
+      });
+      expect(_.keys(renderer.opts)).to.have.length(5);
+      expect(renderer.opts).to.eql({
+        'class': 'inherit-customized-marker',
+        layer: 'time-marker-layer',
+        color: '#aaa',
+        opacity: 0.67,
+        width: 1
+      });
+
+      renderer = renderer.configure({
+        color: 'orange',
+        layer: 'orange-time-marker-layer',
+        opacity: 0.4567
+      });
+      expect(_.keys(renderer.opts)).to.have.length(5);
+      expect(renderer.opts).to.eql({
+        'class': 'inherit-customized-marker',
+        layer: 'orange-time-marker-layer',
+        color: 'orange',
+        opacity: 0.4567,
+        width: 1
+      });
+    });
+  });
+
+  describe('render method', function () {
+    var HEIGHT = 50;
+    var selection;
+    var xScale;
+    var clock;
+
+    beforeEach(function () {
+      clock = sinon.useFakeTimers();
+
+      var domain = [+moment().subtract(30, 'm'), +moment().add(30, 'm')];
+      xScale = d3.time.scale().domain(domain).range([0, 600]);
+
+      selection = d3.select('body').append('div').attr('class', 'marker');
+    });
+
+    afterEach(function () {
+      clock.restore();
+
+      selection.remove('*');
+      selection = null;
+    });
+
+    it('should render current time', function () {
+      markerRenderer.render(selection, xScale, HEIGHT);
+
+      markers = $('.time-marker-layer line.time-marker').get();
+      expect(markers.length).to.be(1);
+
+      var marker = markers[0];
+      expect(marker.getAttribute('x1')).to.be('300');
+      expect(marker.getAttribute('x2')).to.be('300');
+    });
+
+    it('should render specified times (UNIX timestamp)', function () {
+      var times = [+moment().subtract(10, 'm'), +moment().add(5, 'm'), +moment().add(25, 'm')];
+      markerRenderer.render(selection, xScale, HEIGHT, times);
+
+      markers = $('.time-marker-layer line.time-marker').get();
+      expect(markers.length).to.be(3);
+
+      var pairs = _.map(markers, function (marker) {
+        return [marker.getAttribute('x1'), marker.getAttribute('x2')];
+      });
+      expect(_.sortBy(_.flatten(pairs))).to.eql([200, 200, 350, 350, 550, 550]);
+    });
+
+    it('should render specified times (d3 data series)', function () {
+      var times = [+moment().subtract(5, 'm'), +moment().add(5, 'm'), +moment().add(15, 'm')];
+      times = times.map(function (time) {
+        return { class: 'd3-time-marker', time: time };
+      });
+      markerRenderer.render(selection, xScale, HEIGHT, times);
+
+      markers = _.sortBy($('.time-marker-layer line.d3-time-marker').get(), 'time');
+      expect(markers.length).to.be(3);
+
+      var pairs = _.map(markers, function (marker) {
+        return [marker.getAttribute('x1'), marker.getAttribute('x2')];
+      });
+      expect(_.sortBy(_.flatten(pairs))).to.eql([250, 250, 350, 350, 450, 450]);
+    });
+
+    it('should overwrite base properties with d3 data series', function () {
+      renderer = markerRenderer.configure({
+        class: 'overwrite-time-marker',
+        width: 1.5
+      });
+
+      var times = [{
+        time: +moment(),
+        class: 'red-time-marker',
+        color: 'red'
+      }, {
+        time: +moment().add(10, 'm'),
+        class: 'green-time-marker',
+        color: 'green',
+        opacity: 0.75
+      }, {
+        time: +moment().add(20, 'm'),
+        class: 'blue-time-marker',
+        color: 'blue',
+        width: 1
+      }];
+      renderer.render(selection, xScale, HEIGHT, times);
+
+      markers = $('.time-marker-layer line.overwrite-time-marker').get();
+      expect(markers.length).to.be(0);
+
+      markers = $('.time-marker-layer line.red-time-marker').get();
+      expect(markers.length).to.be(1);
+
+      var red = markers[0];
+      expect(red.getAttribute('stroke')).to.be('red');
+      expect(red.getAttribute('stroke-width')).to.be('1.5');
+      expect(red.getAttribute('stroke-opacity')).to.be('0.8');
+
+      markers = $('.time-marker-layer line.green-time-marker').get();
+      expect(markers.length).to.be(1);
+
+      var green = markers[0];
+      expect(green.getAttribute('stroke')).to.be('green');
+      expect(green.getAttribute('stroke-width')).to.be('1.5');
+      expect(green.getAttribute('stroke-opacity')).to.be('0.75');
+
+      markers = $('.time-marker-layer line.blue-time-marker').get();
+      expect(markers.length).to.be(1);
+
+      var blue = markers[0];
+      expect(blue.getAttribute('stroke')).to.be('blue');
+      expect(blue.getAttribute('stroke-width')).to.be('1');
+      expect(blue.getAttribute('stroke-opacity')).to.be('0.8');
+    });
+
+    it('should render markers in separated layers', function () {
+      var times = [+moment()];
+
+      var red = markerRenderer.configure({
+        layer: 'red-time-marker-layer'
+      });
+      red.render(selection, xScale, HEIGHT, times);
+
+      var green = markerRenderer.configure({
+        layer: 'green-time-marker-layer'
+      });
+      green.render(selection, xScale, HEIGHT, times);
+
+      var blue = markerRenderer.configure({
+        layer: 'blue-time-marker-layer'
+      });
+      blue.render(selection, xScale, HEIGHT, times);
+
+      markers = $('line.time-marker').get();
+      expect(markers.length).to.be(3);
+      markers = $('.red-time-marker-layer line.time-marker').get();
+      expect(markers.length).to.be(1);
+      markers = $('.green-time-marker-layer line.time-marker').get();
+      expect(markers.length).to.be(1);
+      markers = $('.blue-time-marker-layer line.time-marker').get();
+      expect(markers.length).to.be(1);
+    });
+  });
+});
diff --git a/src/ui/public/vislib/__tests__/lib/marker_synchronizer.js b/src/ui/public/vislib/__tests__/lib/marker_synchronizer.js
new file mode 100644
index 0000000000000..672175d31e3e3
--- /dev/null
+++ b/src/ui/public/vislib/__tests__/lib/marker_synchronizer.js
@@ -0,0 +1,38 @@
+describe('Vislib Marker Synchronizer', function () {
+  var _ = require('lodash');
+  var ngMock = require('ngMock');
+  var expect = require('expect.js');
+
+  var SimpleEmitter = require('ui/utils/SimpleEmitter');
+  var sync;
+
+  var EVENT_TIME_BASED = { data: { ordered: { date: true } } };
+  var EVENT_NON_TIME_BASED = { data: { ordered: { date: false } } };
+
+  beforeEach(ngMock.module('kibana'));
+  beforeEach(ngMock.inject(function (markerSync) {
+    sync = markerSync;
+  }));
+
+  describe('basic functionality', function () {
+    it('is a simple emitter', function () {
+      expect(sync).to.be.a(SimpleEmitter);
+    });
+
+    it('emits a "sync" event when the hover handler is called', function (done) {
+      sync.on('sync', function () {
+        done();
+      });
+
+      sync.hoverHandler()(EVENT_TIME_BASED);
+    });
+
+    it('ignores a call of the hover handler from a non time-based chart', function () {
+      sync.on('sync', function () {
+        expect().fail('"sync" event should not be emitted');
+      });
+
+      sync.hoverHandler()(EVENT_NON_TIME_BASED);
+    });
+  });
+});
diff --git a/src/ui/public/vislib/__tests__/visualizations/time_marker.js b/src/ui/public/vislib/__tests__/visualizations/time_marker.js
index b60bd0cab4b6f..3c7166d64e118 100644
--- a/src/ui/public/vislib/__tests__/visualizations/time_marker.js
+++ b/src/ui/public/vislib/__tests__/visualizations/time_marker.js
@@ -14,6 +14,7 @@ describe('Vislib Time Marker Test Suite', function () {
   var opacity = 0.5;
   var width = 3;
   var customClass = 'custom-time-marker';
+  var customLayer = 'custom-time-marker-layer';
   var dateMathTimes = ['now-1m', 'now-5m', 'now-15m'];
   var myTimes = dateMathTimes.map(function (dateMathString) {
     return {
@@ -49,7 +50,7 @@ describe('Vislib Time Marker Test Suite', function () {
     domain = [minDomain, maxDomain];
     xScale = d3.time.scale().domain(domain).range([0, 500]);
     defaultMarker = new TimeMarker(times, xScale, height);
-    customMarker = new TimeMarker(myTimes, xScale, height);
+    customMarker = new TimeMarker(myTimes, xScale, height, customLayer);
 
     selection = d3.select('body').append('div').attr('class', 'marker');
     selection.datum(series);
@@ -59,6 +60,7 @@ describe('Vislib Time Marker Test Suite', function () {
     selection.remove('*');
     selection = null;
     defaultMarker = null;
+    customMarker = null;
   });
 
   describe('_isTimeBaseChart method', function () {
@@ -87,11 +89,11 @@ describe('Vislib Time Marker Test Suite', function () {
     });
 
     it('should render the default line', function () {
-      expect(!!$('line.time-marker').length).to.be(true);
+      expect(!!$('.time-marker-layer line.time-marker').length).to.be(true);
     });
 
     it('should render the custom (user defined) lines', function () {
-      expect($('line.custom-time-marker').length).to.be(myTimes.length);
+      expect($('.custom-time-marker-layer line.custom-time-marker').length).to.be(myTimes.length);
     });
 
     it('should set the class', function () {
diff --git a/src/ui/public/vislib/lib/handler/handler.js b/src/ui/public/vislib/lib/handler/handler.js
index 937a1162fb20b..0eef32a2a0960 100644
--- a/src/ui/public/vislib/lib/handler/handler.js
+++ b/src/ui/public/vislib/lib/handler/handler.js
@@ -1,8 +1,14 @@
 define(function (require) {
-  return function HandlerBaseClass(Private) {
+  require('ui/vislib/lib/marker_synchronizer');
+
+  return function HandlerBaseClass(Private, markerSync) {
     var d3 = require('d3');
+    var $ = require('jquery');
     var _ = require('lodash');
     var errors = require('ui/errors');
+    var markerRenderer = require('ui/vislib/lib/marker_renderer').configure({
+      layer: 'sync-time-marker-layer'
+    });
 
     var Data = Private(require('ui/vislib/lib/data'));
     var Layout = Private(require('ui/vislib/lib/layout/layout'));
@@ -22,6 +28,8 @@ define(function (require) {
         return new Handler(vis, opts);
       }
 
+      var self = this;
+
       this.data = opts.data || new Data(vis.data, vis._attr);
       this.vis = vis;
       this.el = vis.el;
@@ -38,6 +46,22 @@ define(function (require) {
       this.axisTitle = opts.axisTitle;
       this.alerts = opts.alerts;
 
+      if (this._attr.syncTimeMarker) {
+        // ignore if not time based chart
+        if (_.get(this.xAxis, 'ordered.date')) {
+          this.markerSyncHandler = function (e) {
+            var margin = self._attr.margin;
+            self.charts.forEach(function (chart) {
+              var height = $(chart.chartEl).height() - margin.top - margin.bottom;
+              var svg = d3.select(chart.chartEl).selectAll('svg > g');
+              markerRenderer.render(svg, self.xAxis.xScale, height, [e.point.x]);
+            });
+          };
+
+          markerSync.on('sync', this.markerSyncHandler);
+        }
+      }
+
       if (this._attr.addLegend) {
         this.legend = opts.legend;
       }
@@ -51,7 +75,7 @@ define(function (require) {
         this.chartTitle,
         this.alerts,
         this.xAxis,
-        this.yAxis,
+        this.yAxis
       ], Boolean);
 
       // memoize so that the same function is returned every time,
@@ -210,6 +234,11 @@ define(function (require) {
       });
 
       this.charts.length = 0;
+
+      if (this.markerSyncHandler) {
+        markerSync.off('sync', this.markerSyncHandler);
+        this.markerSyncHandler = null;
+      }
     };
 
     return Handler;
diff --git a/src/ui/public/vislib/lib/marker_renderer.js b/src/ui/public/vislib/lib/marker_renderer.js
new file mode 100644
index 0000000000000..3f3ad737c26bd
--- /dev/null
+++ b/src/ui/public/vislib/lib/marker_renderer.js
@@ -0,0 +1,102 @@
+define(function (require) {
+  var d3 = require('d3');
+  var _ = require('lodash');
+
+  /**
+   * Renders time markers of the current or specified times.
+   *
+   * @param selection {Object} d3 selection object
+   * @param xScale {Function} d3.time.scale
+   * @param height {number} height of the target chart
+   * @param [times] {Array[number]|Array[Object]} list of UNIX timestamps (millisecond) or
+   *  d3 data series that have time properties.
+   * @return {Array[Object]} list of d3 data series.
+   */
+  function renderWith(opts, selection, xScale, height, times) {
+    times = (times && times.length) ? times : [new Date().getTime()];
+    times = times.map(function (time) {
+      if (_.isUndefined(time.time)) {
+        time = { time: time };
+      }
+      return _.assign({}, opts, time);
+    });
+
+    selection.each(function () {
+      var layer = d3.select(this).selectAll('.' + opts.layer);
+
+      if (layer.empty()) {
+        layer = d3.select(this).append('g')
+        .attr('class', opts.layer);
+      }
+
+      var markers = layer.selectAll('.' + opts.class)
+        .data(times);
+      markers
+        .enter().append('line')
+        .attr('pointer-events', 'none');
+      markers
+        .attr('class', function (d) {
+          return d.class;
+        })
+        .attr('stroke-width', function (d) {
+          return d.width;
+        })
+        .attr('stroke-opacity', function (d) {
+          return d.opacity;
+        })
+        .attr('stroke', function (d) {
+          return d.color;
+        })
+        .attr('x1', function (d) {
+          return xScale(d.time);
+        })
+        .attr('x2', function (d) {
+          return xScale(d.time);
+        })
+        .attr('y1', height)
+        .attr('y2', xScale.range()[0]);
+    });
+
+    return times;
+  }
+
+  /**
+   * Customizes renderer based on parent option and returns a new one.
+   *
+   * @param [opts] {Object} option object.
+   *  Here is default option.
+   *    {
+   *      'class': 'time-marker',
+   *      'layer': 'time-marker-layer',
+   *      'color': '#aaa',
+   *      'opacity': 0.8,
+   *      'width': 1
+   *    }
+   * @return {Object} configured renderer
+   */
+  function configureWith(baseOpts, opts) {
+    var newOpts = _.assign({}, baseOpts, opts || {});
+
+    return {
+      render: (function _render(newOpts) {
+        return function render(selection, xScale, height, times) {
+          return renderWith(newOpts, selection, xScale, height, times);
+        };
+      }(newOpts)),
+      configure: (function _configure(newOpts) {
+        return function configure(opts) {
+          return configureWith(newOpts, opts);
+        };
+      }(newOpts)),
+      opts: newOpts
+    };
+  }
+
+  return configureWith({
+    'class': 'time-marker',
+    'layer': 'time-marker-layer',
+    'color': '#aaa',
+    'opacity': 0.8,
+    'width': 1
+  });
+});
diff --git a/src/ui/public/vislib/lib/marker_synchronizer.js b/src/ui/public/vislib/lib/marker_synchronizer.js
new file mode 100644
index 0000000000000..3b6b1254cbc40
--- /dev/null
+++ b/src/ui/public/vislib/lib/marker_synchronizer.js
@@ -0,0 +1,37 @@
+define(function (require) {
+  var _ = require('lodash');
+  var module = require('ui/modules').get('kibana/marker_synchronizer');
+  var SimpleEmitter = require('ui/utils/SimpleEmitter');
+
+  module.factory('markerSync', function () {
+    /**
+     * Time Marker Synchronizer
+     *
+     * @class MarkerSynchronizer
+     * @constructor
+     * @extends SimpleEmitter
+     */
+    _.class(MarkerSynchronizer).inherits(SimpleEmitter);
+    function MarkerSynchronizer() {
+      MarkerSynchronizer.Super.call(this);
+    }
+
+    /**
+     * Returns function that emits 'sync' event.
+     *
+     * @method hoverHandler
+     * @returns {Function}
+     */
+    MarkerSynchronizer.prototype.hoverHandler = function () {
+      var self = this;
+      return function (e) {
+        // ignore if not time based chart
+        if (_.get(e, 'data.ordered.date')) {
+          self.emit('sync', e);
+        }
+      };
+    };
+
+    return new MarkerSynchronizer;
+  });
+});
diff --git a/src/ui/public/vislib/visualizations/time_marker.js b/src/ui/public/vislib/visualizations/time_marker.js
index 840f09ee93d6c..d9e2976a5d8cf 100644
--- a/src/ui/public/vislib/visualizations/time_marker.js
+++ b/src/ui/public/vislib/visualizations/time_marker.js
@@ -1,32 +1,37 @@
 define(function (require) {
   return function TimeMarkerFactory() {
     var d3 = require('d3');
+    var _ = require('lodash');
     var dateMath = require('ui/utils/dateMath');
+    var markerRenderer = require('ui/vislib/lib/marker_renderer');
+    var defaultOpts = {
+      'color': '#c80000',
+      'opacity': 0.3,
+      'width': 2
+    };
 
-    function TimeMarker(times, xScale, height) {
+    function TimeMarker(times, xScale, height, layer) {
       if (!(this instanceof TimeMarker)) {
-        return new TimeMarker(times, xScale, height);
+        return new TimeMarker(times, xScale, height, layer);
       }
 
-      var currentTimeArr = [{
-        'time': new Date().getTime(),
-        'class': 'time-marker',
-        'color': '#c80000',
-        'opacity': 0.3,
-        'width': 2
-      }];
+      var opts = defaultOpts;
+      if (layer) {
+        opts = _.assign({}, defaultOpts, { layer: layer });
+      }
+      this.renderer = markerRenderer.configure(opts);
 
       this.xScale = xScale;
       this.height = height;
       this.times = (times.length) ? times.map(function (d) {
-        return {
+        return _.omit({
           'time': dateMath.parse(d.time),
-          'class': d.class || 'time-marker',
-          'color': d.color || '#c80000',
-          'opacity': d.opacity || 0.3,
-          'width': d.width || 2
-        };
-      }) : currentTimeArr;
+          'class': d.class,
+          'color': d.color,
+          'opacity': d.opacity,
+          'width': d.width
+        }, _.isUndefined);
+      }) : [];
     }
 
     TimeMarker.prototype._isTimeBasedChart = function (selection) {
@@ -42,32 +47,7 @@ define(function (require) {
       // return if not time based chart
       if (!self._isTimeBasedChart(selection)) return;
 
-      selection.each(function () {
-        d3.select(this).selectAll('time-marker')
-          .data(self.times)
-          .enter().append('line')
-          .attr('class', function (d) {
-            return d.class;
-          })
-          .attr('pointer-events', 'none')
-          .attr('stroke', function (d) {
-            return d.color;
-          })
-          .attr('stroke-width', function (d) {
-            return d.width;
-          })
-          .attr('stroke-opacity', function (d) {
-            return d.opacity;
-          })
-          .attr('x1', function (d) {
-            return self.xScale(d.time);
-          })
-          .attr('x2', function (d) {
-            return self.xScale(d.time);
-          })
-          .attr('y1', self.height)
-          .attr('y2', self.xScale.range()[0]);
-      });
+      this.renderer.render(selection, this.xScale, this.height, this.times);
     };
 
     return TimeMarker;