diff --git a/lib/DOMutil.js b/lib/DOMutil.js
index ee4506d1..ebedeb21 100644
--- a/lib/DOMutil.js
+++ b/lib/DOMutil.js
@@ -121,43 +121,43 @@ exports.getDOMElement = function (elementType, JSONcontainer, DOMContainer, inse
 
 
 /**
- * draw a point object. this is a seperate function because it can also be called by the legend.
+ * Draw a point object. This is a separate function because it can also be called by the legend.
  * The reason the JSONcontainer and the target SVG svgContainer have to be supplied is so the legend can use these functions
  * as well.
  *
  * @param x
  * @param y
- * @param group
+ * @param groupTemplate: A template containing the necessary information to draw the datapoint e.g., {style: 'circle', size: 5, className: 'className' }
  * @param JSONcontainer
  * @param svgContainer
  * @param labelObj
  * @returns {*}
  */
-exports.drawPoint = function(x, y, group, JSONcontainer, svgContainer, labelObj) {
+exports.drawPoint = function(x, y, groupTemplate, JSONcontainer, svgContainer, labelObj) {
   var point;
-  if (group.options.drawPoints.style == 'circle') {
-    point = exports.getSVGElement('circle',JSONcontainer,svgContainer);
+  if (groupTemplate.style == 'circle') {
+    point = exports.getSVGElement('circle', JSONcontainer, svgContainer);
     point.setAttributeNS(null, "cx", x);
     point.setAttributeNS(null, "cy", y);
-    point.setAttributeNS(null, "r", 0.5 * group.options.drawPoints.size);
+    point.setAttributeNS(null, "r", 0.5 * groupTemplate.size);
   }
   else {
-    point = exports.getSVGElement('rect',JSONcontainer,svgContainer);
-    point.setAttributeNS(null, "x", x - 0.5*group.options.drawPoints.size);
-    point.setAttributeNS(null, "y", y - 0.5*group.options.drawPoints.size);
-    point.setAttributeNS(null, "width", group.options.drawPoints.size);
-    point.setAttributeNS(null, "height", group.options.drawPoints.size);
+    point = exports.getSVGElement('rect', JSONcontainer, svgContainer);
+    point.setAttributeNS(null, "x", x - 0.5 * groupTemplate.size);
+    point.setAttributeNS(null, "y", y - 0.5 * groupTemplate.size);
+    point.setAttributeNS(null, "width", groupTemplate.size);
+    point.setAttributeNS(null, "height", groupTemplate.size);
   }
 
-  if(group.options.drawPoints.styles !== undefined) {
-    point.setAttributeNS(null, "style", group.group.options.drawPoints.styles);
+  if (groupTemplate.style !== undefined) {
+    point.setAttributeNS(null, "style", groupTemplate.style);
   }
-  point.setAttributeNS(null, "class", group.className + " vis-point");
+  point.setAttributeNS(null, "class", groupTemplate.className + " vis-point");
   //handle label
 
 
   if (labelObj) {
-    var label = exports.getSVGElement('text',JSONcontainer,svgContainer);
+    var label = exports.getSVGElement('text', JSONcontainer, svgContainer);
     if (labelObj.xOffset) {
       x = x + labelObj.xOffset;
     }
diff --git a/lib/timeline/component/GraphGroup.js b/lib/timeline/component/GraphGroup.js
index 0e62747f..0aac3316 100644
--- a/lib/timeline/component/GraphGroup.js
+++ b/lib/timeline/component/GraphGroup.js
@@ -169,7 +169,12 @@ GraphGroup.prototype.drawIcon = function(x, y, JSONcontainer, SVGcontainer, icon
     }
 
     if (this.options.drawPoints.enabled == true) {
-      DOMutil.drawPoint(x + 0.5 * iconWidth,y, this, JSONcontainer, SVGcontainer);
+		var groupTemplate = {
+				style: this.options.drawPoints.style,
+				size:this.options.drawPoints.size,
+				className: this.className
+		};
+		DOMutil.drawPoint(x + 0.5 * iconWidth, y, groupTemplate, JSONcontainer, SVGcontainer);
     }
   }
   else {
diff --git a/lib/timeline/component/graph2d_types/points.js b/lib/timeline/component/graph2d_types/points.js
index 235026b5..4b18f0f2 100644
--- a/lib/timeline/component/graph2d_types/points.js
+++ b/lib/timeline/component/graph2d_types/points.js
@@ -30,10 +30,45 @@ Points.prototype.draw = function(dataset, group, framework, offset) {
  * @param {Number} [offset]
  */
 Points.draw = function (dataset, group, framework, offset) {
-  if (offset === undefined) {offset = 0;}
+  offset = offset || 0;
+  var callback = getCallback();
+
   for (var i = 0; i < dataset.length; i++) {
-    DOMutil.drawPoint(dataset[i].x + offset, dataset[i].y, group, framework.svgElements, framework.svg, dataset[i].label);
+    if (!callback) {
+  	  // draw the point the simple way.
+  	  DOMutil.drawPoint(dataset[i].x + offset, dataset[i].y, getGroupTemplate(), framework.svgElements, framework.svg, dataset[i].label);
+    } else {
+		var callbackResult = callback(dataset[i], group, framework); // result might be true, false or an object
+		if (callbackResult === true || typeof callbackResult === 'object') {
+		    DOMutil.drawPoint(dataset[i].x + offset, dataset[i].y, getGroupTemplate(callbackResult), framework.svgElements, framework.svg, dataset[i].label);
+		}
+    }
+  }
+
+  function getGroupTemplate(callbackResult) {
+  	callbackResult = (typeof callbackResult === 'undefined') ? {} : callbackResult;
+  	return {
+  		style: callbackResult.style || group.options.drawPoints.style,
+  		size: callbackResult.size || group.options.drawPoints.size,
+  		className: callbackResult.className || group.className
+  	};
   }
+  
+  function getCallback() {
+  	var callback = undefined;
+      // check for the graph2d onRender
+      if (framework.options.drawPoints.onRender && typeof framework.options.drawPoints.onRender == 'function') {
+      	callback = framework.options.drawPoints.onRender;
+      }
+      
+      // override it with the group onRender if defined
+      if (group.group.options && group.group.options.drawPoints && group.group.options.drawPoints.onRender && typeof group.group.options.drawPoints.onRender == 'function') {
+      	callback = group.group.options.drawPoints.onRender;
+      }
+      
+      return callback;
+  }
+};
 };