Fixing BarSeries overlapped

src/plot/series/bar-series-canvas.js

@@ -67,21 +67,32 @@ class BarSeriesCanvas extends AbstractSeries {
       getAttributeFunctor(props, 'color');
     const opacity = getAttributeFunctor(props, 'opacity');
 
-    const itemSize = (distance / 2) * 0.85;
+    const halfSpace = (distance / 2) * 0.85;
+    // totalSpaceAvailable is the space we have available to draw all the
+    // bars of a same 'linePosAttr' value (a.k.a. sameTypeTotal)
+    const totalSpaceAvailable = halfSpace * 2;
 
     const {sameTypeTotal, sameTypeIndex} = getStackParams(props);
     data.forEach(row => {
+      const totalSpaceCenter = line(row);
+      // totalSpaceStartingPoint is the first pixel were we can start drawing
+      const totalSpaceStartingPoint = totalSpaceCenter - halfSpace;
+
+      // spaceTakenByInterBarsPixels has the overhead space consumed by each bar of sameTypeTotal
+      const spaceTakenByInterBarsPixels = (sameTypeTotal - 1) / sameTypeTotal;
+      // lineSize is the space we have available to draw sameTypeIndex bar
+      const lineSize = (totalSpaceAvailable / sameTypeTotal) - spaceTakenByInterBarsPixels;
+
       const fillColor = rgb(fill(row));
       const strokeColor = rgb(stroke(row));
       const rowOpacity = opacity(row) || DEFAULT_OPACITY;
 
-      const linePos =
-        line(row) - itemSize + ((itemSize * 2) / sameTypeTotal) * sameTypeIndex;
+      // linePos is the first pixel were we can start drawing sameTypeIndex bar
+      const linePos = totalSpaceStartingPoint + lineSize * sameTypeIndex + sameTypeIndex;
       const valuePos = Math.min(value0(row), value(row));
       const x = valuePosAttr === 'x' ? valuePos : linePos;
       const y = valuePosAttr === 'y' ? valuePos : linePos;
 
-      const lineSize = (itemSize * 2) / sameTypeTotal;
       const valueSize = Math.abs(-value0(row) + value(row));
       const height = lineSizeAttr === 'height' ? lineSize : valueSize;
       const width = lineSizeAttr === 'width' ? lineSize : valueSize;

src/plot/series/bar-series.js

@@ -87,26 +87,37 @@ class BarSeries extends AbstractSeries {
       this._getAttributeFunctor('stroke') || this._getAttributeFunctor('color');
     const opacityFunctor = this._getAttributeFunctor('opacity');
 
-    const itemSize = (distance / 2) * barWidth;
+    const halfSpace = (distance / 2) * barWidth;
 
     return (
       <g
         className={`${predefinedClassName} ${className}`}
         transform={`translate(${marginLeft},${marginTop})`}
       >
         {data.map((d, i) => {
+          // totalSpaceAvailable is the space we have available to draw all the
+          // bars of a same 'linePosAttr' value (a.k.a. sameTypeTotal)
+          const totalSpaceAvailable = halfSpace * 2;
+          const totalSpaceCenter = lineFunctor(d);
+          // totalSpaceStartingPoint is the first pixel were we can start drawing
+          const totalSpaceStartingPoint = totalSpaceCenter - halfSpace;
+          // spaceTakenByInterBarsPixels has the overhead space consumed by each bar of sameTypeTotal
+          const spaceTakenByInterBarsPixels = (sameTypeTotal - 1) / sameTypeTotal;
+          // spacePerBar is the space we have available to draw sameTypeIndex bar
+          const spacePerBar = (totalSpaceAvailable / sameTypeTotal) - spaceTakenByInterBarsPixels;
+          // barStartingPoint is the first pixel were we can start drawing sameTypeIndex bar
+          const barStartingPoint = totalSpaceStartingPoint + spacePerBar * sameTypeIndex +
+            sameTypeIndex;
+
           const attrs = {
             style: {
               opacity: opacityFunctor && opacityFunctor(d),
               stroke: strokeFunctor && strokeFunctor(d),
               fill: fillFunctor && fillFunctor(d),
               ...style
             },
-            [linePosAttr]:
-              lineFunctor(d) -
-              itemSize +
-              ((itemSize * 2) / sameTypeTotal) * sameTypeIndex,
-            [lineSizeAttr]: (itemSize * 2) / sameTypeTotal,
+            [linePosAttr]: barStartingPoint,
+            [lineSizeAttr]: spacePerBar,
             [valuePosAttr]: Math.min(value0Functor(d), valueFunctor(d)),
             [valueSizeAttr]: Math.abs(-value0Functor(d) + valueFunctor(d)),
             onClick: e => this._valueClickHandler(d, e),