Merge pull request #1045 from visualize-admin/fix/column-chart-negati…

…ve-y-origin

fix: Column chart negative values Y origin

CHANGELOG.md

@@ -9,7 +9,8 @@ You can also check the [release page](https://github.com/visualize-admin/visuali
 
 ## Unreleased
 
-Nothing yet.
+- Fixes
+  - Bars with negative values are now correctly attached to 0 again.
 
 ## [3.19.18] - 2023-05-16
 

app/charts/column/columns-simple.tsx

@@ -63,13 +63,14 @@ export const Columns = () => {
       const xScaled = xScale(x) as number;
       const y = getY(d) ?? NaN;
       const yScaled = yScale(y);
+      const yRender = yScale(Math.max(y, 0));
       const height = Math.abs(yScaled - y0);
       const color = getColor(y);
 
       return {
         key: x,
         x: xScaled,
-        y: yScaled,
+        y: yRender,
         width: bandwidth,
         height,
         color,

app/charts/column/columns-stacked.tsx

@@ -33,21 +33,20 @@ export const ColumnsStacked = () => {
             x: xScale(x) as number,
             y: yScale(segment[1]),
             width: bandwidth,
-            height: y0 - yScale(segment[1] - segment[0]),
+            height: yScale(segment[0]) - yScale(segment[1]),
             color,
           };
         }),
       };
     });
-  }, [bandwidth, colors, getX, series, xScale, y0, yScale]);
+  }, [bandwidth, colors, getX, series, xScale, yScale]);
 
   React.useEffect(() => {
     if (ref.current) {
       select(ref.current)
         .selectAll<SVGGElement, StackedRenderDatum>("g")
         .data(renderData, (d) => d.key)
         .join("g")
-        .attr("data-n", (d) => d.key)
         .selectAll<SVGRectElement, RenderDatum>("rect")
         .data(
           (d) => d.data,