Skip rendering bar if no y value provided

FormidableLabs · Sep 29, 2023 · 0987dba · 0987dba
1 parent 683bc28
commit 0987dba
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 3 deletions.
diff --git a/lib/src/cartesian/hooks/useBarPath.ts b/lib/src/cartesian/hooks/useBarPath.ts
@@ -22,6 +22,9 @@ export const useBarPath = (
     const path = Skia.Path.Make();
 
     points.forEach(({ x, y }) => {
+      // Skip drawing bar if no y value provided (see also transformInputData)
+      if (isNaN(y)) return;
+
       if (!roundedCorners) {
         path.addRect(
           Skia.XYWHRect(x - barWidth / 2, y, barWidth, chartBounds.bottom - y),

diff --git a/lib/src/cartesian/utils/transformInputData.ts b/lib/src/cartesian/utils/transformInputData.ts
@@ -139,11 +139,14 @@ export const transformInputData = <
   });
 
   yKeys.forEach((yKey) => {
-    y[yKey].i = data.map((datum) => asNumber(datum[yKey]));
-    y[yKey].o = data.map((datum) => yScale(asNumber(datum[yKey])));
+    // Filter out non-numerical values (i.e. if the bar shouldn't exist)
+    const filtered = data.filter((datum) => typeof datum[yKey] === "number");
+
+    y[yKey].i = filtered.map((datum) => asNumber(datum[yKey]));
+    y[yKey].o = filtered.map((datum) => yScale(asNumber(datum[yKey])));
   });
 
-  // Measure our top-most y-label if we have grid options so we can
+  // Measure our top-most y-label if we have grid options, so we can
   //  compensate for it in our x-scale.
   const topYLabel =
     axisOptions?.formatYLabel?.(yScale.domain().at(0) as RawData[YK]) ||