Fixes the id property, and adds the forceRender property to work with dynamic scalable axis

Author: Mike Schultz

README.md

@@ -258,6 +258,9 @@ The theme or 'defaults' object defined by ZingChart. More information available
 ### modules [string or array] (optional)
 An option to add the name of modules being loaded, into ZingChart's render object. Necessary for certain modules including the 'scalableYAxis'.
 
+### forceRender 
+The addition of this property will force ZingChart to re-render on all configuration changes. This isn't optimally performant, but some ZingChart features will require a full re-render of the chart, rather than an internal data update change. Only use this option when necessary.
+
 
 ## Events
 

ZingChart.vue

@@ -29,6 +29,10 @@ export default {
       type: [String, Number],
       default: DEFAULT_HEIGHT,
     },
+    id: {
+      type: [String],
+      required: false,
+    },
     output: {
       type: String,
       default: DEFAULT_OUTPUT,
@@ -48,14 +52,19 @@ export default {
     modules: {
       type: [String, Array],
       required: false
+    },
+    forceRender: {
+      type: String,
     }
   },
   data() {
     return {
       chartId: null,
       instance: null,
+      forceRenderOnChange: false,
       EVENT_NAMES,
       METHOD_NAMES,
+      renderObject: null,
     };
   },
   destroyed() {
@@ -77,6 +86,7 @@ export default {
   },
   methods: {
     render() {
+      this.forceRenderOnChange = typeof this.$props.forceRender !== 'undefined';
       this.$el.style.width = this.$props.width;
       this.$el.style.height = this.$props.height;
       // Set the id for zingchart to render to
@@ -87,19 +97,19 @@ export default {
       }
       this.$refs.chart.setAttribute('id', this.chartId);
 
-      const renderObject = {
+      this.renderObject = {
         id: this.chartId,
         data: this.chartData,
         height: this.$props.height,
         width: this.$props.width,
         output: this.$props.output,
       };
       if(this.$props.modules) {
-        renderObject.modules = this.$props.modules;
+        this.renderObject.modules = this.$props.modules;
       }
 
       if(this.$props.theme) {
-        renderObject.defaults = this.$props.theme;
+        this.renderObject.defaults = this.$props.theme;
       }
 
       // Pipe zingchart specific event listeners
@@ -113,7 +123,7 @@ export default {
       });
 
       // Render the chart
-      window.zingchart.render(renderObject);
+      window.zingchart.render(this.renderObject);
 
       // Apply all of ZingChart's methods directly to the Vue instance
       this.METHOD_NAMES.forEach(name => {
@@ -133,9 +143,14 @@ export default {
   },
   watch: {
     data: function() {
-      window.zingchart.exec(this.chartId, 'setdata', {
-        data: this.chartData,
-      });
+      if(this.forceRenderOnChange) {
+        this.renderObject.data = this.chartData;
+        window.zingchart.render(this.renderObject);
+      } else {
+        window.zingchart.exec(this.chartId, 'setdata', {
+          data: this.chartData,
+        });
+      }
     },
     height: function() { this.resize() },
     series: function() {

dist/zingchartVue.common.js

@@ -1,6 +1,6 @@
 {
   "name": "zingchart-vue",
-  "version": "2.0.2",
+  "version": "2.0.3",
   "description": "ZingChart Vue Component wrapper to allow native vue syntax for javascript charts, chart events, chart methods and chart styling.",
   "author": "ZingSoft Inc",
   "scripts": {