@websy/websy-designs 1.6.0 → 1.6.2

package/dist/websy-designs.debug.js

@@ -4159,15 +4159,18 @@ class WebsyRouter {
     let inputPath = this.currentView
     if (this.options.urlPrefix) {
       inputPath = `/${this.options.urlPrefix}/${inputPath}`
+    }
+    this.currentParams = {
+      path: '',
+      items: {}
     }    
     if (reloadView === true) {
       this.navigate(`${inputPath}`, 'main', null, noHistory)
     }
     else {
-      this.currentParams = {
-        path: '',
-        items: {}
-      }
+      history.replaceState({
+        inputPath
+      }, 'unused', inputPath)
     }
   }
   buildUrlPath (params) {
@@ -7890,12 +7893,12 @@ else {
     this.brushLayer
       .attr('transform', `translate(${this.options.margin.left + this.options.margin.axisLeft}, ${this.options.margin.top + this.options.margin.axisTop + this.plotHeight + longestBottomBounds.height})`)         
     this.clip
-      .attr('transform', `translate(${this.options.margin.left + this.options.margin.axisLeft}, ${this.options.margin.top + this.options.margin.axisTop})`)
+      .attr('transform', `translate(${this.options.margin.left + this.options.margin.axisLeft}, 0)`)
       .attr('width', this.plotWidth)
-      .attr('height', this.plotHeight)   
+      .attr('height', this.plotHeight + this.options.margin.top + this.options.margin.axisTop)   
     this.xAxisClip
       .attr('transform', `translate(${this.options.margin.left}, ${this.options.margin.top + this.options.margin.axisTop + this.plotHeight})`)
-      .attr('width', this.plotWidth + this.options.margin.axisLeft)
+      .attr('width', this.plotWidth + this.options.margin.axisLeft + this.options.margin.axisRight)
       .attr('height', longestBottomBounds.height + 10)      
     this.brushClip
       .attr('transform', `translate(${this.options.margin.left + this.options.margin.axisLeft}, ${this.options.margin.top + this.options.margin.axisTop + this.plotHeight + longestBottomBounds.height})`)               
@@ -8192,7 +8195,11 @@ else {
             }            
             return d
           })        
