@pushwoosh/kit-charts 0.0.20 → 0.0.22

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pushwoosh/kit-charts",
-  "version": "0.0.20",
+  "version": "0.0.22",
   "description": "Small React chart library on SVG, with a Highcharts-shaped configuration model",
   "license": "MIT",
   "repository": {

package/series/column/column.js

@@ -89,15 +89,15 @@ export const column = {
         stroke: borderWidth && !capped ? ctx.series.borderColor : undefined,
         strokeWidth: borderWidth && !capped ? borderWidth : undefined
       }, `c-${bar.point.index}`)), capped ? bars.map(bar => {
-        // The rule sits on the value edge, so a bar counting down wears it below.
+        // The rule sits on the value edge, so a bar counting down wears it below. It is a rect
+        // rather than a line: only `x`/`y`/`width`/`height` are CSS properties an SVG can tween.
         const edge = bar.py <= bar.baseY ? bar.y : bar.y + bar.height;
-        return _jsx("line", {
-          x1: bar.x,
-          x2: bar.x + bar.width,
-          y1: edge,
-          y2: edge,
-          stroke: ctx.series.borderColor ?? ctx.color,
-          strokeWidth: borderWidth
+        return _jsx("rect", {
+          x: bar.x,
+          y: edge - borderWidth / 2,
+          width: bar.width,
+          height: borderWidth,
+          fill: ctx.series.borderColor ?? ctx.color
         }, `cap-${bar.point.index}`);
       }) : null, _jsx(DataLabels, {
         ctx: ctx,