diff --git a/bargauge/addandremovevalues/App.vue b/bargauge/addandremovevalues/App.vue
index 074b046d..9d239b3e 100644
--- a/bargauge/addandremovevalues/App.vue
+++ b/bargauge/addandremovevalues/App.vue
@@ -1,19 +1,18 @@
 <template>
     <div>
         <JqxBarGauge :theme="'material'" ref="myBarGauge" style="float: left"
-                     :width="getWidth" :height="600" :relativeInnerRadius="0.2" :max="500"
+                     :width="getWidth" :height="450" :relativeInnerRadius="0.2" :max="500"
                      :values="[450, 15, 330]" :baseValue="50" :startAngle="0" :endAngle="360"
                      :title="'Nutritional Values'" :colorScheme="'scheme05'" :tooltip="tooltip"
                      :barSpacing="9" :animationDuration="0" :labels="labels">
         </JqxBarGauge>
 
-        <div style="margin-left: 50px; margin-top: 150px; float: left;">
+        <div style="margin-left: 50px;">
             <JqxListBox :theme="'material'" ref="myListBox" @checkChange="onCheckChange()"
                         :width="230" :source="dataAdapter" :displayMember="'name'"
                         :valueMember="'calories'" :checkboxes="true">
             </JqxListBox>
 
-            <br />
             <br />
             <div ref='log'>
                 <strong>Summary calories: 970</strong>
