@opendata-ai/openchart-vanilla 2.2.1 → 2.3.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opendata-ai/openchart-vanilla",
-  "version": "2.2.1",
+  "version": "2.3.1",
   "description": "Vanilla JS renderer for openchart: SVG charts, HTML tables, force-directed graphs",
   "license": "Apache-2.0",
   "author": "Riley Hilliard",
@@ -46,8 +46,8 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "@opendata-ai/openchart-core": "2.2.1",
-    "@opendata-ai/openchart-engine": "2.2.1",
+    "@opendata-ai/openchart-core": "2.3.1",
+    "@opendata-ai/openchart-engine": "2.3.1",
     "d3-force": "^3.0.0",
     "d3-quadtree": "^3.0.1"
   },

package/src/graph/canvas-renderer.ts

@@ -247,7 +247,7 @@ export class GraphCanvasRenderer {
     ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
     const padding = theme.spacing.padding;
     const x = w - padding;
-    const y = h - 4;
+    const y = h - padding;
     ctx.font = `600 20px ${theme.fonts.family}`;
     ctx.fillStyle = theme.colors.axis;
     ctx.globalAlpha = 0.5;
@@ -662,14 +662,22 @@ export class GraphCanvasRenderer {
 
       const labelY = node.y + node.radius + 3;
 
-      // Dark halo for readability (fall back to semi-transparent black when bg is transparent)
-      ctx.strokeStyle =
-        theme.colors.background === 'transparent' ? 'rgba(0, 0, 0, 0.7)' : theme.colors.background;
+      // Halo for readability: stroke behind text in the background color
+      // so labels stay legible over edges and other nodes.
+      if (theme.colors.background !== 'transparent') {
+        ctx.strokeStyle = theme.colors.background;
+      } else {
+        // Transparent bg: infer page background from text luminance.
+        // Light text = dark page, dark text = light page.
+        ctx.strokeStyle = isLightColor(theme.colors.text)
+          ? 'rgba(0, 0, 0, 0.7)'
+          : 'rgba(255, 255, 255, 0.85)';
+      }
       ctx.lineWidth = 3;
       ctx.lineJoin = 'round';
+      ctx.miterLimit = 2;
       ctx.strokeText(node.label, node.x, labelY);
 
-      // White/light text
       ctx.fillStyle = theme.colors.text;
       ctx.fillText(node.label, node.x, labelY);
     }
@@ -715,3 +723,24 @@ function brighten(color: string): string {
 
   return color;
 }
+
+/**
+ * Returns true if a color is perceptually light (luminance > 0.5).
+ * Used to pick a contrasting halo color for labels on transparent backgrounds.
+ */
+function isLightColor(color: string): boolean {
+  const hex = color.replace('#', '');
+  const full =
+    hex.length === 3
+      ? hex
+          .split('')
+          .map((c) => c + c)
+          .join('')
+      : hex;
+  if (full.length !== 6) return false;
+  const r = parseInt(full.slice(0, 2), 16) / 255;
+  const g = parseInt(full.slice(2, 4), 16) / 255;
+  const b = parseInt(full.slice(4, 6), 16) / 255;
+  const toLinear = (c: number) => (c <= 0.03928 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4);
+  return 0.2126 * toLinear(r) + 0.7152 * toLinear(g) + 0.0722 * toLinear(b) > 0.5;
+}