-      )      
+      ) 
+      if (this.customLeftRange.length > 0) {
+        this.leftAxisLayer.selectAll('g')
+          .attr('transform', (d, i) => `translate(0, ${this.customLeftRange[i] + ((this.customLeftRange[i + 1] - this.customLeftRange[i]) / 2)})`)
+      }     
     }  
     if (this.options.data.left && this.options.data.left.showTitle === true) {
       this.leftAxisLabel.selectAll('.title').remove()
@@ -8288,7 +8295,11 @@ else {
     for (const key in this.renderedKeys) {
       if (newKeys.indexOf(key) === -1) {
         // remove the components
-        this[`remove${this.renderedKeys[key]}`](key)
+        // this[`remove${this.renderedKeys[key]}`](key)
+        this.removeline(key)
+        this.removebar(key)
+        this.removesymbol(key)
+        this.removelabel(key)
       }
     }
     this.renderComponents()
@@ -8386,10 +8397,10 @@ if (this.options.orientation === 'horizontal') {
   xAxis = 'left'
   yAxis = 'bottom'
 }
-function getBarHeight (d, i, heightBounds, yAxis, xAxis) {  
+function getBarHeight (d, i, yAxis, xAxis) {  
   let output
   if (this.options.orientation === 'horizontal') {
-    output = this.options.data[xAxis].bandWidth
+    output = Math.max(1, this.options.data[xAxis].bandWidth - (xAxis.indexOf('Brush') !== -1 ? 2 : this.options.groupPadding * 2))    
   }
   else {
     let x = getBarX.call(this, d, i, xAxis)
@@ -8406,9 +8417,7 @@ function getBarHeight (d, i, heightBounds, yAxis, xAxis) {
 function getBarWidth (d, i, xAxis) {  
   let output
   if (this.options.orientation === 'horizontal') {    
-    let width = (this[`${yAxis}Axis`](0)) - this[`${yAxis}Axis`](Math.abs(d.y.value))
-    acummulativeY[d.y.index] += width
-    output = width
+    output = this[`${yAxis}Axis`](Math.abs(d.y.value))
   }
   else {
     let x = getBarX.call(this, d, i, xAxis)
@@ -8426,12 +8435,15 @@ function getBarX (d, i, xAxis) {
   let output
   if (this.options.orientation === 'horizontal') {
     if (this.options.grouping === 'stacked') {      
-      let h = getBarWidth.call(this, d, i, xAxis)
-      let adjustment = 0
-      if (d.y.accumulative && d.y.accumulative !== 0) {
-        adjustment = this[`${yAxis}Axis`](d.y.accumulative || 0)
-      }
-      output = this[`${yAxis}Axis`](0) + (adjustment * (d.y.value < 0 ? 1 : 0)) + (h * (d.y.value < 0 ? 1 : 0))
+      // let h = getBarWidth.call(this, d, i, xAxis)
+      // let adjustment = 0
+      // if (d.y.accumulative && d.y.accumulative !== 0) {
+      //   adjustment = this[`${yAxis}Axis`](d.y.accumulative || 0)
+      // }
+      // output = this[`${yAxis}Axis`](0) + (adjustment * (d.y.value < 0 ? 1 : 0)) + (h * (d.y.value < 0 ? 1 : 0))
+      let accH = getBarWidth.call(this, {x: d.x, y: { value: d.y.accumulative }}, i, xAxis)
+      // let h = getBarWidth.call(this, d, i, xAxis)      
+      output = (accH * (d.y.accumulative < 0 ? 0 : 1))
     }
     else {
       let h = getBarWidth.call(this, d, i, xAxis)
@@ -8470,8 +8482,9 @@ function getBarX (d, i, xAxis) {
       }
       // console.log(d.x.value, d.y.tooltipLabel, xIndex, i, barAdjustment, output)  
     }
-    else {      
-      output = this[`custom${xAxis.toInitialCaps()}Range`][this[xAxis + 'Axis'].domain().indexOf(d.x.value)]
+    else { 
+      let barAdjustment = ((xAxis.indexOf('Brush') !== -1 ? this.brushBandPadding : this.bandPadding) / 2) + (xAxis.indexOf('Brush') !== -1 ? 1 : this.options.groupPadding)
+      output = this[`custom${xAxis.toInitialCaps()}Range`][this[xAxis + 'Axis'].domain().indexOf(d.x.value)] + barAdjustment
     }    
   }
   if (isNaN(output)) {
@@ -8479,11 +8492,12 @@ function getBarX (d, i, xAxis) {
   }
   return output
 }
-function getBarY (d, i, heightBounds, yAxis, xAxis) {  
+function getBarY (d, i, yAxis, xAxis) {  
   let output
   if (this.options.orientation === 'horizontal') {
     if (this.options.grouping !== 'grouped') {
-      output = this[`${xAxis}Axis`](this.parseX(d.x.value))
+      let barAdjustment = ((xAxis.indexOf('Brush') !== -1 ? this.brushBandPadding : this.bandPadding) / 2) + (xAxis.indexOf('Brush') !== -1 ? 1 : this.options.groupPadding)
+      output = this[`custom${xAxis.toInitialCaps()}Range`][this[xAxis + 'Axis'].domain().indexOf(d.x.value)] + barAdjustment
     }
     else {
       output = this[`${xAxis}Axis`](this.parseX(d.x.value)) + ((d.y.index || i) * this.options.data[xAxis.replace('Brush', '')].barWidth)
@@ -8491,13 +8505,12 @@ function getBarY (d, i, heightBounds, yAxis, xAxis) {
   }
   else {
     if (this.options.grouping === 'stacked') {      
-      let accH = getBarHeight.call(this, {x: d.x, y: { value: d.y.accumulative }}, i, heightBounds, yAxis, xAxis)
-      let h = getBarHeight.call(this, d, i, heightBounds, yAxis, xAxis)
-      // output = heightBounds - this[`${yAxis}Axis`](d.y.accumulative)
+      let accH = getBarHeight.call(this, {x: d.x, y: { value: d.y.accumulative }}, i, yAxis, xAxis)
+      let h = getBarHeight.call(this, d, i, yAxis, xAxis)      
       output = (this[`${yAxis}Axis`](0)) - ((accH + h) * (d.y.accumulative < 0 ? 0 : 1))
     }
     else {
-      let h = getBarHeight.call(this, d, i, heightBounds, yAxis, xAxis)
+      let h = getBarHeight.call(this, d, i, yAxis, xAxis)
       output = (this[`${yAxis}Axis`](0)) - (h * (d.y.value < 0 ? 0 : 1))
     }
   }
@@ -8514,9 +8527,9 @@ bars
 
 bars
   .attr('width', (d, i) => Math.abs(getBarWidth.call(this, d, i, xAxis)))
-  .attr('height', (d, i) => getBarHeight.call(this, d, i, this.plotHeight, yAxis, xAxis))
+  .attr('height', (d, i) => getBarHeight.call(this, d, i, yAxis, xAxis))
   .attr('x', (d, i) => getBarX.call(this, d, i, xAxis))  
-  .attr('y', (d, i) => getBarY.call(this, d, i, this.plotHeight, yAxis, xAxis))
+  .attr('y', (d, i) => getBarY.call(this, d, i, yAxis, xAxis))
   // .transition(this.transition)  
   .attr('fill', d => d.y.color || d.color || series.color)
 
@@ -8524,9 +8537,9 @@ bars
   .enter()
   .append('rect')
   .attr('width', (d, i) => Math.abs(getBarWidth.call(this, d, i, xAxis)))
-  .attr('height', (d, i) => getBarHeight.call(this, d, i, this.plotHeight, yAxis, xAxis))
+  .attr('height', (d, i) => getBarHeight.call(this, d, i, yAxis, xAxis))
   .attr('x', (d, i) => getBarX.call(this, d, i, xAxis))  
-  .attr('y', (d, i) => getBarY.call(this, d, i, this.plotHeight, yAxis, xAxis))
+  .attr('y', (d, i) => getBarY.call(this, d, i, yAxis, xAxis))
   // .transition(this.transition)
   .attr('fill', d => d.y.color || d.color || series.color)
   .attr('class', d => {
@@ -8543,9 +8556,9 @@ if (!this.brushBarsInitialized[series.key]) {
 
   brushBars
     .attr('width', (d, i) => Math.abs(getBarWidth.call(this, d, i, `${xAxis}Brush`)))
-    .attr('height', (d, i) => getBarHeight.call(this, d, i, this.options.brushHeight, `${yAxis}Brush`, `${xAxis}Brush`))
+    .attr('height', (d, i) => getBarHeight.call(this, d, i, `${yAxis}Brush`, `${xAxis}Brush`))
     .attr('x', (d, i) => getBarX.call(this, d, i, `${xAxis}Brush`))  
-    .attr('y', (d, i) => getBarY.call(this, d, i, this.options.brushHeight, `${yAxis}Brush`, `${xAxis}Brush`))
+    .attr('y', (d, i) => getBarY.call(this, d, i, `${yAxis}Brush`, `${xAxis}Brush`))
     // .transition(this.transition)  
     .attr('fill', d => d.y.color || d.color || series.color)
 
@@ -8553,9 +8566,9 @@ if (!this.brushBarsInitialized[series.key]) {
     .enter()
     .append('rect')
     .attr('width', (d, i) => Math.abs(getBarWidth.call(this, d, i, `${xAxis}Brush`)))
-    .attr('height', (d, i) => getBarHeight.call(this, d, i, this.options.brushHeight, `${yAxis}Brush`, `${xAxis}Brush`))
+    .attr('height', (d, i) => getBarHeight.call(this, d, i, `${yAxis}Brush`, `${xAxis}Brush`))
     .attr('x', (d, i) => getBarX.call(this, d, i, `${xAxis}Brush`))  
-    .attr('y', (d, i) => getBarY.call(this, d, i, this.options.brushHeight, `${yAxis}Brush`, `${xAxis}Brush`))
+    .attr('y', (d, i) => getBarY.call(this, d, i, `${yAxis}Brush`, `${xAxis}Brush`))
     // .transition(this.transition)
     .attr('fill', d => d.y.color || d.color || series.color)
     .attr('class', d => {
@@ -8679,10 +8692,10 @@ if (this.options.showLabels === true || series.showLabels === true) {
 function getLabelX (d, labelPosition = 'inside') {
   if (this.options.orientation === 'horizontal') {
     if (this.options.grouping === 'stacked') {
-      return this[yAxis](d.y.accumulative) + (this[yAxis](d.y.value) / (labelPosition === 'inside' ? 2 : 1))
+      return this[yAxis + 'Axis'](d.y.accumulative) + (this[yAxis + 'Axis'](d.y.value) / (labelPosition === 'inside' ? 2 : 1))
     }
     else {
-      return this[yAxis](isNaN(d.y.value) ? 0 : d.y.value) + 4
+      return this[yAxis + 'Axis'](isNaN(d.y.value) ? 0 : d.y.value) + 4
     }
   }
   else {    
@@ -8697,7 +8710,12 @@ function getLabelX (d, labelPosition = 'inside') {
 }
 function getLabelY (d, labelPosition = 'inside') {
   if (this.options.orientation === 'horizontal') {    
-    return this[xAxis + 'Axis'](this.parseX(d.x.value)) + (this.options.data[xAxis].bandWidth / 2)
+    let xIndex = this[xAxis + 'Axis'].domain().indexOf(d.x.value)
+    let xPos = this[`custom${xAxis.toInitialCaps()}Range`][xIndex]
+    if (this[`custom${xAxis.toInitialCaps()}Range`][xIndex + 1]) {
+      xPos = xPos + ((this[`custom${xAxis.toInitialCaps()}Range`][xIndex + 1] - xPos) / 2)
+    }
+    return xPos
   }
   else {
     if (this.options.grouping === 'stacked') {
@@ -8872,6 +8890,26 @@ let lines = this.lineLayer.selectAll(`.line_${key}`)
   .transition(this.transition)
   .style('stroke-opacity', 1e-6)
   .remove()
+let areas = this.areaLayer.selectAll(`.area_${key}`)
+  .transition(this.transition)
+  .style('stroke-opacity', 1e-6)
+  .remove()
+
+  }
+  removelabel (key) {
+    /* global key d3 */
+let labels = this.labelLayer.selectAll(`.label_${key}`)
+  .transition(this.transition)
+  .style('stroke-opacity', 1e-6)
+  .remove()
+
+  }
+  removesymbol (key) {
+    /* global key d3 */
+let symbols = this.symbolLayer.selectAll(`.symbol_${key}`)
+  .transition(this.transition)
+  .style('stroke-opacity', 1e-6)
+  .remove()
 
   }
   rendersymbol (series, index) {

package/dist/websy-designs.js

@@ -4539,13 +4539,17 @@ var WebsyRouter = /*#__PURE__*/function () {
         inputPath = "/".concat(this.options.urlPrefix, "/").concat(inputPath);
       }
 
+      this.currentParams = {
+        path: '',
+        items: {}
+      };
+
       if (reloadView === true) {
         this.navigate("".concat(inputPath), 'main', null, noHistory);
       } else {
-        this.currentParams = {
-          path: '',
-          items: {}
-        };
+        history.replaceState({
+          inputPath: inputPath
+        }, 'unused', inputPath);
       }
     }
   }, {
@@ -8689,8 +8693,8 @@ var WebsyChart = /*#__PURE__*/function () {
           this.refLineLayer.attr('transform', "translate(".concat(this.options.margin.left + this.options.margin.axisLeft, ", ").concat(this.options.margin.top + this.options.margin.axisTop, ")"));
           this.trackingLineLayer.attr('transform', "translate(".concat(this.options.margin.left + this.options.margin.axisLeft, ", ").concat(this.options.margin.top + this.options.margin.axisTop, ")"));
           this.brushLayer.attr('transform', "translate(".concat(this.options.margin.left + this.options.margin.axisLeft, ", ").concat(this.options.margin.top + this.options.margin.axisTop + this.plotHeight + longestBottomBounds.height, ")"));
-          this.clip.attr('transform', "translate(".concat(this.options.margin.left + this.options.margin.axisLeft, ", ").concat(this.options.margin.top + this.options.margin.axisTop, ")")).attr('width', this.plotWidth).attr('height', this.plotHeight);
-          this.xAxisClip.attr('transform', "translate(".concat(this.options.margin.left, ", ").concat(this.options.margin.top + this.options.margin.axisTop + this.plotHeight, ")")).attr('width', this.plotWidth + this.options.margin.axisLeft).attr('height', longestBottomBounds.height + 10);
+          this.clip.attr('transform', "translate(".concat(this.options.margin.left + this.options.margin.axisLeft, ", 0)")).attr('width', this.plotWidth).attr('height', this.plotHeight + this.options.margin.top + this.options.margin.axisTop);
+          this.xAxisClip.attr('transform', "translate(".concat(this.options.margin.left, ", ").concat(this.options.margin.top + this.options.margin.axisTop + this.plotHeight, ")")).attr('width', this.plotWidth + this.options.margin.axisLeft + this.options.margin.axisRight).attr('height', longestBottomBounds.height + 10);
           this.brushClip.attr('transform', "translate(".concat(this.options.margin.left + this.options.margin.axisLeft, ", ").concat(this.options.margin.top + this.options.margin.axisTop + this.plotHeight + longestBottomBounds.height, ")")).attr('width', this.plotWidth).attr('height', this.options.brushHeight);
           this.eventLayer.attr('transform', "translate(".concat(this.options.margin.left + this.options.margin.axisLeft, ", ").concat(this.options.margin.top + this.options.margin.axisTop, ")"));
           var that = this;
@@ -8969,6 +8973,12 @@ var WebsyChart = /*#__PURE__*/function () {
 
               return d;
             }));
+
+            if (this.customLeftRange.length > 0) {
+              this.leftAxisLayer.selectAll('g').attr('transform', function (d, i) {
+                return "translate(0, ".concat(_this48.customLeftRange[i] + (_this48.customLeftRange[i + 1] - _this48.customLeftRange[i]) / 2, ")");
+              });
+            }
           }
 
           if (this.options.data.left && this.options.data.left.showTitle === true) {
@@ -9031,7 +9041,11 @@ var WebsyChart = /*#__PURE__*/function () {
           for (var key in this.renderedKeys) {
             if (newKeys.indexOf(key) === -1) {
               // remove the components
-              this["remove".concat(this.renderedKeys[key])](key);
+              // this[`remove${this.renderedKeys[key]}`](key)
+              this.removeline(key);
+              this.removebar(key);
+              this.removesymbol(key);
+              this.removelabel(key);
             }
           }
 
@@ -9144,11 +9158,11 @@ var WebsyChart = /*#__PURE__*/function () {
         yAxis = 'bottom';
       }
 
-      function getBarHeight(d, i, heightBounds, yAxis, xAxis) {
+      function getBarHeight(d, i, yAxis, xAxis) {
         var output;
 
         if (this.options.orientation === 'horizontal') {
-          output = this.options.data[xAxis].bandWidth;
+          output = Math.max(1, this.options.data[xAxis].bandWidth - (xAxis.indexOf('Brush') !== -1 ? 2 : this.options.groupPadding * 2));
         } else {
           var x = getBarX.call(this, d, i, xAxis);
 
@@ -9170,9 +9184,7 @@ var WebsyChart = /*#__PURE__*/function () {
         var output;
 
         if (this.options.orientation === 'horizontal') {
-          var width = this["".concat(yAxis, "Axis")](0) - this["".concat(yAxis, "Axis")](Math.abs(d.y.value));
-          acummulativeY[d.y.index] += width;
-          output = width;
+          output = this["".concat(yAxis, "Axis")](Math.abs(d.y.value));
         } else {
           var x = getBarX.call(this, d, i, xAxis);
 
@@ -9195,18 +9207,23 @@ var WebsyChart = /*#__PURE__*/function () {
 
         if (this.options.orientation === 'horizontal') {
           if (this.options.grouping === 'stacked') {
-            var h = getBarWidth.call(this, d, i, xAxis);
-            var adjustment = 0;
-
-            if (d.y.accumulative && d.y.accumulative !== 0) {
-              adjustment = this["".concat(yAxis, "Axis")](d.y.accumulative || 0);
-            }
+            // let h = getBarWidth.call(this, d, i, xAxis)
+            // let adjustment = 0
+            // if (d.y.accumulative && d.y.accumulative !== 0) {
+            //   adjustment = this[`${yAxis}Axis`](d.y.accumulative || 0)
+            // }
+            // output = this[`${yAxis}Axis`](0) + (adjustment * (d.y.value < 0 ? 1 : 0)) + (h * (d.y.value < 0 ? 1 : 0))
+            var accH = getBarWidth.call(this, {
+              x: d.x,
+              y: {
+                value: d.y.accumulative
+              }
+            }, i, xAxis); // let h = getBarWidth.call(this, d, i, xAxis)      
 
-            output = this["".concat(yAxis, "Axis")](0) + adjustment * (d.y.value < 0 ? 1 : 0) + h * (d.y.value < 0 ? 1 : 0);
+            output = accH * (d.y.accumulative < 0 ? 0 : 1);
           } else {
-            var _h = getBarWidth.call(this, d, i, xAxis);
-
-            output = this["".concat(yAxis, "Axis")](0) + _h * (d.y.value < 0 ? 1 : 0);
+            var h = getBarWidth.call(this, d, i, xAxis);
+            output = this["".concat(yAxis, "Axis")](0) + h * (d.y.value < 0 ? 1 : 0);
           }
         } else {
           // let adjustment = this.options.data[xAxis.replace('Brush', '')].scale === 'Time' ? 0 : this.options.data[xAxis.replace('Brush', '')].bandWidth / 2
@@ -9243,7 +9260,9 @@ var WebsyChart = /*#__PURE__*/function () {
             } // console.log(d.x.value, d.y.tooltipLabel, xIndex, i, barAdjustment, output)  
 
           } else {
-            output = this["custom".concat(xAxis.toInitialCaps(), "Range")][this[xAxis + 'Axis'].domain().indexOf(d.x.value)];
+            var _barAdjustment = (xAxis.indexOf('Brush') !== -1 ? this.brushBandPadding : this.bandPadding) / 2 + (xAxis.indexOf('Brush') !== -1 ? 1 : this.options.groupPadding);
+
+            output = this["custom".concat(xAxis.toInitialCaps(), "Range")][this[xAxis + 'Axis'].domain().indexOf(d.x.value)] + _barAdjustment;
           }
         }
 
@@ -9254,12 +9273,13 @@ var WebsyChart = /*#__PURE__*/function () {
         return output;
       }
 
-      function getBarY(d, i, heightBounds, yAxis, xAxis) {
+      function getBarY(d, i, yAxis, xAxis) {
         var output;
 
         if (this.options.orientation === 'horizontal') {
           if (this.options.grouping !== 'grouped') {
-            output = this["".concat(xAxis, "Axis")](this.parseX(d.x.value));
+            var barAdjustment = (xAxis.indexOf('Brush') !== -1 ? this.brushBandPadding : this.bandPadding) / 2 + (xAxis.indexOf('Brush') !== -1 ? 1 : this.options.groupPadding);
+            output = this["custom".concat(xAxis.toInitialCaps(), "Range")][this[xAxis + 'Axis'].domain().indexOf(d.x.value)] + barAdjustment;
           } else {
             output = this["".concat(xAxis, "Axis")](this.parseX(d.x.value)) + (d.y.index || i) * this.options.data[xAxis.replace('Brush', '')].barWidth;
           }
@@ -9270,14 +9290,13 @@ var WebsyChart = /*#__PURE__*/function () {
               y: {
                 value: d.y.accumulative
               }
-            }, i, heightBounds, yAxis, xAxis);
-            var h = getBarHeight.call(this, d, i, heightBounds, yAxis, xAxis); // output = heightBounds - this[`${yAxis}Axis`](d.y.accumulative)
-
+            }, i, yAxis, xAxis);
+            var h = getBarHeight.call(this, d, i, yAxis, xAxis);
             output = this["".concat(yAxis, "Axis")](0) - (accH + h) * (d.y.accumulative < 0 ? 0 : 1);
           } else {
-            var _h2 = getBarHeight.call(this, d, i, heightBounds, yAxis, xAxis);
+            var _h = getBarHeight.call(this, d, i, yAxis, xAxis);
 
-            output = this["".concat(yAxis, "Axis")](0) - _h2 * (d.y.value < 0 ? 0 : 1);
+            output = this["".concat(yAxis, "Axis")](0) - _h * (d.y.value < 0 ? 0 : 1);
           }
         }
 
@@ -9292,11 +9311,11 @@ var WebsyChart = /*#__PURE__*/function () {
       bars.attr('width', function (d, i) {
         return Math.abs(getBarWidth.call(_this51, d, i, xAxis));
       }).attr('height', function (d, i) {
-        return getBarHeight.call(_this51, d, i, _this51.plotHeight, yAxis, xAxis);
+        return getBarHeight.call(_this51, d, i, yAxis, xAxis);
       }).attr('x', function (d, i) {
         return getBarX.call(_this51, d, i, xAxis);
       }).attr('y', function (d, i) {
-        return getBarY.call(_this51, d, i, _this51.plotHeight, yAxis, xAxis);
+        return getBarY.call(_this51, d, i, yAxis, xAxis);
       }) // .transition(this.transition)  
       .attr('fill', function (d) {
         return d.y.color || d.color || series.color;
@@ -9304,11 +9323,11 @@ var WebsyChart = /*#__PURE__*/function () {
       bars.enter().append('rect').attr('width', function (d, i) {
         return Math.abs(getBarWidth.call(_this51, d, i, xAxis));
       }).attr('height', function (d, i) {
-        return getBarHeight.call(_this51, d, i, _this51.plotHeight, yAxis, xAxis);
+        return getBarHeight.call(_this51, d, i, yAxis, xAxis);
       }).attr('x', function (d, i) {
         return getBarX.call(_this51, d, i, xAxis);
       }).attr('y', function (d, i) {
-        return getBarY.call(_this51, d, i, _this51.plotHeight, yAxis, xAxis);
+        return getBarY.call(_this51, d, i, yAxis, xAxis);
       }) // .transition(this.transition)
       .attr('fill', function (d) {
         return d.y.color || d.color || series.color;
@@ -9322,11 +9341,11 @@ var WebsyChart = /*#__PURE__*/function () {
         brushBars.attr('width', function (d, i) {
           return Math.abs(getBarWidth.call(_this51, d, i, "".concat(xAxis, "Brush")));
         }).attr('height', function (d, i) {
-          return getBarHeight.call(_this51, d, i, _this51.options.brushHeight, "".concat(yAxis, "Brush"), "".concat(xAxis, "Brush"));
+          return getBarHeight.call(_this51, d, i, "".concat(yAxis, "Brush"), "".concat(xAxis, "Brush"));
         }).attr('x', function (d, i) {
           return getBarX.call(_this51, d, i, "".concat(xAxis, "Brush"));
         }).attr('y', function (d, i) {
-          return getBarY.call(_this51, d, i, _this51.options.brushHeight, "".concat(yAxis, "Brush"), "".concat(xAxis, "Brush"));
+          return getBarY.call(_this51, d, i, "".concat(yAxis, "Brush"), "".concat(xAxis, "Brush"));
         }) // .transition(this.transition)  
         .attr('fill', function (d) {
           return d.y.color || d.color || series.color;
@@ -9334,11 +9353,11 @@ var WebsyChart = /*#__PURE__*/function () {
         brushBars.enter().append('rect').attr('width', function (d, i) {
           return Math.abs(getBarWidth.call(_this51, d, i, "".concat(xAxis, "Brush")));
         }).attr('height', function (d, i) {
-          return getBarHeight.call(_this51, d, i, _this51.options.brushHeight, "".concat(yAxis, "Brush"), "".concat(xAxis, "Brush"));
+          return getBarHeight.call(_this51, d, i, "".concat(yAxis, "Brush"), "".concat(xAxis, "Brush"));
         }).attr('x', function (d, i) {
           return getBarX.call(_this51, d, i, "".concat(xAxis, "Brush"));
         }).attr('y', function (d, i) {
-          return getBarY.call(_this51, d, i, _this51.options.brushHeight, "".concat(yAxis, "Brush"), "".concat(xAxis, "Brush"));
+          return getBarY.call(_this51, d, i, "".concat(yAxis, "Brush"), "".concat(xAxis, "Brush"));
         }) // .transition(this.transition)
         .attr('fill', function (d) {
           return d.y.color || d.color || series.color;
@@ -9451,9 +9470,9 @@ var WebsyChart = /*#__PURE__*/function () {
 
         if (this.options.orientation === 'horizontal') {
           if (this.options.grouping === 'stacked') {
-            return this[yAxis](d.y.accumulative) + this[yAxis](d.y.value) / (labelPosition === 'inside' ? 2 : 1);
+            return this[yAxis + 'Axis'](d.y.accumulative) + this[yAxis + 'Axis'](d.y.value) / (labelPosition === 'inside' ? 2 : 1);
           } else {
-            return this[yAxis](isNaN(d.y.value) ? 0 : d.y.value) + 4;
+            return this[yAxis + 'Axis'](isNaN(d.y.value) ? 0 : d.y.value) + 4;
           }
         } else {
           // return this[xAxis](this.parseX(d.x.value)) + (this.options.data[xAxis.replace('Axis', '')].bandWidth / 2)
@@ -9472,7 +9491,14 @@ var WebsyChart = /*#__PURE__*/function () {
         var labelPosition = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'inside';
 
         if (this.options.orientation === 'horizontal') {
-          return this[xAxis + 'Axis'](this.parseX(d.x.value)) + this.options.data[xAxis].bandWidth / 2;
+          var xIndex = this[xAxis + 'Axis'].domain().indexOf(d.x.value);
+          var xPos = this["custom".concat(xAxis.toInitialCaps(), "Range")][xIndex];
+
+          if (this["custom".concat(xAxis.toInitialCaps(), "Range")][xIndex + 1]) {
+            xPos = xPos + (this["custom".concat(xAxis.toInitialCaps(), "Range")][xIndex + 1] - xPos) / 2;
+          }
+
+          return xPos;
         } else {
           if (this.options.grouping === 'stacked') {
             var accH = this["".concat(yAxis, "Axis")](0) - this["".concat(yAxis, "Axis")](Math.abs(d.y.accumulative));
@@ -9611,6 +9637,19 @@ var WebsyChart = /*#__PURE__*/function () {
     value: function removeline(key) {
       /* global key d3 */
       var lines = this.lineLayer.selectAll(".line_".concat(key)).transition(this.transition).style('stroke-opacity', 1e-6).remove();
+      var areas = this.areaLayer.selectAll(".area_".concat(key)).transition(this.transition).style('stroke-opacity', 1e-6).remove();
+    }
+  }, {
+    key: "removelabel",
+    value: function removelabel(key) {
+      /* global key d3 */
+      var labels = this.labelLayer.selectAll(".label_".concat(key)).transition(this.transition).style('stroke-opacity', 1e-6).remove();
+    }
+  }, {
+    key: "removesymbol",
+    value: function removesymbol(key) {
+      /* global key d3 */
+      var symbols = this.symbolLayer.selectAll(".symbol_".concat(key)).transition(this.transition).style('stroke-opacity', 1e-6).remove();
     }
   }, {
     key: "rendersymbol",