Fixed #970: Implemented options `dataColor`, `axisColor`, and `gridColor`.

HISTORY.md

@@ -4,6 +4,10 @@ http://visjs.org
 
 ## not-yet-released, version 4.3.1-SNAPSHOT
 
+### Graph3d
+
+- Fixed #970: Implemented options `dataColor`, `axisColor`, and `gridColor`.
+
 
 ## 2015-06-16, version 4.3.0
 

dist/vis.js

@@ -5,7 +5,7 @@
  * A dynamic, browser-based visualization library.
  *
  * @version 4.3.1-SNAPSHOT
- * @date    2015-06-16
+ * @date    2015-06-17
  *
  * @license
  * Copyright (C) 2011-2014 Almende B.V, http://almende.com
@@ -6597,6 +6597,8 @@ return /******/ (function(modules) { // webpackBootstrap
     this.animationPreload = false;
 
     this.camera = new Camera();
+    this.camera.setArmRotation(1, 0.5);
+    this.camera.setArmLength(1.7);
     this.eye = new Point3d(0, 0, -1); // TODO: set eye.z about 3/4 of the width of the window?
 
     this.dataTable = null; // The original data table
@@ -6624,11 +6626,14 @@ return /******/ (function(modules) { // webpackBootstrap
     this.yBarWidth = 1;
     // TODO: customize axis range
 
-    // constants
-    this.colorAxis = '#4D4D4D';
-    this.colorGrid = '#D3D3D3';
-    this.colorDot = '#7DC1FF';
-    this.colorDotBorder = '#3267D2';
+    // colors
+    this.axisColor = '#4D4D4D';
+    this.gridColor = '#D3D3D3';
+    this.dataColor = {
+      fill: '#7DC1FF',
+      stroke: '#3267D2',
+      strokeWidth: 1 // px
+    };
 
     // create a frame and canvas
     this.create();
@@ -7384,13 +7389,29 @@ return /******/ (function(modules) { // webpackBootstrap
       if (cameraPosition !== undefined) {
         this.camera.setArmRotation(cameraPosition.horizontal, cameraPosition.vertical);
         this.camera.setArmLength(cameraPosition.distance);
-      } else {
-        this.camera.setArmRotation(1, 0.5);
-        this.camera.setArmLength(1.7);
       }
-    }
 
-    this._setBackgroundColor(options && options.backgroundColor);
+      // colors
+      if (options.axisColor !== undefined) this.axisColor = options.axisColor;
+      if (options.gridColor !== undefined) this.gridColor = options.gridColor;
+      if (options.dataColor) {
+        if (typeof options.dataColor === 'string') {
+          this.dataColor.fill = options.dataColor;
+          this.dataColor.stroke = options.dataColor;
+        } else {
+          if (options.dataColor.fill) {
+            this.dataColor.fill = options.dataColor.fill;
+          }
+          if (options.dataColor.stroke) {
+            this.dataColor.stroke = options.dataColor.stroke;
+          }
+          if (options.dataColor.strokeWidth !== undefined) {
+            this.dataColor.strokeWidth = options.dataColor.strokeWidth;
+          }
+        }
+      }
+      this._setBackgroundColor(options.backgroundColor);
+    }
 
     this.setSize(this.width, this.height);
 
@@ -7493,14 +7514,14 @@ return /******/ (function(modules) { // webpackBootstrap
         ctx.stroke();
       }
 
-      ctx.strokeStyle = this.colorAxis;
+      ctx.strokeStyle = this.axisColor;
       ctx.strokeRect(left, top, widthMax, height);
     }
 
     if (this.style === Graph3d.STYLE.DOTSIZE) {
       // draw border around color bar
-      ctx.strokeStyle = this.colorAxis;
-      ctx.fillStyle = this.colorDot;
+      ctx.strokeStyle = this.axisColor;
+      ctx.fillStyle = this.dataColor.fill;
       ctx.beginPath();
       ctx.moveTo(left, top);
       ctx.lineTo(right, top);
@@ -7529,7 +7550,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
         ctx.textAlign = 'right';
         ctx.textBaseline = 'middle';
-        ctx.fillStyle = this.colorAxis;
+        ctx.fillStyle = this.axisColor;
         ctx.fillText(step.getCurrent(), left - 2 * gridLineLen, y);
 
         step.next();
@@ -7651,7 +7672,7 @@ return /******/ (function(modules) { // webpackBootstrap
       if (this.showGrid) {
         from = this._convert3Dto2D(new Point3d(x, this.yMin, this.zMin));
         to = this._convert3Dto2D(new Point3d(x, this.yMax, this.zMin));
-        ctx.strokeStyle = this.colorGrid;
+        ctx.strokeStyle = this.gridColor;
         ctx.beginPath();
         ctx.moveTo(from.x, from.y);
         ctx.lineTo(to.x, to.y);
@@ -7659,7 +7680,7 @@ return /******/ (function(modules) { // webpackBootstrap
       } else {
         from = this._convert3Dto2D(new Point3d(x, this.yMin, this.zMin));
         to = this._convert3Dto2D(new Point3d(x, this.yMin + gridLenX, this.zMin));
-        ctx.strokeStyle = this.colorAxis;
+        ctx.strokeStyle = this.axisColor;
         ctx.beginPath();
         ctx.moveTo(from.x, from.y);
         ctx.lineTo(to.x, to.y);
@@ -7667,7 +7688,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
         from = this._convert3Dto2D(new Point3d(x, this.yMax, this.zMin));
         to = this._convert3Dto2D(new Point3d(x, this.yMax - gridLenX, this.zMin));
-        ctx.strokeStyle = this.colorAxis;
+        ctx.strokeStyle = this.axisColor;
         ctx.beginPath();
         ctx.moveTo(from.x, from.y);
         ctx.lineTo(to.x, to.y);
@@ -7687,7 +7708,7 @@ return /******/ (function(modules) { // webpackBootstrap
         ctx.textAlign = 'left';
         ctx.textBaseline = 'middle';
       }
-      ctx.fillStyle = this.colorAxis;
+      ctx.fillStyle = this.axisColor;
       ctx.fillText('  ' + this.xValueLabel(step.getCurrent()) + '  ', text.x, text.y);
 
       step.next();
@@ -7705,7 +7726,7 @@ return /******/ (function(modules) { // webpackBootstrap
       if (this.showGrid) {
         from = this._convert3Dto2D(new Point3d(this.xMin, step.getCurrent(), this.zMin));
         to = this._convert3Dto2D(new Point3d(this.xMax, step.getCurrent(), this.zMin));
-        ctx.strokeStyle = this.colorGrid;
+        ctx.strokeStyle = this.gridColor;
         ctx.beginPath();
         ctx.moveTo(from.x, from.y);
         ctx.lineTo(to.x, to.y);
@@ -7713,7 +7734,7 @@ return /******/ (function(modules) { // webpackBootstrap
       } else {
         from = this._convert3Dto2D(new Point3d(this.xMin, step.getCurrent(), this.zMin));
         to = this._convert3Dto2D(new Point3d(this.xMin + gridLenY, step.getCurrent(), this.zMin));
-        ctx.strokeStyle = this.colorAxis;
+        ctx.strokeStyle = this.axisColor;
         ctx.beginPath();
         ctx.moveTo(from.x, from.y);
         ctx.lineTo(to.x, to.y);
@@ -7721,7 +7742,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
         from = this._convert3Dto2D(new Point3d(this.xMax, step.getCurrent(), this.zMin));
         to = this._convert3Dto2D(new Point3d(this.xMax - gridLenY, step.getCurrent(), this.zMin));
-        ctx.strokeStyle = this.colorAxis;
+        ctx.strokeStyle = this.axisColor;
         ctx.beginPath();
         ctx.moveTo(from.x, from.y);
         ctx.lineTo(to.x, to.y);
@@ -7741,7 +7762,7 @@ return /******/ (function(modules) { // webpackBootstrap
         ctx.textAlign = 'left';
         ctx.textBaseline = 'middle';
       }
-      ctx.fillStyle = this.colorAxis;
+      ctx.fillStyle = this.axisColor;
       ctx.fillText('  ' + this.yValueLabel(step.getCurrent()) + '  ', text.x, text.y);
 
       step.next();
@@ -7760,7 +7781,7 @@ return /******/ (function(modules) { // webpackBootstrap
     while (!step.end()) {
       // TODO: make z-grid lines really 3d?
       from = this._convert3Dto2D(new Point3d(xText, yText, step.getCurrent()));
-      ctx.strokeStyle = this.colorAxis;
+      ctx.strokeStyle = this.axisColor;
       ctx.beginPath();
       ctx.moveTo(from.x, from.y);
       ctx.lineTo(from.x - textMargin, from.y);
@@ -7768,7 +7789,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
       ctx.textAlign = 'right';
       ctx.textBaseline = 'middle';
-      ctx.fillStyle = this.colorAxis;
+      ctx.fillStyle = this.axisColor;
       ctx.fillText(this.zValueLabel(step.getCurrent()) + ' ', from.x - 5, from.y);
 
       step.next();
@@ -7776,7 +7797,7 @@ return /******/ (function(modules) { // webpackBootstrap
     ctx.lineWidth = 1;
     from = this._convert3Dto2D(new Point3d(xText, yText, this.zMin));
     to = this._convert3Dto2D(new Point3d(xText, yText, this.zMax));
-    ctx.strokeStyle = this.colorAxis;
+    ctx.strokeStyle = this.axisColor;
     ctx.beginPath();
     ctx.moveTo(from.x, from.y);
     ctx.lineTo(to.x, to.y);
@@ -7787,7 +7808,7 @@ return /******/ (function(modules) { // webpackBootstrap
     // line at yMin
     xMin2d = this._convert3Dto2D(new Point3d(this.xMin, this.yMin, this.zMin));
     xMax2d = this._convert3Dto2D(new Point3d(this.xMax, this.yMin, this.zMin));
-    ctx.strokeStyle = this.colorAxis;
+    ctx.strokeStyle = this.axisColor;
     ctx.beginPath();
     ctx.moveTo(xMin2d.x, xMin2d.y);
     ctx.lineTo(xMax2d.x, xMax2d.y);
@@ -7795,7 +7816,7 @@ return /******/ (function(modules) { // webpackBootstrap
     // line at ymax
     xMin2d = this._convert3Dto2D(new Point3d(this.xMin, this.yMax, this.zMin));
     xMax2d = this._convert3Dto2D(new Point3d(this.xMax, this.yMax, this.zMin));
-    ctx.strokeStyle = this.colorAxis;
+    ctx.strokeStyle = this.axisColor;
     ctx.beginPath();
     ctx.moveTo(xMin2d.x, xMin2d.y);
     ctx.lineTo(xMax2d.x, xMax2d.y);
@@ -7806,7 +7827,7 @@ return /******/ (function(modules) { // webpackBootstrap
     // line at xMin
     from = this._convert3Dto2D(new Point3d(this.xMin, this.yMin, this.zMin));
     to = this._convert3Dto2D(new Point3d(this.xMin, this.yMax, this.zMin));
-    ctx.strokeStyle = this.colorAxis;
+    ctx.strokeStyle = this.axisColor;
     ctx.beginPath();
     ctx.moveTo(from.x, from.y);
     ctx.lineTo(to.x, to.y);
@@ -7814,7 +7835,7 @@ return /******/ (function(modules) { // webpackBootstrap
     // line at xMax
     from = this._convert3Dto2D(new Point3d(this.xMax, this.yMin, this.zMin));
     to = this._convert3Dto2D(new Point3d(this.xMax, this.yMax, this.zMin));
-    ctx.strokeStyle = this.colorAxis;
+    ctx.strokeStyle = this.axisColor;
     ctx.beginPath();
     ctx.moveTo(from.x, from.y);
     ctx.lineTo(to.x, to.y);
@@ -7837,7 +7858,7 @@ return /******/ (function(modules) { // webpackBootstrap
         ctx.textAlign = 'left';
         ctx.textBaseline = 'middle';
       }
-      ctx.fillStyle = this.colorAxis;
+      ctx.fillStyle = this.axisColor;
       ctx.fillText(xLabel, text.x, text.y);
     }
 
@@ -7858,7 +7879,7 @@ return /******/ (function(modules) { // webpackBootstrap
         ctx.textAlign = 'left';
         ctx.textBaseline = 'middle';
       }
-      ctx.fillStyle = this.colorAxis;
+      ctx.fillStyle = this.axisColor;
       ctx.fillText(yLabel, text.x, text.y);
     }
 
@@ -7872,7 +7893,7 @@ return /******/ (function(modules) { // webpackBootstrap
       text = this._convert3Dto2D(new Point3d(xText, yText, zText));
       ctx.textAlign = 'right';
       ctx.textBaseline = 'middle';
-      ctx.fillStyle = this.colorAxis;
+      ctx.fillStyle = this.axisColor;
       ctx.fillText(zLabel, text.x - offset, text.y);
     }
   };
@@ -7932,6 +7953,9 @@ return /******/ (function(modules) { // webpackBootstrap
         v,
         zAvg;
 
+    ctx.lineJoin = 'round';
+    ctx.lineCap = 'round';
+
     if (this.dataPoints === undefined || this.dataPoints.length <= 0) return; // TODO: throw exception?
 
     // calculate the translations and screen position of all points
@@ -7991,15 +8015,14 @@ return /******/ (function(modules) { // webpackBootstrap
             } else {
               v = 1;
               fillStyle = this._hsv2rgb(h, s, v);
-              strokeStyle = this.colorAxis;
+              strokeStyle = this.axisColor;
             }
           } else {
             fillStyle = 'gray';
-            strokeStyle = this.colorAxis;
+            strokeStyle = this.axisColor;
           }
-          lineWidth = 0.5;
 
-          ctx.lineWidth = lineWidth;
+          ctx.lineWidth = this._getStrokeWidth(point);
           ctx.fillStyle = fillStyle;
           ctx.strokeStyle = strokeStyle;
           ctx.beginPath();
@@ -8019,20 +8042,12 @@ return /******/ (function(modules) { // webpackBootstrap
         right = this.dataPoints[i].pointRight;
         top = this.dataPoints[i].pointTop;
 
-        if (point !== undefined) {
-          if (this.showPerspective) {
-            lineWidth = 2 / -point.trans.z;
-          } else {
-            lineWidth = 2 * -(this.eye.z / this.camera.getArmLength());
-          }
-        }
-
         if (point !== undefined && right !== undefined) {
           // calculate Hue from the current value. At zMin the hue is 240, at zMax the hue is 0
           zAvg = (point.point.z + right.point.z) / 2;
           h = (1 - (zAvg - this.zMin) * this.scale.z / this.verticalRatio) * 240;
 
-          ctx.lineWidth = lineWidth;
+          ctx.lineWidth = this._getStrokeWidth(point) * 2;
           ctx.strokeStyle = this._hsv2rgb(h, 1, 1);
           ctx.beginPath();
           ctx.moveTo(point.screen.x, point.screen.y);
@@ -8045,7 +8060,7 @@ return /******/ (function(modules) { // webpackBootstrap
           zAvg = (point.point.z + top.point.z) / 2;
           h = (1 - (zAvg - this.zMin) * this.scale.z / this.verticalRatio) * 240;
 
-          ctx.lineWidth = lineWidth;
+          ctx.lineWidth = this._getStrokeWidth(point) * 2;
           ctx.strokeStyle = this._hsv2rgb(h, 1, 1);
           ctx.beginPath();
           ctx.moveTo(point.screen.x, point.screen.y);
@@ -8056,6 +8071,18 @@ return /******/ (function(modules) { // webpackBootstrap
     }
   };
 
+  Graph3d.prototype._getStrokeWidth = function (point) {
+    if (point !== undefined) {
+      if (this.showPerspective) {
+        return 1 / -point.trans.z * this.dataColor.strokeWidth;
+      } else {
+        return -(this.eye.z / this.camera.getArmLength()) * this.dataColor.strokeWidth;
+      }
+    }
+
+    return this.dataColor.strokeWidth;
+  };
+
   /**
    * Draw all datapoints as dots.
    * This function can be used when the style is 'dot' or 'dot-line'
@@ -8095,7 +8122,7 @@ return /******/ (function(modules) { // webpackBootstrap
         //var from = this._convert3Dto2D(new Point3d(point.point.x, point.point.y, this.zMin));
         var from = this._convert3Dto2D(point.bottom);
         ctx.lineWidth = 1;
-        ctx.strokeStyle = this.colorGrid;
+        ctx.strokeStyle = this.gridColor;
         ctx.beginPath();
         ctx.moveTo(from.x, from.y);
         ctx.lineTo(point.screen.x, point.screen.y);
@@ -8127,8 +8154,8 @@ return /******/ (function(modules) { // webpackBootstrap
         color = this._hsv2rgb(hue, 1, 1);
         borderColor = this._hsv2rgb(hue, 1, 0.8);
       } else if (this.style === Graph3d.STYLE.DOTSIZE) {
-        color = this.colorDot;
-        borderColor = this.colorDotBorder;
+        color = this.dataColor.fill;
+        borderColor = this.dataColor.stroke;
       } else {
         // calculate Hue from the current value. At zMin the hue is 240, at zMax the hue is 0
         hue = (1 - (point.point.z - this.zMin) * this.scale.z / this.verticalRatio) * 240;
@@ -8137,7 +8164,7 @@ return /******/ (function(modules) { // webpackBootstrap
       }
 
       // draw the circle
-      ctx.lineWidth = 1;
+      ctx.lineWidth = this._getStrokeWidth(point);
       ctx.strokeStyle = borderColor;
       ctx.fillStyle = color;
       ctx.beginPath();
@@ -8176,6 +8203,9 @@ return /******/ (function(modules) { // webpackBootstrap
     };
     this.dataPoints.sort(sortDepth);
 
+    ctx.lineJoin = 'round';
+    ctx.lineCap = 'round';
+
     // draw the datapoints as bars
     var xWidth = this.xBarWidth / 2;
     var yWidth = this.yBarWidth / 2;
@@ -8190,8 +8220,8 @@ return /******/ (function(modules) { // webpackBootstrap
         color = this._hsv2rgb(hue, 1, 1);
         borderColor = this._hsv2rgb(hue, 1, 0.8);
       } else if (this.style === Graph3d.STYLE.BARSIZE) {
-        color = this.colorDot;
-        borderColor = this.colorDotBorder;
+        color = this.dataColor.fill;
+        borderColor = this.dataColor.stroke;
       } else {
         // calculate Hue from the current value. At zMin the hue is 240, at zMax the hue is 0
         hue = (1 - (point.point.z - this.zMin) * this.scale.z / this.verticalRatio) * 240;
@@ -8247,7 +8277,7 @@ return /******/ (function(modules) { // webpackBootstrap
       });
 
       // draw the ordered surfaces
-      ctx.lineWidth = 1;
+      ctx.lineWidth = this._getStrokeWidth(point);
       ctx.strokeStyle = borderColor;
       ctx.fillStyle = color;
       // NOTE: we start at j=2 instead of j=0 as we don't need to draw the two surfaces at the backside
@@ -8291,20 +8321,20 @@ return /******/ (function(modules) { // webpackBootstrap
     if (this.dataPoints.length > 0) {
       point = this.dataPoints[0];
 
-      ctx.lineWidth = 1; // TODO: make customizable
-      ctx.strokeStyle = 'blue'; // TODO: make customizable
+      ctx.lineWidth = this._getStrokeWidth(point);
+      ctx.lineJoin = 'round';
+      ctx.lineCap = 'round';
+      ctx.strokeStyle = this.dataColor.stroke;
       ctx.beginPath();
       ctx.moveTo(point.screen.x, point.screen.y);
-    }
 
-    // draw the datapoints as colored circles
-    for (i = 1; i < this.dataPoints.length; i++) {
-      point = this.dataPoints[i];
-      ctx.lineTo(point.screen.x, point.screen.y);
-    }
+      // draw the datapoints as colored circles
+      for (i = 1; i < this.dataPoints.length; i++) {
+        point = this.dataPoints[i];
+        ctx.lineTo(point.screen.x, point.screen.y);
+      }
 
-    // finish the line
-    if (this.dataPoints.length > 0) {
+      // finish the line
       ctx.stroke();
     }
   };

docs/graph3d/index.html

@@ -296,6 +296,12 @@ var options = {
         Can be either a simple HTML color string, for example: 'red' or '#00cc00',
         or an object with the following properties.</td>
     </tr>
+    <tr>
+      <td>backgroundColor.fill</td>
+      <td>string</td>
+      <td>'white'</td>
+      <td>The chart fill color, as an HTML color string.</td>
+    </tr>
     <tr>
       <td>backgroundColor.stroke</td>
       <td>string</td>
@@ -308,12 +314,6 @@ var options = {
       <td>1</td>
       <td>The border width, in pixels.</td>
     </tr>
-    <tr>
-      <td>backgroundColor.fill</td>
-      <td>string</td>
-      <td>'white'</td>
-      <td>The chart fill color, as an HTML color string.</td>
-    </tr>
 
     <tr>
       <td>cameraPosition</td>
@@ -331,6 +331,43 @@ var options = {
         All parameters are optional.
     </tr>
 
+    <tr>
+      <td>axisColor</td>
+      <td>string</td>
+      <td>'#4D4D4D'</td>
+      <td>The color of the axis lines and the text along the axis.</td>
+    </tr>
+    <tr>
+      <td>dataColor</td>
+      <td>string or object</td>
+      <td>{fill:&nbsp;'#7DC1FF', stroke:&nbsp;'#3267D2', strokeWidth:&nbsp;1}</td>
+      <td>When <code>dataColor</code> is a string, it will set the color for both border and fill color of dots and bars. Applicable for styles <code>dot-size</code>, <code>bar-size</code>, and <code>line</code>. When an object, it can contain the properties descibed below.</td>
+    </tr>
+    <tr>
+      <td>dataColor.fill</td>
+      <td>string</td>
+      <td>'#7DC1FF'</td>
+      <td>The border color of the dots or bars. Applicable when using styles <code>dot-size</code> or <code>bar-size</code>.</td>
+    </tr>
+    <tr>
+      <td>dataColor.stroke</td>
+      <td>string</td>
+      <td>'#3267D2'</td>
+      <td>The fill color of the dots or bars. Applicable when using styles <code>dot-size</code>, <code>bar-size</code>, or <code>line</code>.</td>
+    </tr>
+    <tr>
+      <td>dataColor.strokeWidth</td>
+      <td>number</td>
+      <td>1</td>
+      <td>The line width of dots, bars and lines. Applicable for all styles.</td>
+    </tr>
+    <tr>
+      <td>gridColor</td>
+      <td>string</td>
+      <td>'#D3D3D3'</td>
+      <td>The color of the grid lines.</td>
+    </tr>
+
     <tr>
       <td>height</td>
       <td>string</td>

lib/graph3d/Graph3d.js

@@ -58,6 +58,8 @@ function Graph3d(container, data, options) {
   this.animationPreload = false;
 
   this.camera = new Camera();
+  this.camera.setArmRotation(1.0, 0.5);
+  this.camera.setArmLength(1.7);
   this.eye = new Point3d(0, 0, -1);  // TODO: set eye.z about 3/4 of the width of the window?
 
   this.dataTable = null;  // The original data table
@@ -85,11 +87,14 @@ function Graph3d(container, data, options) {
   this.yBarWidth = 1;
   // TODO: customize axis range
 
-  // constants
-  this.colorAxis = '#4D4D4D';
-  this.colorGrid = '#D3D3D3';
-  this.colorDot = '#7DC1FF';
-  this.colorDotBorder = '#3267D2';
+  // colors
+  this.axisColor = '#4D4D4D';
+  this.gridColor = '#D3D3D3';
+  this.dataColor = {
+    fill: '#7DC1FF',
+    stroke: '#3267D2',
+    strokeWidth: 1  // px
+  };
 
   // create a frame and canvas
   this.create();
@@ -823,21 +828,21 @@ Graph3d.prototype.setOptions = function (options) {
 
   if (options !== undefined) {
     // retrieve parameter values
-    if (options.width !== undefined)       this.width = options.width;
-    if (options.height !== undefined)      this.height = options.height;
+    if (options.width !== undefined)            this.width = options.width;
+    if (options.height !== undefined)           this.height = options.height;
 
-    if (options.xCenter !== undefined)     this.defaultXCenter = options.xCenter;
-    if (options.yCenter !== undefined)     this.defaultYCenter = options.yCenter;
+    if (options.xCenter !== undefined)          this.defaultXCenter = options.xCenter;
+    if (options.yCenter !== undefined)          this.defaultYCenter = options.yCenter;
 
-    if (options.filterLabel !== undefined)     this.filterLabel = options.filterLabel;
-    if (options.legendLabel !== undefined)     this.legendLabel = options.legendLabel;
-    if (options.xLabel !== undefined)     this.xLabel = options.xLabel;
-    if (options.yLabel !== undefined)     this.yLabel = options.yLabel;
-    if (options.zLabel !== undefined)     this.zLabel = options.zLabel;
+    if (options.filterLabel !== undefined)      this.filterLabel = options.filterLabel;
+    if (options.legendLabel !== undefined)      this.legendLabel = options.legendLabel;
+    if (options.xLabel !== undefined)           this.xLabel = options.xLabel;
+    if (options.yLabel !== undefined)           this.yLabel = options.yLabel;
+    if (options.zLabel !== undefined)           this.zLabel = options.zLabel;
 
-    if (options.xValueLabel !== undefined)     this.xValueLabel = options.xValueLabel;
-    if (options.yValueLabel !== undefined)     this.yValueLabel = options.yValueLabel;
-    if (options.zValueLabel !== undefined)     this.zValueLabel = options.zValueLabel;
+    if (options.xValueLabel !== undefined)      this.xValueLabel = options.xValueLabel;
+    if (options.yValueLabel !== undefined)      this.yValueLabel = options.yValueLabel;
+    if (options.zValueLabel !== undefined)      this.zValueLabel = options.zValueLabel;
 
     if (options.style !== undefined) {
       var styleNumber = this._getStyleNumber(options.style);
@@ -878,14 +883,30 @@ Graph3d.prototype.setOptions = function (options) {
       this.camera.setArmRotation(cameraPosition.horizontal, cameraPosition.vertical);
       this.camera.setArmLength(cameraPosition.distance);
     }
-    else {
-      this.camera.setArmRotation(1.0, 0.5);
-      this.camera.setArmLength(1.7);
+
+    // colors
+    if (options.axisColor !== undefined)        this.axisColor = options.axisColor;
+    if (options.gridColor !== undefined)        this.gridColor = options.gridColor;
+    if (options.dataColor) {
+      if (typeof options.dataColor === 'string') {
+        this.dataColor.fill = options.dataColor;
+        this.dataColor.stroke = options.dataColor;
+      }
+      else {
+        if (options.dataColor.fill) {
+          this.dataColor.fill = options.dataColor.fill;
+        }
+        if (options.dataColor.stroke) {
+          this.dataColor.stroke = options.dataColor.stroke;
+        }
+        if (options.dataColor.strokeWidth !== undefined) {
+          this.dataColor.strokeWidth = options.dataColor.strokeWidth;
+        }
+      }
     }
+    this._setBackgroundColor(options.backgroundColor);
   }
 
-  this._setBackgroundColor(options && options.backgroundColor);
-
   this.setSize(this.width, this.height);
 
   // re-load the data
@@ -996,14 +1017,14 @@ Graph3d.prototype._redrawLegend = function() {
       ctx.stroke();
     }
 
-    ctx.strokeStyle =  this.colorAxis;
+    ctx.strokeStyle =  this.axisColor;
     ctx.strokeRect(left, top, widthMax, height);
   }
 
   if (this.style === Graph3d.STYLE.DOTSIZE) {
     // draw border around color bar
-    ctx.strokeStyle =  this.colorAxis;
-    ctx.fillStyle =  this.colorDot;
+    ctx.strokeStyle =  this.axisColor;
+    ctx.fillStyle =  this.dataColor.fill;
     ctx.beginPath();
     ctx.moveTo(left, top);
     ctx.lineTo(right, top);
@@ -1033,7 +1054,7 @@ Graph3d.prototype._redrawLegend = function() {
 
       ctx.textAlign = 'right';
       ctx.textBaseline = 'middle';
-      ctx.fillStyle = this.colorAxis;
+      ctx.fillStyle = this.axisColor;
       ctx.fillText(step.getCurrent(), left - 2 * gridLineLen, y);
 
       step.next();
@@ -1149,7 +1170,7 @@ Graph3d.prototype._redrawAxis = function() {
     if (this.showGrid) {
       from = this._convert3Dto2D(new Point3d(x, this.yMin, this.zMin));
       to = this._convert3Dto2D(new Point3d(x, this.yMax, this.zMin));
-      ctx.strokeStyle = this.colorGrid;
+      ctx.strokeStyle = this.gridColor;
       ctx.beginPath();
       ctx.moveTo(from.x, from.y);
       ctx.lineTo(to.x, to.y);
@@ -1158,7 +1179,7 @@ Graph3d.prototype._redrawAxis = function() {
     else {
       from = this._convert3Dto2D(new Point3d(x, this.yMin, this.zMin));
       to = this._convert3Dto2D(new Point3d(x, this.yMin+gridLenX, this.zMin));
-      ctx.strokeStyle = this.colorAxis;
+      ctx.strokeStyle = this.axisColor;
       ctx.beginPath();
       ctx.moveTo(from.x, from.y);
       ctx.lineTo(to.x, to.y);
@@ -1166,7 +1187,7 @@ Graph3d.prototype._redrawAxis = function() {
 
       from = this._convert3Dto2D(new Point3d(x, this.yMax, this.zMin));
       to = this._convert3Dto2D(new Point3d(x, this.yMax-gridLenX, this.zMin));
-      ctx.strokeStyle = this.colorAxis;
+      ctx.strokeStyle = this.axisColor;
       ctx.beginPath();
       ctx.moveTo(from.x, from.y);
       ctx.lineTo(to.x, to.y);
@@ -1188,7 +1209,7 @@ Graph3d.prototype._redrawAxis = function() {
       ctx.textAlign = 'left';
       ctx.textBaseline = 'middle';
     }
-    ctx.fillStyle = this.colorAxis;
+    ctx.fillStyle = this.axisColor;
     ctx.fillText('  ' + this.xValueLabel(step.getCurrent()) + '  ', text.x, text.y);    
 
     step.next();
@@ -1206,7 +1227,7 @@ Graph3d.prototype._redrawAxis = function() {
     if (this.showGrid) {
       from = this._convert3Dto2D(new Point3d(this.xMin, step.getCurrent(), this.zMin));
       to = this._convert3Dto2D(new Point3d(this.xMax, step.getCurrent(), this.zMin));
-      ctx.strokeStyle = this.colorGrid;
+      ctx.strokeStyle = this.gridColor;
       ctx.beginPath();
       ctx.moveTo(from.x, from.y);
       ctx.lineTo(to.x, to.y);
@@ -1215,7 +1236,7 @@ Graph3d.prototype._redrawAxis = function() {
     else {
       from = this._convert3Dto2D(new Point3d(this.xMin, step.getCurrent(), this.zMin));
       to = this._convert3Dto2D(new Point3d(this.xMin+gridLenY, step.getCurrent(), this.zMin));
-      ctx.strokeStyle = this.colorAxis;
+      ctx.strokeStyle = this.axisColor;
       ctx.beginPath();
       ctx.moveTo(from.x, from.y);
       ctx.lineTo(to.x, to.y);
@@ -1223,7 +1244,7 @@ Graph3d.prototype._redrawAxis = function() {
 
       from = this._convert3Dto2D(new Point3d(this.xMax, step.getCurrent(), this.zMin));
       to = this._convert3Dto2D(new Point3d(this.xMax-gridLenY, step.getCurrent(), this.zMin));
-      ctx.strokeStyle = this.colorAxis;
+      ctx.strokeStyle = this.axisColor;
       ctx.beginPath();
       ctx.moveTo(from.x, from.y);
       ctx.lineTo(to.x, to.y);
@@ -1245,7 +1266,7 @@ Graph3d.prototype._redrawAxis = function() {
       ctx.textAlign = 'left';
       ctx.textBaseline = 'middle';
     }
-    ctx.fillStyle = this.colorAxis;
+    ctx.fillStyle = this.axisColor;
     ctx.fillText('  ' + this.yValueLabel(step.getCurrent()) + '  ', text.x, text.y);    
 
     step.next();
@@ -1264,7 +1285,7 @@ Graph3d.prototype._redrawAxis = function() {
   while (!step.end()) {
     // TODO: make z-grid lines really 3d?
     from = this._convert3Dto2D(new Point3d(xText, yText, step.getCurrent()));
-    ctx.strokeStyle = this.colorAxis;
+    ctx.strokeStyle = this.axisColor;
     ctx.beginPath();
     ctx.moveTo(from.x, from.y);
     ctx.lineTo(from.x - textMargin, from.y);
@@ -1272,7 +1293,7 @@ Graph3d.prototype._redrawAxis = function() {
 
     ctx.textAlign = 'right';
     ctx.textBaseline = 'middle';
-    ctx.fillStyle = this.colorAxis;
+    ctx.fillStyle = this.axisColor;
     ctx.fillText(this.zValueLabel(step.getCurrent()) + ' ', from.x - 5, from.y);
 
     step.next();
@@ -1280,7 +1301,7 @@ Graph3d.prototype._redrawAxis = function() {
   ctx.lineWidth = 1;
   from = this._convert3Dto2D(new Point3d(xText, yText, this.zMin));
   to = this._convert3Dto2D(new Point3d(xText, yText, this.zMax));
-  ctx.strokeStyle = this.colorAxis;
+  ctx.strokeStyle = this.axisColor;
   ctx.beginPath();
   ctx.moveTo(from.x, from.y);
   ctx.lineTo(to.x, to.y);
@@ -1291,7 +1312,7 @@ Graph3d.prototype._redrawAxis = function() {
   // line at yMin
   xMin2d = this._convert3Dto2D(new Point3d(this.xMin, this.yMin, this.zMin));
   xMax2d = this._convert3Dto2D(new Point3d(this.xMax, this.yMin, this.zMin));
-  ctx.strokeStyle = this.colorAxis;
+  ctx.strokeStyle = this.axisColor;
   ctx.beginPath();
   ctx.moveTo(xMin2d.x, xMin2d.y);
   ctx.lineTo(xMax2d.x, xMax2d.y);
@@ -1299,7 +1320,7 @@ Graph3d.prototype._redrawAxis = function() {
   // line at ymax
   xMin2d = this._convert3Dto2D(new Point3d(this.xMin, this.yMax, this.zMin));
   xMax2d = this._convert3Dto2D(new Point3d(this.xMax, this.yMax, this.zMin));
-  ctx.strokeStyle = this.colorAxis;
+  ctx.strokeStyle = this.axisColor;
   ctx.beginPath();
   ctx.moveTo(xMin2d.x, xMin2d.y);
   ctx.lineTo(xMax2d.x, xMax2d.y);
@@ -1310,7 +1331,7 @@ Graph3d.prototype._redrawAxis = function() {
   // line at xMin
   from = this._convert3Dto2D(new Point3d(this.xMin, this.yMin, this.zMin));
   to = this._convert3Dto2D(new Point3d(this.xMin, this.yMax, this.zMin));
-  ctx.strokeStyle = this.colorAxis;
+  ctx.strokeStyle = this.axisColor;
   ctx.beginPath();
   ctx.moveTo(from.x, from.y);
   ctx.lineTo(to.x, to.y);
@@ -1318,7 +1339,7 @@ Graph3d.prototype._redrawAxis = function() {
   // line at xMax
   from = this._convert3Dto2D(new Point3d(this.xMax, this.yMin, this.zMin));
   to = this._convert3Dto2D(new Point3d(this.xMax, this.yMax, this.zMin));
-  ctx.strokeStyle = this.colorAxis;
+  ctx.strokeStyle = this.axisColor;
   ctx.beginPath();
   ctx.moveTo(from.x, from.y);
   ctx.lineTo(to.x, to.y);
@@ -1343,7 +1364,7 @@ Graph3d.prototype._redrawAxis = function() {
       ctx.textAlign = 'left';
       ctx.textBaseline = 'middle';
     }
-    ctx.fillStyle = this.colorAxis;
+    ctx.fillStyle = this.axisColor;
     ctx.fillText(xLabel, text.x, text.y);
   }
 
@@ -1366,7 +1387,7 @@ Graph3d.prototype._redrawAxis = function() {
       ctx.textAlign = 'left';
       ctx.textBaseline = 'middle';
     }
-    ctx.fillStyle = this.colorAxis;
+    ctx.fillStyle = this.axisColor;
     ctx.fillText(yLabel, text.x, text.y);
   }
 
@@ -1380,7 +1401,7 @@ Graph3d.prototype._redrawAxis = function() {
     text = this._convert3Dto2D(new Point3d(xText, yText, zText));
     ctx.textAlign = 'right';
     ctx.textBaseline = 'middle';
-    ctx.fillStyle = this.colorAxis;
+    ctx.fillStyle = this.axisColor;
     ctx.fillText(zLabel, text.x - offset, text.y);
   }
 };
@@ -1425,6 +1446,8 @@ Graph3d.prototype._redrawDataGrid = function() {
     topSideVisible, fillStyle, strokeStyle, lineWidth,
     h, s, v, zAvg;
 
+  ctx.lineJoin = 'round';
+  ctx.lineCap = 'round';
 
   if (this.dataPoints === undefined || this.dataPoints.length <= 0)
     return; // TODO: throw exception?
@@ -1488,16 +1511,15 @@ Graph3d.prototype._redrawDataGrid = function() {
           else  {
             v = 1;
             fillStyle = this._hsv2rgb(h, s, v);
-            strokeStyle = this.colorAxis;
+            strokeStyle = this.axisColor;
           }
         }
         else {
           fillStyle = 'gray';
-          strokeStyle = this.colorAxis;
+          strokeStyle = this.axisColor;
         }
-        lineWidth = 0.5;
 
-        ctx.lineWidth = lineWidth;
+        ctx.lineWidth = this._getStrokeWidth(point);
         ctx.fillStyle = fillStyle;
         ctx.strokeStyle = strokeStyle;
         ctx.beginPath();
@@ -1517,21 +1539,12 @@ Graph3d.prototype._redrawDataGrid = function() {
       right = this.dataPoints[i].pointRight;
       top   = this.dataPoints[i].pointTop;
 
-      if (point !== undefined) {
-        if (this.showPerspective) {
-          lineWidth = 2 / -point.trans.z;
-        }
-        else {
-          lineWidth = 2 * -(this.eye.z / this.camera.getArmLength());
-        }
-      }
-
       if (point !== undefined && right !== undefined) {
         // calculate Hue from the current value. At zMin the hue is 240, at zMax the hue is 0
         zAvg = (point.point.z + right.point.z) / 2;
         h = (1 - (zAvg - this.zMin) * this.scale.z  / this.verticalRatio) * 240;
 
-        ctx.lineWidth = lineWidth;
+        ctx.lineWidth = this._getStrokeWidth(point) * 2;
         ctx.strokeStyle = this._hsv2rgb(h, 1, 1);
         ctx.beginPath();
         ctx.moveTo(point.screen.x, point.screen.y);
@@ -1544,7 +1557,7 @@ Graph3d.prototype._redrawDataGrid = function() {
         zAvg = (point.point.z + top.point.z) / 2;
         h = (1 - (zAvg - this.zMin) * this.scale.z  / this.verticalRatio) * 240;
 
-        ctx.lineWidth = lineWidth;
+        ctx.lineWidth = this._getStrokeWidth(point) * 2;
         ctx.strokeStyle = this._hsv2rgb(h, 1, 1);
         ctx.beginPath();
         ctx.moveTo(point.screen.x, point.screen.y);
@@ -1555,6 +1568,18 @@ Graph3d.prototype._redrawDataGrid = function() {
   }
 };
 
+Graph3d.prototype._getStrokeWidth = function(point) {
+  if (point !== undefined) {
+    if (this.showPerspective) {
+      return 1 / -point.trans.z * this.dataColor.strokeWidth;
+    }
+    else {
+      return -(this.eye.z / this.camera.getArmLength()) * this.dataColor.strokeWidth;
+    }
+  }
+
+  return this.dataColor.strokeWidth;
+};
 
 /**
  * Draw all datapoints as dots.
@@ -1596,7 +1621,7 @@ Graph3d.prototype._redrawDataDot = function() {
       //var from = this._convert3Dto2D(new Point3d(point.point.x, point.point.y, this.zMin));
       var from = this._convert3Dto2D(point.bottom);
       ctx.lineWidth = 1;
-      ctx.strokeStyle = this.colorGrid;
+      ctx.strokeStyle = this.gridColor;
       ctx.beginPath();
       ctx.moveTo(from.x, from.y);
       ctx.lineTo(point.screen.x, point.screen.y);
@@ -1631,8 +1656,8 @@ Graph3d.prototype._redrawDataDot = function() {
       borderColor = this._hsv2rgb(hue, 1, 0.8);
     }
     else if (this.style === Graph3d.STYLE.DOTSIZE) {
-      color = this.colorDot;
-      borderColor = this.colorDotBorder;
+      color = this.dataColor.fill;
+      borderColor = this.dataColor.stroke;
     }
     else {
       // calculate Hue from the current value. At zMin the hue is 240, at zMax the hue is 0
@@ -1642,7 +1667,7 @@ Graph3d.prototype._redrawDataDot = function() {
     }
 
     // draw the circle
-    ctx.lineWidth = 1.0;
+    ctx.lineWidth = this._getStrokeWidth(point);
     ctx.strokeStyle = borderColor;
     ctx.fillStyle = color;
     ctx.beginPath();
@@ -1682,6 +1707,9 @@ Graph3d.prototype._redrawDataBar = function() {
   };
   this.dataPoints.sort(sortDepth);
 
+  ctx.lineJoin = 'round';
+  ctx.lineCap = 'round';
+
   // draw the datapoints as bars
   var xWidth = this.xBarWidth / 2;
   var yWidth = this.yBarWidth / 2;
@@ -1697,8 +1725,8 @@ Graph3d.prototype._redrawDataBar = function() {
       borderColor = this._hsv2rgb(hue, 1, 0.8);
     }
     else if (this.style === Graph3d.STYLE.BARSIZE) {
-      color = this.colorDot;
-      borderColor = this.colorDotBorder;
+      color = this.dataColor.fill;
+      borderColor = this.dataColor.stroke;
     }
     else {
       // calculate Hue from the current value. At zMin the hue is 240, at zMax the hue is 0
@@ -1771,7 +1799,7 @@ Graph3d.prototype._redrawDataBar = function() {
     });
 
     // draw the ordered surfaces
-    ctx.lineWidth = 1;
+    ctx.lineWidth = this._getStrokeWidth(point);
     ctx.strokeStyle = borderColor;
     ctx.fillStyle = color;
     // NOTE: we start at j=2 instead of j=0 as we don't need to draw the two surfaces at the backside
@@ -1816,20 +1844,20 @@ Graph3d.prototype._redrawDataLine = function() {
   if (this.dataPoints.length > 0) {
     point = this.dataPoints[0];
 
-    ctx.lineWidth = 1;    // TODO: make customizable
-    ctx.strokeStyle = 'blue'; // TODO: make customizable
+    ctx.lineWidth = this._getStrokeWidth(point);
+    ctx.lineJoin = 'round';
+    ctx.lineCap = 'round';
+    ctx.strokeStyle = this.dataColor.stroke;
     ctx.beginPath();
     ctx.moveTo(point.screen.x, point.screen.y);
-  }
 
-  // draw the datapoints as colored circles
-  for (i = 1; i < this.dataPoints.length; i++) {
-    point = this.dataPoints[i];
-    ctx.lineTo(point.screen.x, point.screen.y);
-  }
+    // draw the datapoints as colored circles
+    for (i = 1; i < this.dataPoints.length; i++) {
+      point = this.dataPoints[i];
+      ctx.lineTo(point.screen.x, point.screen.y);
+    }
 
-  // finish the line
-  if (this.dataPoints.length > 0) {
+    // finish the line
     ctx.stroke();
   }
 };