fixing charts with mixed (negative/positive) values

src/ui/public/vislib/lib/axis/axis.js

@@ -41,6 +41,13 @@ export default function AxisFactory(Private) {
         return d.y;
       })
       .offset(this.axisConfig.get('scale.offset', 'zero'));
+
+      const stackedMode = ['normal', 'grouped'].includes(this.axisConfig.get('scale.mode'));
+      if (stackedMode) {
+        this.stack.out((d, y0, y) => {
+          return this._stackNegAndPosVals(d, y0, y);
+        });
+      }
     }
 
     /**
@@ -77,6 +84,7 @@ export default function AxisFactory(Private) {
      * Calculates the d.y0 value for stacked data in D3.
      */
     _calcYZero(y, arr) {
+      if (y === 0 && this._lastY0) return this._sumYs(arr, this._lastY0 > 0 ? this._isPositive : this._isNegative);
       if (y >= 0) return this._sumYs(arr, this._isPositive);
       return this._sumYs(arr, this._isNegative);
     };
@@ -121,6 +129,8 @@ export default function AxisFactory(Private) {
       }
 
       d.y0 = this._calcYZero(y, this._cache.yValsArr);
+      if (d.y0 > 0) this._lastY0 = 1;
+      if (d.y0 < 0) this._lastY0 = -1;
       ++this._cache.index.stack;
 
 

src/ui/public/vislib/lib/axis/axis_config.js

@@ -123,6 +123,9 @@ export default function AxisConfigFactory() {
           offset = 'zero';
           stacked = false;
           break;
+        case SCALE_MODES.GROUPED:
+          offset = 'group';
+          break;
         case SCALE_MODES.PERCENTAGE:
           offset = 'expand';
           break;

src/ui/public/vislib/lib/axis/scale_modes.js

@@ -3,6 +3,7 @@ const SCALE_MODES = {
   PERCENTAGE: 'percentage',
   WIGGLE: 'wiggle',
   SILHOUETTE: 'silhouette',
+  GROUPED: 'grouped', // this should not be a scale mode but it is at this point to make it compatible with old charts
   ALL: ['normal', 'percentage', 'wiggle', 'silhouette']
 };
 

src/ui/public/vislib/visualizations/point_series/column_chart.js

@@ -35,9 +35,7 @@ export default function ColumnChartFactory(Private) {
       const isTooltip = this.handler.visConfig.get('tooltip.show');
 
       const layer = svg.append('g')
-      .attr('class', function (d, i) {
-        return `series series-${i}`;
-      })
+      .attr('class', 'series')
       .attr('clip-path', 'url(#' + this.baseChart.clipPathId + ')');
 
       const bars = layer.selectAll('rect')
@@ -110,25 +108,20 @@ export default function ColumnChartFactory(Private) {
       }
 
       function x(d) {
-        if (isTimeScale) {
-          return xScale(d.x) + barWidth * groupNum;
-        }
-        return xScale(d.x) + xScale.rangeBand() / groupCount * groupNum;
+        const groupPosition = isTimeScale ? barWidth * groupNum : xScale.rangeBand() / groupCount * groupNum;
+        return xScale(d.x) + groupPosition;
       }
 
       function y(d) {
         if ((isHorizontal && d.y < 0) || (!isHorizontal && d.y > 0)) {
-          return yScale(0);
+          return yScale(d.y0);
         }
-        if (!isHorizontal && d.y < 0) return yScale(d.y);
+        /*if (!isHorizontal && d.y < 0) return yScale(d.y);*/
         return yScale(d.y0 + d.y);
       }
 
       function widthFunc() {
-        if (isTimeScale) {
-          return barWidth;
-        }
-        return xScale.rangeBand() / groupCount;
+        return isTimeScale ? barWidth : xScale.rangeBand() / groupCount;
       }
 
       function heightFunc(d) {