diff --git a/examples/html/line-chart-with-slider.html b/examples/html/line-chart-with-slider.html
index 4651314..a680418 100644
--- a/examples/html/line-chart-with-slider.html
+++ b/examples/html/line-chart-with-slider.html
@@ -45,13 +45,6 @@
 
         // set components data and options
         components: {
-          slider: {
-            options: {
-              orientation: 'horizontal',
-              handleWidth: 60,
-              handleHeight: 15
-            }
-          },
           lineSeries: {
             data: data          
           }
diff --git a/src/Chart.js b/src/Chart.js
index ea9a0fd..8ff3d12 100644
--- a/src/Chart.js
+++ b/src/Chart.js
@@ -16,7 +16,6 @@ var MeteorChart;
     this.layout = config.layout(this);
     this.theme = config.theme;
     this.interaction = config.interaction;
-    this.options = config.options;
     this._components = config.components;
     this.components = [];
 
@@ -95,18 +94,7 @@ var MeteorChart;
           component = this._components[id];
 
       if (component) {
-
-        // decorate options 
-        if (!conf.options) {
-          conf.options = {};
-        }
-
-        if (component.options) {
-          conf.options = MeteorChart.Util.merge(conf.options, component.options);
-        }  
-
         // decorate data
-
         if (component.data) {
           conf.data = function() {
             return component.data;
diff --git a/src/Component.js b/src/Component.js
index ad0e15e..f95d6d3 100644
--- a/src/Component.js
+++ b/src/Component.js
@@ -5,7 +5,6 @@
     this.className = config.name;
     this.id = config.id;
     this.name = config.name;
-    this.options = config.options || {};
     this.dependencies = config.dependencies || {};
 
     // binding functions
diff --git a/src/components/Axis.js b/src/components/Axis.js
index f3563db..e1f15d3 100644
--- a/src/components/Axis.js
+++ b/src/components/Axis.js
@@ -9,13 +9,13 @@
       var that = this,
           chart = this.chart,
           data = this.data(),
-          options = this.options,
+          style = this.style(),
           min = data.min,
           max = data.max,
           diff = max - min,
-          scale = (this.options.orientation === 'vertical' ? this.height() : this.width()) / diff,
+          scale = (style.orientation === 'vertical' ? this.height() : this.width()) / diff,
           offset = 0,
-          formatter = new MeteorChart.Formatters[options.unit || 'Number'](data.min, data.max, this.options.maxNumLabels || 5),
+          formatter = new MeteorChart.Formatters[style.unit || 'Number'](data.min, data.max, style.maxNumLabels || 5),
           increment = formatter.increment;
 
       this.innerContent.innerHTML = '';
@@ -44,7 +44,7 @@
       text.style.color = theme.primary;
       this.innerContent.appendChild(text);
 
-      if (this.options.orientation === 'vertical') {
+      if (this.style().orientation === 'vertical') {
         text.style.top = this.height() - offset - (MeteorChart.Dom.getTextHeight(val) /2);
         text.style.left = 0;
       }
diff --git a/src/components/Circle.js b/src/components/Circle.js
index dffd02a..19bdeb7 100644
--- a/src/components/Circle.js
+++ b/src/components/Circle.js
@@ -15,11 +15,12 @@
     },
     render: function() {
       var data = this.data(),
+          style = this.style(),
           strokeWidth, radius;
 
       if (data) {
-        radius = data.radius;
-        strokeWidth = data.strokeWidth;
+        radius = style.radius;
+        strokeWidth = style.strokeWidth;
 
         this.svg.setAttribute('width', (radius * 2) + strokeWidth);
         this.svg.setAttribute('height', (radius * 2) + strokeWidth);
@@ -28,8 +29,8 @@
         this.circle.setAttribute('cx', radius + strokeWidth / 2);
         this.circle.setAttribute('cy', radius + strokeWidth / 2);
         this.circle.setAttribute('r', radius);
-        this.circle.setAttribute('fill', data.fill);
-        this.circle.setAttribute('stroke', data.stroke);
+        this.circle.setAttribute('fill', style.fill);
+        this.circle.setAttribute('stroke', style.stroke);
         this.circle.setAttribute('stroke-width', strokeWidth);
       }
     }
diff --git a/src/components/GridLines.js b/src/components/GridLines.js
index 6a9ad4a..b5d4f4b 100644
--- a/src/components/GridLines.js
+++ b/src/components/GridLines.js
@@ -10,9 +10,9 @@
     render: function() {
       var theme = this.chart.theme,
           font = theme.font,
-          orientation = this.options.orientation || 'horizontal',
+          orientation = this.style().orientation || 'horizontal',
           data = this.data(),
-          lineWidth = this.options.lineWidth,
+          lineWidth = this.style().lineWidth,
           context = this.context,
           width = this.width(),
           height = this.height(),
diff --git a/src/components/Slider.js b/src/components/Slider.js
index 2970f3a..addb2b7 100644
--- a/src/components/Slider.js
+++ b/src/components/Slider.js
@@ -1,7 +1,7 @@
 (function() {
   MeteorChart.Component.extend('Slider', {
     init: function() {
-      var showTrack = this.options.showTrack;
+      var showTrack = this.style().showTrack;
 
       // default
       if (showTrack === undefined) {
@@ -24,13 +24,12 @@
     render: function() {
       var handle = this.handle,
           track = this.track,
-          options = this.options,
           style = this.style(),
           theme = this.chart.theme,
-          handleWidth = options.handleWidth,
-          handleHeight = options.handleHeight,
+          handleWidth = style.handleWidth,
+          handleHeight = style.handleHeight,
           trackSize = 1,
-          showTrack = this.options.showTrack;
+          showTrack = style.showTrack;
 
       // default
       if (showTrack === undefined) {
@@ -48,7 +47,7 @@
         track.style.backgroundColor = theme.secondary, 0.1;
       }
 
-      if (options.orientation === 'vertical') {
+      if (style.orientation === 'vertical') {
         handle.style.top = 0;
         handle.style.left = 0;
 
@@ -77,7 +76,7 @@
       var that = this,
           handle = this.handle,
           chartContent = this.chart.content,
-          orientation = this.options.orientation || 'horizontal',
+          orientation = this.style().orientation || 'horizontal',
           startOffsetPos = null,
           startPointerPos = null;
 
@@ -104,7 +103,7 @@
           var diff, newOffset;
 
           if (orientation === 'horizontal') {
-            diff = that.width() - that.options.handleWidth;
+            diff = that.width() - that.style().handleWidth;
             pointerPos = evt.clientX;
             newOffset = pointerPos - startPointerPos + startOffsetPos;
             if (newOffset < 0) {
@@ -116,7 +115,7 @@
             handle.style.left = newOffset;
           }
           else {
-            diff = that.height() - that.options.handleHeight;
+            diff = that.height() - that.style().handleHeight;
             pointerPos = evt.clientY;
             newOffset = pointerPos - startPointerPos + startOffsetPos;
             if (newOffset < 0) {
@@ -156,11 +155,11 @@
   });
 
   MeteorChart.Util.addMethod(MeteorChart.Components.Slider, 'width', function() {
-    return this.options.handleWidth;
+    return this.style().handleWidth;
   });
 
   MeteorChart.Util.addMethod(MeteorChart.Components.Slider, 'height', function() {
-    return this.options.handleHeight;
+    return this.style().handleHeight;
   });
 
 })();
\ No newline at end of file
diff --git a/src/layouts/InteractiveLineChartWithSliders.js b/src/layouts/InteractiveLineChartWithSliders.js
index 4090f8f..a3fd47b 100644
--- a/src/layouts/InteractiveLineChartWithSliders.js
+++ b/src/layouts/InteractiveLineChartWithSliders.js
@@ -17,10 +17,12 @@
           width: function() {
             return chart.components.lineSeries.width();
           },
-          options: {
-            orientation: 'horizontal',
-            handleWidth: 30,
-            handleHeight: 12
+          style: function() {
+            return {
+              orientation: 'horizontal',
+              handleWidth: 30,
+              handleHeight: 12
+            }
           }
         }, 
         {
@@ -37,10 +39,12 @@
 
             return components.lineSeries.height() + chart.padding() + components.inspectSlider.height();
           },
-          options: {
-            orientation: 'vertical',
-            handleWidth: 12,
-            handleHeight: 30
+          style: function() {
+            return {
+              orientation: 'vertical',
+              handleWidth: 12,
+              handleHeight: 30
+            }
           }
         }, 
         {
@@ -89,8 +93,10 @@
               max: viewport.maxY
             }
           },
-          options: {
-            orientation: 'vertical'
+          style: function() {
+            return {
+              orientation: 'vertical'
+            }
           }
         },
         {
@@ -118,8 +124,10 @@
               max: viewport.maxX
             }
           },
-          options: {
-            maxIncrements: 5
+          style: function() {
+            return {
+              maxIncrements: 5
+            }
           }
         },
         {
@@ -128,7 +136,7 @@
           x: MeteorChart.Event.map({type: 'dragmove', id: 'inspectSlider'}, function(evt) {
             var offset = evt && evt.offset ? evt.offset : 0,
                 inspectSlider = chart.components.inspectSlider;
-            return offset + inspectSlider.x() + (inspectSlider.options.handleWidth - chart.components.inspectLine.width())/ 2;
+            return offset + inspectSlider.x() + (inspectSlider.style().handleWidth - chart.components.inspectLine.width())/ 2;
           }, chart, 'inspectLine'),
           y: function() {
             return chart.padding();
@@ -150,10 +158,11 @@
           name: 'Circle',
           x: function() {
             var data = this.data(),
+                style = this.style(),
                 lineSeries = chart.components.lineSeries;
 
             if (data) {
-              return lineSeries.dataToChartX(data.x) + lineSeries.x() - data.radius - (data.strokeWidth/2);
+              return lineSeries.dataToChartX(data.x) + lineSeries.x() - style.radius - (style.strokeWidth/2);
             }
             else {
               return 0;
@@ -161,27 +170,32 @@
           },
           y: function() {
             var data = this.data(),
+                style = this.style(),
                 lineSeries = chart.components.lineSeries;
 
             if (data) {
-              return lineSeries.dataToChartY(data.y) + lineSeries.y() - data.radius - (data.strokeWidth/2);
+              return lineSeries.dataToChartY(data.y) + lineSeries.y() - style.radius - (style.strokeWidth/2);
             }
             else {
               return 0;
             }
           },
+          style: function() {
+            var dataColor = MeteorChart.Color.getDataColor(chart.theme.data, 0);
+            return {
+              fill: MeteorChart.Color.hexToRgba(dataColor, 0.3),
+              stroke: dataColor,
+              radius: 16,
+              strokeWidth: 2
+            }
+          },
           data: MeteorChart.Event.map({type: 'dragmove', id: 'inspectSlider'}, function(evt) {            
-            var nearestPoint = chart.components.lineSeries.getSeriesNearestPointX(0, evt.offset),
-                dataColor = MeteorChart.Color.getDataColor(chart.theme.data, 0);
+            var nearestPoint = chart.components.lineSeries.getSeriesNearestPointX(0, evt.offset);
 
             if (nearestPoint) {
               return {
                 x: nearestPoint.x,
                 y: nearestPoint.y,
-                fill: MeteorChart.Color.hexToRgba(dataColor, 0.3),
-                stroke: dataColor,
-                radius: 16,
-                strokeWidth: 2
               };
             }
             else {
@@ -193,24 +207,22 @@
           id: 'inspectSlider',
           name: 'Slider',
           x: function() {
-            return chart.components.lineSeries.x() - (this.options.handleWidth) / 2;
+            return chart.components.lineSeries.x() - (this.style().handleWidth) / 2;
           },
           y: function() {
             return chart.padding();
           },
           width: function() {
-            return chart.components.lineSeries.width() + this.options.handleWidth;
+            return chart.components.lineSeries.width() + this.style().handleWidth;
           },
           style: function() {
             return {
-              handleFill: '#3fa9f5' // blue
+              handleFill: '#3fa9f5', // blue
+              orientation: 'horizontal',
+              showTrack: false,
+              handleWidth: 12,
+              handleHeight: 30
             }
-          },
-          options: {
-            orientation: 'horizontal',
-            showTrack: false,
-            handleWidth: 12,
-            handleHeight: 30
           }
         }
       ]
diff --git a/src/layouts/LineChartWithGrid.js b/src/layouts/LineChartWithGrid.js
index 551bb46..9a17558 100644
--- a/src/layouts/LineChartWithGrid.js
+++ b/src/layouts/LineChartWithGrid.js
@@ -20,9 +20,11 @@
           data: MeteorChart.Event.map({type: 'labelOffsetsChange', id: 'xAxis'}, function(evt) {
             return evt.labelOffsets;
           }, chart, 'verticalGridLines'),
-          options: {
-            orientation: 'vertical',
-            lineWidth: 2
+          style: function() {
+            return {
+              orientation: 'vertical',
+              lineWidth: 2
+            };
           }
         },
         {
@@ -43,9 +45,11 @@
           data: MeteorChart.Event.map({type: 'labelOffsetsChange', id: 'yAxis'}, function(evt) {
             return evt.labelOffsets;
           }, chart, 'horizontalGridLines'),
-          options: {
-            orientation: 'horizontal',
-            lineWidth: 2
+          style: function() {
+            return {
+              orientation: 'horizontal',
+              lineWidth: 2
+            };
           }
         },
         {
@@ -96,8 +100,10 @@
               max: viewport.maxX,
             }
           },
-          options: {
-            maxIncrements: 5
+          style: function() {
+            return {
+              maxIncrements: 5
+            };
           }
         },
         {
@@ -124,8 +130,10 @@
               max: viewport.maxY
             }
           },
-          options: {
-            orientation: 'vertical'
+          style: function() {
+            return {
+              orientation: 'vertical'
+            };
           }
         }   
       ]
diff --git a/src/layouts/LineChartWithSlider.js b/src/layouts/LineChartWithSlider.js
index dd33c7b..7aaa27a 100644
--- a/src/layouts/LineChartWithSlider.js
+++ b/src/layouts/LineChartWithSlider.js
@@ -19,8 +19,12 @@
             // bind axis width to line width
             return this.chart.components.lineSeries.width();
           },
-          options: {
-            orientation: 'horizontal'
+          style: function() {
+            return {
+              orientation: 'horizontal',
+              handleWidth: 60,
+              handleHeight: 15
+            };
           }
         }, 
         {
@@ -66,8 +70,10 @@
               max: viewport.maxY
             }
           },
-          options: {
-            orientation: 'vertical'
+          style: function() {
+            return {
+              orientation: 'vertical'
+            };
           }
         },
         {
@@ -95,8 +101,10 @@
               max: viewport.maxX
             }
           },
-          options: {
-            maxIncrements: 5
+          style: function() {
+            return {
+              maxIncrements: 5
+            };
           }
         }
       ]
diff --git a/src/layouts/LineChartWithTitle.js b/src/layouts/LineChartWithTitle.js
index de9a298..15bb811 100644
--- a/src/layouts/LineChartWithTitle.js
+++ b/src/layouts/LineChartWithTitle.js
@@ -49,8 +49,10 @@
               max: viewport.maxY
             }
           },
-          options: {
-            orientation: 'vertical'
+          style: function() {
+            return {
+              orientation: 'vertical'
+            };
           }
         },
         {
@@ -80,8 +82,10 @@
               max: viewport.maxX
             }
           },
-          options: {
-            maxIncrements: 5
+          style: function() {
+            return {
+              maxIncrements: 5
+            };
           }
         },
         {
diff --git a/src/layouts/StandardLineChart.js b/src/layouts/StandardLineChart.js
index 139bab0..9a1f254 100644
--- a/src/layouts/StandardLineChart.js
+++ b/src/layouts/StandardLineChart.js
@@ -46,8 +46,10 @@
               max: viewport.maxX
             };
           },
-          options: {
-            maxIncrements: 5
+          style: function() {
+            return {
+              maxIncrements: 5
+            };
           }
         },
         {
@@ -74,9 +76,11 @@
               max: viewport.maxY
             };
           },
-          options: {
-            orientation: 'vertical',
-            maxIncrements: 5
+          style: function() {
+            return {
+              orientation: 'vertical',
+              maxIncrements: 5
+            };
           }
         }
       ]