diff --git a/bargauge/autochangevalue/App.vue b/bargauge/autochangevalue/App.vue
index 4a9533a2..40970462 100644
--- a/bargauge/autochangevalue/App.vue
+++ b/bargauge/autochangevalue/App.vue
@@ -40,7 +40,9 @@
             onDrawEnd: function () {
                 let values = [this.getRandomInt(1, 99)];
                 setTimeout(() => {
-                    this.$refs.myBarGauge.val(values);
+                    if (this.$refs.myBarGauge) {
+                        this.$refs.myBarGauge.val(values);
+                    }
                 }, 1000);
             },
             getRandomInt: function (min, max) {
diff --git a/bulletchart/settings/App.vue b/bulletchart/settings/App.vue
index 0b7902a0..81914f97 100644
--- a/bulletchart/settings/App.vue
+++ b/bulletchart/settings/App.vue
@@ -5,8 +5,8 @@
                         :title="'Revenue 2014 YTD'" :description="'(U.S. $ in thousands)'" :animationDuration="0"
                         :pointer="pointer" :target="target" :labelsFormat="'c'" :showToolTip="true">
         </JqxBulletChart>
-        <JqxExpander :theme="'material'" style="float: left; margin-left: 60px"
-                     :width="210" :height="550" :toggleMode="'none'" :showArrow="false">
+        <JqxExpander :theme="'material'" style="float: left; margin-top: 60px"
+                     :width="210" :height="570" :toggleMode="'none'" :showArrow="false">
 
             <div>jqxBulletChart Settings</div>
             <div>
@@ -197,6 +197,4 @@
 </script>
 
 <style>
-  
-  
 </style>
\ No newline at end of file
diff --git a/chart/100stackedareaseries/App.vue b/chart/100stackedareaseries/App.vue
index 86730f06..0d7e1b57 100644
--- a/chart/100stackedareaseries/App.vue
+++ b/chart/100stackedareaseries/App.vue
@@ -1,6 +1,6 @@
 <template>
     <div>
-        <JqxChart :theme="'material'" style="width: 850px; height: 500px"
+        <JqxChart :theme="'material'" style="width: 90%; height: 500px"
                   :title="'Web Traffic Analysis'" :description="'Unique monthly site visitors (percentage stacked)'"
                   :titlePadding="titlePadding" :source="dataAdapter" :xAxis="xAxis"
                   :valueAxis="valueAxis" :colorScheme="'scheme06'" :seriesGroups="seriesGroups">
diff --git a/chart/100stackedcolumns/App.vue b/chart/100stackedcolumns/App.vue
index c30b62fa..16625e0a 100644
--- a/chart/100stackedcolumns/App.vue
+++ b/chart/100stackedcolumns/App.vue
@@ -1,6 +1,6 @@
 <template>
     <div>
-        <JqxChart :theme="'material'" style="width: 850px; height: 500px"
+        <JqxChart :theme="'material'" style="width: 90%; height: 500px"
                   :title="'Fitness & exercise weekly scorecard'" :description="'Time spent in vigorous exercise by activity'"
                   :showLegend="true" :enableAnimations="true" :padding="padding"
                   :titlePadding="titlePadding" :source="sampleData" :xAxis="xAxis"
diff --git a/chart/100stackedlineseries/App.vue b/chart/100stackedlineseries/App.vue
index 3bb61570..ea0cb983 100644
--- a/chart/100stackedlineseries/App.vue
+++ b/chart/100stackedlineseries/App.vue
@@ -1,6 +1,6 @@
 <template>
     <div>
-        <JqxChart :theme="'material'" style="width: 850px; height: 500px"
+        <JqxChart :theme="'material'" style="width: 90%; height: 500px"
                   :title="'Web Site Traffic Analysis'" :description="'Monthly unique visitors (percentage stacked)'"
                   :showLegend="true" :enableAnimations="true" :padding="padding"
                   :titlePadding="titlePadding" :source="dataAdapter" :xAxis="xAxis"
diff --git a/chart/alternatingbackgroundcolor/App.vue b/chart/alternatingbackgroundcolor/App.vue
index 13d3d7a4..b0959142 100644
--- a/chart/alternatingbackgroundcolor/App.vue
+++ b/chart/alternatingbackgroundcolor/App.vue
@@ -1,6 +1,6 @@
 <template>
     <div>
-        <JqxChart :theme="'material'" ref="myChart" style="width: 850px; height: 500px"
+        <JqxChart :theme="'material'" ref="myChart" style="width: 90%; height: 500px"
                   :title="'Weather in Geneva, Switzerland'" :description="'Climatological Information about Geneva'"
                   :showLegend="true" :enableAnimations="true" :enableCrosshairs="true" :padding="padding"
                   :titlePadding="titlePadding" :source="data" :xAxis="xAxis"
diff --git a/chart/areaseries/App.vue b/chart/areaseries/App.vue
index ceeb8235..fc60b034 100644
--- a/chart/areaseries/App.vue
+++ b/chart/areaseries/App.vue
@@ -1,6 +1,6 @@
 <template>
     <div>
-        <JqxChart :theme="'material'" ref="myChart" style="width: 850px; height: 500px"
+        <JqxChart :theme="'material'" ref="myChart" style="width: 90%; height: 500px"
                   :title="'U.S. Stock Market Index Performance'" :description="'NASDAQ Composite compared to S&P 500'"
                   :showLegend="true" :enableAnimations="true" :enableCrosshairs="true" :padding="padding"
                   :titlePadding="titlePadding" :source="dataAdapter" :xAxis="xAxis"
diff --git a/chart/areasplineseries/App.vue b/chart/areasplineseries/App.vue
index 4d4ae4de..8278b6c8 100644
--- a/chart/areasplineseries/App.vue
+++ b/chart/areasplineseries/App.vue
@@ -1,6 +1,6 @@
 <template>
     <div>
-        <JqxChart :theme="'material'" ref="myChart" style="width: 850px; height: 500px"
+        <JqxChart :theme="'material'" ref="myChart" style="width: 90%; height: 500px"
                   :title="'U.S. History Home Prices (1950-2010)'" :description="'Source: http://www.econ.yale.edu/~shiller/data.htm'"
                   :showLegend="true" :enableAnimations="true" :padding="padding"
                   :titlePadding="titlePadding" :source="dataAdapter" :xAxis="xAxis"
diff --git a/chart/axiscustomoffsets/App.vue b/chart/axiscustomoffsets/App.vue
index 46e6e733..55bc3528 100644
--- a/chart/axiscustomoffsets/App.vue
+++ b/chart/axiscustomoffsets/App.vue
@@ -1,6 +1,6 @@
 <template>
     <div>
-        <JqxChart :theme="'material'" ref="myChart" style="width: 850px; height: 500px"
+        <JqxChart :theme="'material'" ref="myChart" style="width: 90%; height: 500px"
                   :title="'Custom labels, grid lines and tick marks offsets'" :description="''"
                   :enableAnimations="false" :padding="padding"
                   :titlePadding="titlePadding" :source="sampleData" :xAxis="xAxis"
diff --git a/chart/axiscustomoffsetsandcolorbands/App.vue b/chart/axiscustomoffsetsandcolorbands/App.vue
index 3ab09368..31abae9c 100644
--- a/chart/axiscustomoffsetsandcolorbands/App.vue
+++ b/chart/axiscustomoffsetsandcolorbands/App.vue
@@ -1,5 +1,5 @@
 <template>
-    <JqxChart :theme="'material'" ref="myChart" style="width: 850px; height: 500px"
+    <JqxChart :theme="'material'" ref="myChart" style="width: 90%; height: 500px"
               :title="'Custom labels, grid lines and tick marks offsets'"
               :description="'This example demonstrates how to use labels, tick marks and grid lines at custom offsets'"
               :enableAnimations="false" :padding="padding"
diff --git a/chart/axisoffsettovalue/App.vue b/chart/axisoffsettovalue/App.vue
index 7b428617..f349da47 100644
--- a/chart/axisoffsettovalue/App.vue
+++ b/chart/axisoffsettovalue/App.vue
@@ -1,7 +1,7 @@
 <template>
     <div>
-        <div style="width: 850px; height: 500px" @mousemove="myChartOnMousemove($event)">
-            <JqxChart :theme="'material'" ref="myChart" style="width: 850px; height: 500px"
+        <div style="width: 90%; height: 500px" @mousemove="myChartOnMousemove($event)">
+            <JqxChart :theme="'material'" ref="myChart" style="width: 90%; height: 500px"
                       @click="myChartOnClick($event)"
                       :title="'Custom labels, grid lines and tick marks offsets'"
                       :description="'This example demonstrates how to use labels, tick marks and grid lines at custom offsets'"
diff --git a/chart/axisorientation/App.vue b/chart/axisorientation/App.vue
index 6e302cfb..1443ee7c 100644
--- a/chart/axisorientation/App.vue
+++ b/chart/axisorientation/App.vue
@@ -1,6 +1,6 @@
 <template>
     <div>
-        <JqxChart :theme="'material'" ref="myChart" style="width: 850px; height: 500px"
+        <JqxChart :theme="'material'" ref="myChart" style="width: 90%; height: 500px"
                   :title="'Fitness & exercise weekly scorecard'" :description="'Time spent in vigorous exercise by activity'"
                   :enableAnimations="false" :enableAxisTextAnimation="true" :padding="padding"
                   :titlePadding="titlePadding" :source="sampleData" :xAxis="xAxis" :animationDuration="1000"
diff --git a/chart/axisposition/App.vue b/chart/axisposition/App.vue
index d0b7ac96..0c9497e0 100644
--- a/chart/axisposition/App.vue
+++ b/chart/axisposition/App.vue
@@ -1,5 +1,5 @@
 <template>
-    <JqxChart :theme="'material'" ref="myChart" style="width: 850px; height: 500px"
+    <JqxChart :theme="'material'" ref="myChart" style="width: 90%; height: 500px"
               :title="'U.S. Historical Home Prices (1950-2011)'" :description="'Source: http://www.econ.yale.edu/~shiller/data.htm'"
               :enableAnimations="true" :showLegend="true" :padding="padding"
               :titlePadding="titlePadding" :source="dataAdapter" :xAxis="xAxis"
diff --git a/chart/axissettings/App.vue b/chart/axissettings/App.vue
index 9ef1f6d7..8ced6bc8 100644
--- a/chart/axissettings/App.vue
+++ b/chart/axissettings/App.vue
@@ -1,6 +1,6 @@
 <template>
     <div>
-        <JqxChart :theme="'material'" ref="myChart" style="width: 850px; height: 500px"
+        <JqxChart :theme="'material'" ref="myChart" style="width: 90%; height: 500px"
                   :title="'Electricity prices in Europe between 2004 and 2014'" :description="'Source: Eurostat'"
                   :enableAnimations="true" :showLegend="true" :padding="padding"
                   :titlePadding="titlePadding" :source="data" :xAxis="xAxis"
diff --git a/chart/barseries/App.vue b/chart/barseries/App.vue
index dffc5f95..1e85628f 100644
--- a/chart/barseries/App.vue
+++ b/chart/barseries/App.vue
@@ -1,5 +1,5 @@
 <template>
-    <JqxChart :theme="'material'" style="width: 850px; height: 500px"
+    <JqxChart :theme="'material'" style="width: 90%; height: 500px"
               :title="'Top 5 most populated countries'" :description="'Statistics for 2011'"
               :enableAnimations="true" :showLegend="true" :padding="padding"
               :titlePadding="titlePadding" :source="sampleData" :xAxis="xAxis"
diff --git a/chart/bublechart/App.vue b/chart/bublechart/App.vue
index a3b6b88e..da460435 100644
--- a/chart/bublechart/App.vue
+++ b/chart/bublechart/App.vue
@@ -1,6 +1,6 @@
 <template>
     <div>
-        <JqxChart :theme="'material'" ref="myChart" style="width: 850px; height: 500px"
+        <JqxChart :theme="'material'" ref="myChart" style="width: 90%; height: 500px"
                   :title="'Sales by City in Q1 and Q2, and YoY sales growth'"
                   :description="'(the size of the circles represents relative YoY growth)'"
                   :enableAnimations="true" :showLegend="true" :padding="padding"
diff --git a/chart/candlestickchart/App.vue b/chart/candlestickchart/App.vue
index fd988c1e..44da4224 100644
--- a/chart/candlestickchart/App.vue
+++ b/chart/candlestickchart/App.vue
@@ -1,6 +1,6 @@
 <template>
     <div>
-        <JqxChart :theme="'material'" style="width: 850px; height: 500px"
+        <JqxChart :theme="'material'" style="width: 90%; height: 500px"
                   :title="'S&P 500 Candlestick Chart'"
                   :description="'(June 2010 - November 2014)'"
                   :enableAnimations="true" :enableCrosshairs="true" :animationDuration="1500"
diff --git a/chart/chartannotations/App.vue b/chart/chartannotations/App.vue
index a7434360..5a376157 100644
--- a/chart/chartannotations/App.vue
+++ b/chart/chartannotations/App.vue
@@ -1,5 +1,5 @@
 <template>
-    <JqxChart :theme="'material'" style="width: 850px; height: 500px"
+    <JqxChart :theme="'material'" style="width: 90%; height: 500px"
               :title="'Country economic comparison'"
               :description="'Per capita GDP and Debt in 2010'"
               :showLegend="true" :enableAnimations="true" :padding="padding"
diff --git a/chart/chartcrosshairs/App.vue b/chart/chartcrosshairs/App.vue
index 6de8d3f5..4d47b079 100644
--- a/chart/chartcrosshairs/App.vue
+++ b/chart/chartcrosshairs/App.vue
@@ -1,5 +1,5 @@
 <template>
-    <JqxChart :theme="'material'" style="width: 850px; height: 500px"
+    <JqxChart :theme="'material'" style="width: 90%; height: 500px"
               :title="'U.S. Stock Market Index Performance'"
               :description="'NASDAQ Composite compared to S&P 500'"
               :showLegend="true" :enableAnimations="true" :enableCrosshairs="true"
diff --git a/chart/chartevents/App.vue b/chart/chartevents/App.vue
index d7dd4aed..4e1b7586 100644
--- a/chart/chartevents/App.vue
+++ b/chart/chartevents/App.vue
@@ -1,7 +1,7 @@
 <template>
     <div>
-        <div style="width: 850px; height: 500px" @mouseleave="chartEvent($event)" @mouseenter="chartEvent($event)">
-            <JqxChart :theme="'material'" style="width: 850px; height: 500px"
+        <div style="width: 90%; height: 500px" @mouseleave="chartEvent($event)" @mouseenter="chartEvent($event)">
+            <JqxChart :theme="'material'" style="width: 90%; height: 500px"
                       @click="chartEvent($event)" @toggle="chartEvent($event)"
                       :title="'Fitness & exercise weekly scorecard'"
                       :description="'Time spent in vigorous exercise'"
diff --git a/chart/chartprinting/App.vue b/chart/chartprinting/App.vue
index 176bb87b..e67bce4b 100644
--- a/chart/chartprinting/App.vue
+++ b/chart/chartprinting/App.vue
@@ -1,6 +1,6 @@
 <template>
     <div>
-        <JqxChart :theme="'material'" ref="myChart" style="width: 850px; height: 500px"
+        <JqxChart :theme="'material'" ref="myChart" style="width: 90%; height: 500px"
                   :title="'Economic comparison'"
                   :description="'GDP and Debt in 2010'"
                   :showLegend="true" :enableAnimations="true" :padding="padding"
diff --git a/chart/chartrangeselectorevents/App.vue b/chart/chartrangeselectorevents/App.vue
index bed377ba..460fd85a 100644
--- a/chart/chartrangeselectorevents/App.vue
+++ b/chart/chartrangeselectorevents/App.vue
@@ -1,6 +1,6 @@
 <template>
     <div>
-        <JqxChart :theme="'material'" ref="myChart" style="width: 850px; height: 500px"
+        <JqxChart :theme="'material'" ref="myChart" style="width: 90%; height: 500px"
                   @click="dumpEventInfo($event)" @toggle="dumpEventInfo($event)"
                   @rangeSelectionChanging="dumpEventInfo($event)" @rangeSelectionChanged="dumpEventInfo($event)"
                   @refreshBegin="dumpEventInfo($event)" @refreshEnd="dumpEventInfo($event)"
diff --git a/chart/chartwithgrid/App.vue b/chart/chartwithgrid/App.vue
index 5617490c..77b3afe6 100644
--- a/chart/chartwithgrid/App.vue
+++ b/chart/chartwithgrid/App.vue
@@ -5,7 +5,7 @@
                  :source="dataAdapter" :columns="columns" :showfilterrow="true">
         </JqxGrid>
 
-        <JqxChart :theme="'material'" ref="myChart" style="width: 850px; height: 500px; margin-top: 50px"
+        <JqxChart :theme="'material'" ref="myChart" style="width: 90%; height: 500px; margin-top: 50px"
                   :title="'Fitness & exercise weekly scorecard'"
                   :description="'Time spent in vigorous exercise'"
                   :showLegend="true" :enableAnimations="true" :padding="padding"
diff --git a/chart/colorbands/App.vue b/chart/colorbands/App.vue
index 078b4336..1f934d2e 100644
--- a/chart/colorbands/App.vue
+++ b/chart/colorbands/App.vue
@@ -1,5 +1,5 @@
 <template>
-    <JqxChart :theme="'material'" style="width: 850px; height: 500px"
+    <JqxChart :theme="'material'" style="width: 90%; height: 500px"
               :title="'Monthly Project Schedule'"
               :description="'Website update plan'"
               :showLegend="true" :enableAnimations="true" :padding="padding"
diff --git a/chart/colorbandsxaxis/App.vue b/chart/colorbandsxaxis/App.vue
index baf305b2..0aaf282d 100644
--- a/chart/colorbandsxaxis/App.vue
+++ b/chart/colorbandsxaxis/App.vue
@@ -1,5 +1,5 @@
 <template>
-    <JqxChart :theme="'material'" style="width: 850px; height: 500px"
+    <JqxChart :theme="'material'" style="width: 90%; height: 500px"
               :title="'US Homeownership rate & recessions (1965-2014)'"
               :description="'(sources: US Census bureau, Wikipedia)'"
               :showLegend="true" :enableAnimations="true" :padding="padding"
diff --git a/chart/columnlocaldata/App.vue b/chart/columnlocaldata/App.vue
index 57be6841..667abca7 100644
--- a/chart/columnlocaldata/App.vue
+++ b/chart/columnlocaldata/App.vue
@@ -1,5 +1,5 @@
 <template>
-    <JqxChart :theme="'material'" style="width: 850px; height: 500px"
+    <JqxChart :theme="'material'" style="width: 90%; height: 500px"
               :title="'Fitness & exercise weekly scorecard'"
               :description="'Time spent in vigorous exercise'"
               :showLegend="true" :enableAnimations="true" :padding="padding"
diff --git a/chart/columnrange/App.vue b/chart/columnrange/App.vue
index 0d40d7f7..04e867e0 100644
--- a/chart/columnrange/App.vue
+++ b/chart/columnrange/App.vue
@@ -1,5 +1,5 @@
 <template>
-    <JqxChart :theme="'material'" style="width: 850px; height: 500px"
+    <JqxChart :theme="'material'" style="width: 90%; height: 500px"
               :title="'Weather in Geneva, Switzerland'"
               :description="'Climatological Information about Geneva'"
               :showLegend="true" :enableAnimations="true" :padding="padding" :enableCrosshairs="true"
diff --git a/chart/columnseries/App.vue b/chart/columnseries/App.vue
index c1ee5535..ae2b47c6 100644
--- a/chart/columnseries/App.vue
+++ b/chart/columnseries/App.vue
@@ -1,5 +1,5 @@
 <template>
-    <JqxChart :theme="'material'" style="width: 850px; height: 500px"
+    <JqxChart :theme="'material'" style="width: 90%; height: 500px"
               :title="'Economic comparison'"
               :description="'GDP and Debt in 2010'"
               :showLegend="true" :enableAnimations="true" :padding="padding"
diff --git a/chart/columnseriesspacing/App.vue b/chart/columnseriesspacing/App.vue
index 42050091..757a9284 100644
--- a/chart/columnseriesspacing/App.vue
+++ b/chart/columnseriesspacing/App.vue
@@ -1,6 +1,6 @@
 <template>
     <div>
-        <JqxChart :theme="'material'" ref="myChart" style="width: 850px; height: 500px"
+        <JqxChart :theme="'material'" ref="myChart" style="width: 90%; height: 500px"
                   :title="'Columns spacing and padding'"
                   :description="'Example with two series groups and three series in each group'"
                   :showLegend="true" :enableAnimations="false" :padding="padding"
diff --git a/chart/columnserieswithlabels/App.vue b/chart/columnserieswithlabels/App.vue
index 3cc4c5bd..c4167ba6 100644
--- a/chart/columnserieswithlabels/App.vue
+++ b/chart/columnserieswithlabels/App.vue
@@ -1,5 +1,5 @@
 <template>
-    <JqxChart :theme="'material'" style="width: 850px; height: 500px"
+    <JqxChart :theme="'material'" style="width: 90%; height: 500px"
               :title="'Economic comparison'"
               :description="'GDP and Debt in 2010'"
               :showLegend="true" :enableAnimations="true" :padding="padding"
diff --git a/chart/columnserieswithmissingvalues/App.vue b/chart/columnserieswithmissingvalues/App.vue
index 85994180..81afba8d 100644
--- a/chart/columnserieswithmissingvalues/App.vue
+++ b/chart/columnserieswithmissingvalues/App.vue
@@ -1,5 +1,5 @@
 <template>
-    <JqxChart :theme="'material'" style="width: 850px; height: 500px"
+    <JqxChart :theme="'material'" style="width: 90%; height: 500px"
               :title="'Average store sales per hour'"
               :description="''"
               :showLegend="true" :enableAnimations="true" :padding="padding"
diff --git a/chart/columnseriewithconditionalcolors/App.vue b/chart/columnseriewithconditionalcolors/App.vue
index 0732ca05..8ccc8a74 100644
--- a/chart/columnseriewithconditionalcolors/App.vue
+++ b/chart/columnseriewithconditionalcolors/App.vue
@@ -1,5 +1,5 @@
 <template>
-    <JqxChart :theme="'material'" style="width: 850px; height: 500px"
+    <JqxChart :theme="'material'" style="width: 90%; height: 500px"
               :title="'U.S. GDP Percentage Change'"
               :description="'(source: Bureau of Economic Analysis)'"
               :showLegend="false" :enableAnimations="true" :padding="padding" :borderLineWidth="1"
diff --git a/chart/columnsrange/App.vue b/chart/columnsrange/App.vue
index e30617a6..7552b0bc 100644
--- a/chart/columnsrange/App.vue
+++ b/chart/columnsrange/App.vue
@@ -1,5 +1,5 @@
 <template>
-    <JqxChart :theme="'material'" style="width: 850px; height: 500px"
+    <JqxChart :theme="'material'" style="width: 90%; height: 500px"
               :title="'Logarithmic Column Range'"
               :description="'logarithmic scale with base 2'"
               :enableAnimations="true" :padding="padding"
diff --git a/chart/columnswithbase10logarithmicaxis/App.vue b/chart/columnswithbase10logarithmicaxis/App.vue
index 34868473..e8e0dd80 100644
--- a/chart/columnswithbase10logarithmicaxis/App.vue
+++ b/chart/columnswithbase10logarithmicaxis/App.vue
@@ -1,5 +1,5 @@
 <template>
-    <JqxChart :theme="'material'" style="width: 850px; height: 500px"
+    <JqxChart :theme="'material'" style="width: 90%; height: 500px"
               :title="'Logarithmic Scale Axis Example'"
               :description="'Sample logarithmic scale axis with base 10 and baseline at 1'"
               :enableAnimations="true" :padding="padding"
diff --git a/chart/columnswithlogarithmicaxis/App.vue b/chart/columnswithlogarithmicaxis/App.vue
index 24d15577..b3df9e47 100644
--- a/chart/columnswithlogarithmicaxis/App.vue
+++ b/chart/columnswithlogarithmicaxis/App.vue
@@ -1,5 +1,5 @@
 <template>
-    <JqxChart :theme="'material'" style="width: 850px; height: 500px"
+    <JqxChart :theme="'material'" style="width: 90%; height: 500px"
               :title="'Logarithmic Scale Axis Example'"
               :description="'Sample logarithmic scale axis with base 2'"
               :enableAnimations="true" :padding="padding"
diff --git a/chart/createComponent/App.vue b/chart/createComponent/App.vue
index 0887657d..0621f0dc 100644
--- a/chart/createComponent/App.vue
+++ b/chart/createComponent/App.vue
@@ -1,5 +1,5 @@
 <template>
-    <JqxChart :theme="'material'" style="width: 850px; height: 500px;" 
+    <JqxChart :theme="'material'" style="width: 90%; height: 500px;" 
               ref="myChart" :autoCreate="false">
     </JqxChart>
 </template>
diff --git a/chart/customdrawing/App.vue b/chart/customdrawing/App.vue
index 7d03b9b2..c247caab 100644
--- a/chart/customdrawing/App.vue
+++ b/chart/customdrawing/App.vue
@@ -1,5 +1,5 @@
 <template>
-    <JqxChart :theme="'material'" style="width: 850px; height: 500px"
+    <JqxChart :theme="'material'" style="width: 90%; height: 500px"
               :title="'Map of the European Union'"
               :description="''"
               :padding="padding" :titlePadding="titlePadding" :source="dataAdapter"
diff --git a/chart/customstyling/App.vue b/chart/customstyling/App.vue
index c83f9dcc..fd50068b 100644
--- a/chart/customstyling/App.vue
+++ b/chart/customstyling/App.vue
@@ -1,5 +1,5 @@
 <template>
-    <JqxChart :theme="'material'" style="width: 850px; height: 500px"
+    <JqxChart :theme="'material'" style="width: 90%; height: 500px"
               :title="'U.S. Stock Market Index Performance'"
               :description="'NASDAQ Composite compared to S&P 500'"
               :showLegend="true" :enableAnimation="true" :padding="padding"
diff --git a/chart/darkbackground/App.vue b/chart/darkbackground/App.vue
index 7cce57a6..4480a879 100644
--- a/chart/darkbackground/App.vue
+++ b/chart/darkbackground/App.vue
@@ -1,5 +1,5 @@
 <template>
-    <JqxChart :theme="'material'" style="width: 850px; height: 500px"
+    <JqxChart :theme="'material'" style="width: 90%; height: 500px"
               :title="'U.S. Stock Market Index Performance'"
               :description="'NASDAQ Composite compared to S&P 500'"
               :showLegend="true" :enableAnimation="true" :padding="padding"
diff --git a/chart/funnelchart/App.vue b/chart/funnelchart/App.vue
index 244c7654..4b74fe17 100644
--- a/chart/funnelchart/App.vue
+++ b/chart/funnelchart/App.vue
@@ -1,5 +1,5 @@
 <template> 
-    <JqxChart :theme="'material'" style="width: 850px; height: 500px"
+    <JqxChart :theme="'material'" style="width: 90%; height: 500px"
         :title="'Funnel chart'" 
         :description="'This example demonstrates funnel chart with positive and negative values'"
         :showLegend="true" :enableAnimations="true" :padding="padding"
diff --git a/chart/greyscaleseries/App.vue b/chart/greyscaleseries/App.vue
index 4702b952..14d22368 100644
--- a/chart/greyscaleseries/App.vue
+++ b/chart/greyscaleseries/App.vue
@@ -1,6 +1,6 @@
 <template>
     <div>
-        <JqxChart :theme="'material'" ref="myChart" style="width: 850px; height: 500px"
+        <JqxChart :theme="'material'" ref="myChart" style="width: 90%; height: 500px"
                   :title="'Fitness & exercise weekly scorecard'"
                   :description="'Time spent in vigorous exercise by activity'"
                   :showLegend="true" :enableAnimations="false" :padding="padding"
diff --git a/chart/gridlinesdashstyle/App.vue b/chart/gridlinesdashstyle/App.vue
index 21798a47..76f7ed9d 100644
--- a/chart/gridlinesdashstyle/App.vue
+++ b/chart/gridlinesdashstyle/App.vue
@@ -1,5 +1,5 @@
 <template>
-    <JqxChart :theme="'material'" style="width: 850px; height: 500px"
+    <JqxChart :theme="'material'" style="width: 90%; height: 500px"
               :title="'CPI inflation comparison by country'"
               :description="'Years: 2011 vs 2012'"
               :showLegend="true" :enableAnimations="true" :padding="padding"
diff --git a/chart/intervalandsteps/App.vue b/chart/intervalandsteps/App.vue
index 81b5c23a..06b6e93e 100644
--- a/chart/intervalandsteps/App.vue
+++ b/chart/intervalandsteps/App.vue
@@ -1,6 +1,6 @@
 <template>
     <div>
-        <JqxChart :theme="'material'" ref="myChart" style="width: 850px; height: 500px"
+        <JqxChart :theme="'material'" ref="myChart" style="width: 90%; height: 500px"
                   :title="'Chart unit interval and steps example'"
                   :description="''"
                   :showLegend="true" :enableAnimations="false" :padding="padding"
diff --git a/chart/lineseries/App.vue b/chart/lineseries/App.vue
index dee54af0..69d6faaa 100644
--- a/chart/lineseries/App.vue
+++ b/chart/lineseries/App.vue
@@ -1,5 +1,5 @@
 <template>
-    <JqxChart :theme="'material'" style="width: 850px; height: 500px"
+    <JqxChart :theme="'material'" style="width: 90%; height: 500px"
               :title="'U.S. Stock Market Index Performance'"
               :description="'NASDAQ Composite compared to S&P 500'"
               :showLegend="true" :enableAnimations="true" :padding="padding"
diff --git a/chart/lineseriesmarkers/App.vue b/chart/lineseriesmarkers/App.vue
index f0d59074..6f26100a 100644
--- a/chart/lineseriesmarkers/App.vue
+++ b/chart/lineseriesmarkers/App.vue
@@ -1,5 +1,5 @@
 <template>
-    <JqxChart :theme="'material'" style="width: 850px; height: 500px"
+    <JqxChart :theme="'material'" style="width: 90%; height: 500px"
               :title="'Fitness & exercise weekly scorecard'"
               :description="'Time spent in vigorous exercise by activity'"
               :showLegend="true" :enableAnimations="true" :padding="padding"
diff --git a/chart/lineseriewithconditionalcolors/App.vue b/chart/lineseriewithconditionalcolors/App.vue
index 995a1ae0..1387be83 100644
--- a/chart/lineseriewithconditionalcolors/App.vue
+++ b/chart/lineseriewithconditionalcolors/App.vue
@@ -1,5 +1,5 @@
 <template>
-    <JqxChart :theme="'material'" style="width: 850px; height: 500px"
+    <JqxChart :theme="'material'" style="width: 90%; height: 500px"
               :title="'U.S. GDP Percentage Change'"
               :description="'(source: Bureau of Economic Analysis)'"
               :showLegend="false" :enableAnimations="true" :padding="padding" :borderLineWidth="1"
diff --git a/chart/lineseriewithmissingpoints/App.vue b/chart/lineseriewithmissingpoints/App.vue
index 6404f69e..33a4c720 100644
--- a/chart/lineseriewithmissingpoints/App.vue
+++ b/chart/lineseriewithmissingpoints/App.vue
@@ -1,6 +1,6 @@
 <template>
     <div>
-        <JqxChart :theme="'material'" ref="myChart" style="width: 850px; height: 500px"
+        <JqxChart :theme="'material'" ref="myChart" style="width: 90%; height: 500px"
                   :title="'Line serie with missing points'"
                   :description="'Sample line serie with missing and invalid values'"
                   :showLegend="true" :padding="padding"
diff --git a/chart/lineseriewithmultipledatasources/App.vue b/chart/lineseriewithmultipledatasources/App.vue
index f6f1e1b9..2450c65b 100644
--- a/chart/lineseriewithmultipledatasources/App.vue
+++ b/chart/lineseriewithmultipledatasources/App.vue
@@ -1,5 +1,5 @@
 <template>
-    <JqxChart :theme="'material'" style="width: 850px; height: 500px"
+    <JqxChart :theme="'material'" style="width: 90%; height: 500px"
               :title="'Fitness & exercise weekly scorecard'"
               :description="'Time spent in vigorous exercise'"
               :showLegend="true" :enableAnimations="true" :padding="padding"
diff --git a/chart/liveupdates/App.vue b/chart/liveupdates/App.vue
index 67457eb2..a1a1b309 100644
--- a/chart/liveupdates/App.vue
+++ b/chart/liveupdates/App.vue
@@ -1,6 +1,6 @@
 <template>
     <div>
-        <JqxChart :theme="'material'" ref="myChart" style="width: 850px; height: 500px"
+        <JqxChart :theme="'material'" ref="myChart" style="width: 90%; height: 500px"
                   :title="'Live updates demo'" :enableAxisTextAnimation="true"
                   :description="''" :animationDuration="1000"
                   :showLegend="true" :enableAnimations="true" :padding="padding"
diff --git a/chart/liveupdateseverysecond/App.vue b/chart/liveupdateseverysecond/App.vue
index 117819e7..16557709 100644
--- a/chart/liveupdateseverysecond/App.vue
+++ b/chart/liveupdateseverysecond/App.vue
@@ -1,6 +1,6 @@
 <template>
     <div>
-        <JqxChart :theme="'material'" ref="myChart" style="width: 850px; height: 500px"
+        <JqxChart :theme="'material'" ref="myChart" style="width: 90%; height: 500px"
                   :title="'Live updates demo'" :enableAxisTextAnimation="true"
                   :description="''" :animationDuration="1000"
                   :showLegend="true" :enableAnimations="false" :padding="padding"
diff --git a/chart/liveupdatesperformance/App.vue b/chart/liveupdatesperformance/App.vue
index f40982a6..5c3bc09a 100644
--- a/chart/liveupdatesperformance/App.vue
+++ b/chart/liveupdatesperformance/App.vue
@@ -1,6 +1,6 @@
 <template>
     <div>
-        <JqxChart :theme="'material'" ref="myChart" style="width: 850px; height: 500px"
+        <JqxChart :theme="'material'" ref="myChart" style="width: 90%; height: 500px"
                   :title="'Live updates performance'" :enableAxisTextAnimation="true"
                   :description="'Data changes every 100 milliseconds'"
                   :showLegend="true" :enableAnimations="false" :padding="padding"
diff --git a/chart/logarithmicXaxis/App.vue b/chart/logarithmicXaxis/App.vue
index 49c10967..4eea9dc7 100644
--- a/chart/logarithmicXaxis/App.vue
+++ b/chart/logarithmicXaxis/App.vue
@@ -1,5 +1,5 @@
 <template>
-    <JqxChart :theme="'material'" ref="myChart" style="width: 850px; height: 500px"
+    <JqxChart :theme="'material'" ref="myChart" style="width: 90%; height: 500px"
               :title="'Logarithmic Scale x-Axis Example'"
               :description="'Horizontal axis with base 2 logarithmic scale'"
               :enableAnimations="true" :padding="padding"
diff --git a/chart/logarithmicaxisbaseline/App.vue b/chart/logarithmicaxisbaseline/App.vue
index 38bd50bd..62510dc8 100644
--- a/chart/logarithmicaxisbaseline/App.vue
+++ b/chart/logarithmicaxisbaseline/App.vue
@@ -1,5 +1,5 @@
 <template>
-    <JqxChart :theme="'material'" ref="myChart" style="width: 850px; height: 500px"
+    <JqxChart :theme="'material'" ref="myChart" style="width: 90%; height: 500px"
               :title="'Logarithmic Scale Axis Example'"
               :description="'Sample logarithmic scale axis with base 2 and baseline 8'"
               :enableAnimations="false" :padding="padding"
diff --git a/chart/logarithmicwaterfallseries/App.vue b/chart/logarithmicwaterfallseries/App.vue
index f7078b9b..42437261 100644
--- a/chart/logarithmicwaterfallseries/App.vue
+++ b/chart/logarithmicwaterfallseries/App.vue
@@ -1,5 +1,5 @@
 <template>
-    <JqxChart :theme="'material'" ref="myChart" style="width: 850px; height: 500px"
+    <JqxChart :theme="'material'" ref="myChart" style="width: 90%; height: 500px"
               :title="'Waterfall series with logarithmic axis'"
               :description="'Logarithmic base 2'"
               :enableAnimations="true" :padding="padding"
diff --git a/chart/multipleseriestypes/App.vue b/chart/multipleseriestypes/App.vue
index 53902b16..116c3710 100644
--- a/chart/multipleseriestypes/App.vue
+++ b/chart/multipleseriestypes/App.vue
@@ -1,5 +1,5 @@
 <template>
-    <JqxChart :theme="'material'" style="width: 850px; height: 500px"
+    <JqxChart :theme="'material'" style="width: 90%; height: 500px"
               :title="'Fitness & exercise weekly scorecard'"
               :description="'Time spent in vigorous exercise by activity'"
               :showLegend="true" :enableAnimations="true" :padding="padding"
diff --git a/chart/negativebarseries/App.vue b/chart/negativebarseries/App.vue
index 7fa42e7d..00bb56e0 100644
--- a/chart/negativebarseries/App.vue
+++ b/chart/negativebarseries/App.vue
@@ -1,5 +1,5 @@
 <template>
-    <JqxChart :theme="'material'" style="width: 850px; height: 500px"
+    <JqxChart :theme="'material'" style="width: 90%; height: 500px"
               :title="'CPI inflation comparison by country'"
               :description="'Years: 2011 vs 2012'"
               :showLegend="true" :enableAnimations="true" :padding="padding"
diff --git a/chart/negativevalues/App.vue b/chart/negativevalues/App.vue
index c975d22a..661a2269 100644
--- a/chart/negativevalues/App.vue
+++ b/chart/negativevalues/App.vue
@@ -1,5 +1,5 @@
 <template>
-    <JqxChart :theme="'material'" style="width: 850px; height: 500px"
+    <JqxChart :theme="'material'" style="width: 90%; height: 500px"
               :title="'Weather in Geneva, Switzerland'"
               :description="'Climatological Information about Geneva'"
               :showLegend="true" :enableAnimations="true" :padding="padding"
diff --git a/chart/nondatexaxisrangeselection/App.vue b/chart/nondatexaxisrangeselection/App.vue
index 294a6124..b89e69a8 100644
--- a/chart/nondatexaxisrangeselection/App.vue
+++ b/chart/nondatexaxisrangeselection/App.vue
@@ -1,5 +1,5 @@
 <template>
-    <JqxChart :theme="'material'" style="width: 850px; height: 500px"
+    <JqxChart :theme="'material'" style="width: 90%; height: 500px"
               :title="'Range selector with regular x-axis'"
               :description="'In this example the range selector works with (non-date) axis'"
               :showLegend="false" :enableAnimations="true" :padding="padding"
diff --git a/chart/ohlcchart/App.vue b/chart/ohlcchart/App.vue
index f25a7cb7..2c8d1f8c 100644
--- a/chart/ohlcchart/App.vue
+++ b/chart/ohlcchart/App.vue
@@ -1,5 +1,5 @@
 <template>
-    <JqxChart :theme="'material'" style="width: 850px; height: 500px"
+    <JqxChart :theme="'material'" style="width: 90%; height: 500px"
               :title="'NASDAQ and S&P 500 - OHLC Example'"
               :description="'(June 2010 - November 2014)'"
               :enableCrosshairs="true" :enableAnimations="true" :padding="padding"
diff --git a/chart/partialpolarchart/App.vue b/chart/partialpolarchart/App.vue
index d63a2757..eb977c10 100644
--- a/chart/partialpolarchart/App.vue
+++ b/chart/partialpolarchart/App.vue
@@ -1,6 +1,6 @@
 <template>
     <div>
-        <JqxChart :theme="'material'" ref="myChart" style="width: 850px; height: 500px"
+        <JqxChart :theme="'material'" ref="myChart" style="width: 90%; height: 500px"
                   :title="'Sales volume and revenue by city'"
                   :description="'(revenue in thousands)'"
                   :showLegend="true" :enableAnimations="false" :padding="padding"
@@ -8,7 +8,7 @@
                   :valueAxis="valueAxis" :seriesGroups="seriesGroups" :colorScheme="'scheme01'">
         </JqxChart>
 
-        <table style="width: 850px">
+        <table style="width: 90%">
             <tbody>
                 <tr>
                     <td style="padding-left: 50px">
diff --git a/chart/percentagestackedcolumns/App.vue b/chart/percentagestackedcolumns/App.vue
index b5b2afff..d3ef3e48 100644
--- a/chart/percentagestackedcolumns/App.vue
+++ b/chart/percentagestackedcolumns/App.vue
@@ -1,5 +1,5 @@
 <template>
-    <JqxChart :theme="'material'" style="width: 850px; height: 500px"
+    <JqxChart :theme="'material'" style="width: 90%; height: 500px"
               :title="'Logarithmic Scale Axis Example'"
               :description="'Percentage Stacked Columns with logarithmic scale axis (base 2)'"
               :enableAnimations="false" :padding="padding"
diff --git a/chart/pieseries/App.vue b/chart/pieseries/App.vue
index b04205c0..f72788f8 100644
--- a/chart/pieseries/App.vue
+++ b/chart/pieseries/App.vue
@@ -1,5 +1,5 @@
 <template>
-    <JqxChart :theme="'material'" style="width: 850px; height: 500px"
+    <JqxChart :theme="'material'" style="width: 90%; height: 500px"
               :title="'Desktop browsers share'"
               :description="'(source: wikipedia.org)'"
               :showLegend="false" :enableAnimations="false" :padding="padding"
diff --git a/chart/pieserieslegend/App.vue b/chart/pieserieslegend/App.vue
index 5ab1cda5..9ae167b4 100644
--- a/chart/pieserieslegend/App.vue
+++ b/chart/pieserieslegend/App.vue
@@ -1,5 +1,5 @@
 <template>
-    <JqxChart :theme="'material'" style="width: 850px; height: 500px"
+    <JqxChart :theme="'material'" style="width: 90%; height: 500px"
               :title="'Mobile browsers share'"
               :description="'(source: wikipedia.org)'"
               :showLegend="true" :enableAnimations="true" :padding="padding"
diff --git a/chart/polarseries/App.vue b/chart/polarseries/App.vue
index 46a56706..fb8ca1d3 100644
--- a/chart/polarseries/App.vue
+++ b/chart/polarseries/App.vue
@@ -1,6 +1,6 @@
 <template>
     <div>
-        <JqxChart :theme="'material'" ref="myChart" style="width: 850px; height: 500px"
+        <JqxChart :theme="'material'" ref="myChart" style="width: 90%; height: 500px"
                   :title="'U.S. Real Home Price vs Building Cost Indeces (1950-2010)'"
                   :description="'Source: http://www.econ.yale.edu/~shiller/data.htm'"
                   :showLegend="true" :enableAnimations="true" :padding="padding"
@@ -8,7 +8,7 @@
                   :seriesGroups="seriesGroups" :colorScheme="'scheme01'">
         </JqxChart>
 
-        <table style="width: 850px">
+        <table style="width: 90%">
             <tbody>
                 <tr>
                     <td style="padding-left: 50px">
diff --git a/chart/polarseriesbands/App.vue b/chart/polarseriesbands/App.vue
index 7ec70b08..0bca03ba 100644
--- a/chart/polarseriesbands/App.vue
+++ b/chart/polarseriesbands/App.vue
@@ -1,6 +1,6 @@
 <template>
     <div>
-        <JqxChart :theme="'material'" ref="myChart" style="width: 850px; height: 500px"
+        <JqxChart :theme="'material'" ref="myChart" style="width: 90%; height: 500px"
                   :title="'U.S. Real Home Price vs Building Cost Indeces (1950-2010)'"
                   :description="'Source: http://www.econ.yale.edu/~shiller/data.htm'"
                   :showLegend="true" :enableAnimations="true" :padding="padding"
@@ -8,7 +8,7 @@
                   :seriesGroups="seriesGroups" :colorScheme="'scheme01'">
         </JqxChart>
 
-        <table style="width: 850px">
+        <table style="width: 90%">
             <tbody>
                 <tr>
                     <td style="padding-left: 50px">
diff --git a/chart/pyramidchart/App.vue b/chart/pyramidchart/App.vue
index 900a1183..80ce7a6e 100644
--- a/chart/pyramidchart/App.vue
+++ b/chart/pyramidchart/App.vue
@@ -1,5 +1,5 @@
 <template>
-    <JqxChart :theme="'material'" style="width: 850px; height: 500px"
+    <JqxChart :theme="'material'" style="width: 90%; height: 500px"
               :title="'Pyramid series'"
               :description="'This example demonstrates pyramid chart series'"
               :showLegend="true" :enableAnimations="false" :padding="padding"
diff --git a/chart/rigthtoleftlayout/App.vue b/chart/rigthtoleftlayout/App.vue
index fa69b3f3..18ecfb66 100644
--- a/chart/rigthtoleftlayout/App.vue
+++ b/chart/rigthtoleftlayout/App.vue
@@ -1,5 +1,5 @@
 <template>
-    <JqxChart :theme="'material'" style="width: 850px; height: 500px" :rtl="true"
+    <JqxChart :theme="'material'" style="width: 90%; height: 500px" :rtl="true"
               :title="'Fitness & exercise weekly scorecard'"
               :description="'Time spent in vigorous exercise by activity'"
               :showLegend="true" :enableAnimations="false" :padding="padding"
diff --git a/chart/scatterchart/App.vue b/chart/scatterchart/App.vue
index 94da3d8d..9f6b343b 100644
--- a/chart/scatterchart/App.vue
+++ b/chart/scatterchart/App.vue
@@ -1,6 +1,6 @@
 <template>
     <div>
-        <JqxChart :theme="'material'" ref="myChart" style="width: 850px; height: 500px"
+        <JqxChart :theme="'material'" ref="myChart" style="width: 90%; height: 500px"
                   :title="'Sales by City in Q1 & Q2'"
                   :description="''"
                   :showLegend="true" :enableAnimations="true" :padding="padding"
diff --git a/chart/spiderchart/App.vue b/chart/spiderchart/App.vue
index 2534146b..8c4360bc 100644
--- a/chart/spiderchart/App.vue
+++ b/chart/spiderchart/App.vue
@@ -1,6 +1,6 @@
 <template>
     <div>
-        <JqxChart :theme="'material'" ref="myChart" style="width: 850px; height: 500px"
+        <JqxChart :theme="'material'" ref="myChart" style="width: 90%; height: 500px"
                   :title="'Website audience acquision by source'"
                   :description="'Month over month comparison'"
                   :showLegend="true" :enableAnimations="false" :padding="padding"
@@ -8,7 +8,7 @@
                   :valueAxis="valueAxis" :seriesGroups="seriesGroups" :colorScheme="'scheme05'">
         </JqxChart>
 
-        <table style="width: 850px">
+        <table style="width: 90%">
             <tbody>
                 <tr>
                     <td style="padding-left: 50px">
diff --git a/chart/splinearea/App.vue b/chart/splinearea/App.vue
index f4c18060..c864e215 100644
--- a/chart/splinearea/App.vue
+++ b/chart/splinearea/App.vue
@@ -1,5 +1,5 @@
 <template>
-    <JqxChart :theme="'material'" style="width: 850px; height: 500px"
+    <JqxChart :theme="'material'" style="width: 90%; height: 500px"
               :title="'Logarithmic Spline Area Range'"
               :description="'logarithmic scale with base 2'"
               :enableAnimations="true" :padding="padding"
diff --git a/chart/splineseries/App.vue b/chart/splineseries/App.vue
index c2133bf4..85e55e86 100644
--- a/chart/splineseries/App.vue
+++ b/chart/splineseries/App.vue
@@ -1,5 +1,5 @@
 <template>
-    <JqxChart :theme="'material'" style="width: 850px; height: 500px"
+    <JqxChart :theme="'material'" style="width: 90%; height: 500px"
               :title="'U.S. Historical Home Prices (1950-2011)'"
               :description="'Source: http://www.econ.yale.edu/~shiller/data.htm'"
               :showLegend="true" :enableAnimations="true" :padding="padding"
diff --git a/chart/stackedandgroupedcolumnseries/App.vue b/chart/stackedandgroupedcolumnseries/App.vue
index bc7e193f..a425327a 100644
--- a/chart/stackedandgroupedcolumnseries/App.vue
+++ b/chart/stackedandgroupedcolumnseries/App.vue
@@ -1,5 +1,5 @@
 <template>
-    <JqxChart :theme="'material'" style="width: 850px; height: 500px"
+    <JqxChart :theme="'material'" style="width: 90%; height: 500px"
               :title="'Fitness & exercise weekly scorecard'"
               :description="'Time spent in vigorous exercise by activity'"
               :showLegend="true" :enableAnimations="true" :padding="padding"
diff --git a/chart/stackedareaseries/App.vue b/chart/stackedareaseries/App.vue
index 71975ff1..155dee2a 100644
--- a/chart/stackedareaseries/App.vue
+++ b/chart/stackedareaseries/App.vue
@@ -1,5 +1,5 @@
 <template>
-    <JqxChart :theme="'material'" style="width: 850px; height: 500px"
+    <JqxChart :theme="'material'" style="width: 90%; height: 500px"
               :title="'Website traffic analysis'"
               :description="'Unique daily visitors (stacked)'"
               :showLegend="true" :enableAnimations="true" :padding="padding"
diff --git a/chart/stackedcolumns/App.vue b/chart/stackedcolumns/App.vue
index ebe7fd12..92a6831b 100644
--- a/chart/stackedcolumns/App.vue
+++ b/chart/stackedcolumns/App.vue
@@ -1,5 +1,5 @@
 <template>
-    <JqxChart :theme="'material'" style="width: 850px; height: 500px"
+    <JqxChart :theme="'material'" style="width: 90%; height: 500px"
               :title="'Logarithmic Scale Axis Example'"
               :description="'Stacked Columns with logarithmic scale axis'"
               :enableAnimations="true" :padding="padding"
diff --git a/chart/stackedcolumnseries/App.vue b/chart/stackedcolumnseries/App.vue
index b39c1df7..81ad9e9a 100644
--- a/chart/stackedcolumnseries/App.vue
+++ b/chart/stackedcolumnseries/App.vue
@@ -1,5 +1,5 @@
 <template>
-    <JqxChart :theme="'material'" style="width: 850px; height: 500px"
+    <JqxChart :theme="'material'" style="width: 90%; height: 500px"
               :title="'Fitness & exercise weekly scorecard'"
               :description="'Time spent in vigorous exercise by activity'"
               :showLegend="true" :enableAnimations="true" :padding="padding"
diff --git a/chart/stackedfunnelchart/App.vue b/chart/stackedfunnelchart/App.vue
index 4cde649e..d02f9350 100644
--- a/chart/stackedfunnelchart/App.vue
+++ b/chart/stackedfunnelchart/App.vue
@@ -1,5 +1,5 @@
 <template>
-    <JqxChart :theme="'material'" style="width: 850px; height: 500px"
+    <JqxChart :theme="'material'" style="width: 90%; height: 500px"
               :title="'Stacked Funnel Chart'"
               :description="'This example demonstrates stacked funnel chart with positive and negative values'"
               :showLegend="true" :enableAnimations="false" :padding="padding"
diff --git a/chart/stackedlineseries/App.vue b/chart/stackedlineseries/App.vue
index fa0da54e..016d7666 100644
--- a/chart/stackedlineseries/App.vue
+++ b/chart/stackedlineseries/App.vue
@@ -1,5 +1,5 @@
 <template>
-    <JqxChart :theme="'material'" style="width: 850px; height: 500px"
+    <JqxChart :theme="'material'" style="width: 90%; height: 500px"
               :title="'Web Site Traffic Analysis'"
               :description="'Daily unique visitors (stacked)'"
               :showLegend="true" :enableAnimations="true" :padding="padding"
diff --git a/chart/stackedpyramidchart/App.vue b/chart/stackedpyramidchart/App.vue
index c2417433..af23306d 100644
--- a/chart/stackedpyramidchart/App.vue
+++ b/chart/stackedpyramidchart/App.vue
@@ -1,5 +1,5 @@
 <template>
-    <JqxChart :theme="'material'" style="width: 850px; height: 500px"
+    <JqxChart :theme="'material'" style="width: 90%; height: 500px"
               :title="'Stacked Pyramid Chart'"
               :description="''"
               :showLegend="true" :enableAnimations="false" :padding="padding"
diff --git a/chart/stackedwaterfallseries/App.vue b/chart/stackedwaterfallseries/App.vue
index 14f2fe26..e4005f76 100644
--- a/chart/stackedwaterfallseries/App.vue
+++ b/chart/stackedwaterfallseries/App.vue
@@ -1,5 +1,5 @@
 <template>
-    <JqxChart :theme="'material'" style="width: 850px; height: 500px"
+    <JqxChart :theme="'material'" style="width: 90%; height: 500px"
               :title="'Stacked waterfall series with logarithmic axis'"
               :description="'Logarithmic base 2'" :padding="padding"
               :titlePadding="titlePadding" :source="sampleData" :xAxis="xAxis"
diff --git a/chart/steplineseries/App.vue b/chart/steplineseries/App.vue
index 656cfeef..60a059f8 100644
--- a/chart/steplineseries/App.vue
+++ b/chart/steplineseries/App.vue
@@ -1,5 +1,5 @@
 <template>
-    <JqxChart :theme="'material'" style="width: 850px; height: 500px"
+    <JqxChart :theme="'material'" style="width: 90%; height: 500px"
               :title="'Tesla Motors Stock Price'"
               :description="'Closing price (June 2013 - March 2014)'"
               :showLegend="true" :enableAnimations="true" :padding="padding" :enableCrosshairs="true"
diff --git a/chart/textrotation/App.vue b/chart/textrotation/App.vue
index d8d78213..2fa3c3b0 100644
--- a/chart/textrotation/App.vue
+++ b/chart/textrotation/App.vue
@@ -1,5 +1,5 @@
 <template>
-    <JqxChart :theme="'material'" style="width: 850px; height: 500px"
+    <JqxChart :theme="'material'" style="width: 90%; height: 500px"
               :title="'Axis text rotation example'"
               :description="''"
               :enableAnimations="true" :padding="padding" :showToolTips="true"
diff --git a/chart/textwrapping/App.vue b/chart/textwrapping/App.vue
index 64453ff8..e15b4207 100644
--- a/chart/textwrapping/App.vue
+++ b/chart/textwrapping/App.vue
@@ -1,5 +1,5 @@
 <template>
-    <JqxChart :theme="'material'" style="width: 850px; height: 500px"
+    <JqxChart :theme="'material'" style="width: 90%; height: 500px"
               :title="'Economic comparison'"
               :description="'GDP and Debt in 2010'"
               :showLegend="true" :enableAnimations="true" :padding="padding"
diff --git a/chart/themes/App.vue b/chart/themes/App.vue
index f5c3b863..d8f3b2b4 100644
--- a/chart/themes/App.vue
+++ b/chart/themes/App.vue
@@ -1,6 +1,6 @@
 <template>
     <div>
-        <JqxChart :theme="'material'" ref="myChart" style="width: 850px; height: 500px"
+        <JqxChart :theme="'material'" ref="myChart" style="width: 90%; height: 500px"
                   :title="'Fitness & exercise weekly scorecard'"
                   :description="'Time spent in vigorous exercise'"
                   :showLegend="true" :enableAnimations="false" :padding="padding"
diff --git a/chart/tooltipformatting/App.vue b/chart/tooltipformatting/App.vue
index b131332a..18a3dc56 100644
--- a/chart/tooltipformatting/App.vue
+++ b/chart/tooltipformatting/App.vue
@@ -1,5 +1,5 @@
 <template>
-    <JqxChart :theme="'material'" style="width: 850px; height: 500px"
+    <JqxChart :theme="'material'" style="width: 90%; height: 500px"
               :title="'U.S. Stock Market Index Performance (2014)'"
               :description="'NASDAQ Composite compared to S&P 500'"
               :showLegend="true" :enableAnimations="true" :padding="padding"
diff --git a/chart/waterfallseries/App.vue b/chart/waterfallseries/App.vue
index 07fb6157..1d70384b 100644
--- a/chart/waterfallseries/App.vue
+++ b/chart/waterfallseries/App.vue
@@ -1,5 +1,5 @@
 <template>
-    <JqxChart :theme="'material'" style="width: 850px; height: 500px"
+    <JqxChart :theme="'material'" style="width: 90%; height: 500px"
               :title="'EU Population between 2003 and 2014'"
               :description="'data source: Eurostat'"
               :showLegend="false" :enableAnimations="true" :padding="padding"
diff --git a/chart/waterfallwithmultipleseries/App.vue b/chart/waterfallwithmultipleseries/App.vue
index f089fd4b..d150a338 100644
--- a/chart/waterfallwithmultipleseries/App.vue
+++ b/chart/waterfallwithmultipleseries/App.vue
@@ -1,5 +1,5 @@
 <template>
-    <JqxChart :theme="'material'" style="width: 850px; height: 500px"
+    <JqxChart :theme="'material'" style="width: 90%; height: 500px"
               :title="'EU Employment rate trends by gender'"
               :description="'data source: Eurostat'"
               :showLegend="true" :enableAnimations="true" :padding="padding"