@opendata-ai/openchart-vanilla 2.13.1 → 6.0.0

package/dist/styles.css

@@ -224,7 +224,10 @@
  * React wrapper roots
  * --------------------------------------------------------------------------- */
 
-.viz-chart-root,
+.viz-chart-root {
+  width: 100%;
+}
+
 .viz-table-root,
 .viz-graph-root {
   width: 100%;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opendata-ai/openchart-vanilla",
-  "version": "2.13.1",
+  "version": "6.0.0",
   "description": "Vanilla JS renderer for openchart: SVG charts, HTML tables, force-directed graphs",
   "license": "Apache-2.0",
   "author": "Riley Hilliard",
@@ -50,8 +50,8 @@
   },
   "dependencies": {
     "@floating-ui/dom": "^1.7.6",
-    "@opendata-ai/openchart-core": "2.13.1",
-    "@opendata-ai/openchart-engine": "2.13.1",
+    "@opendata-ai/openchart-core": "6.0.0",
+    "@opendata-ai/openchart-engine": "6.0.0",
     "d3-force": "^3.0.0",
     "d3-quadtree": "^3.0.1"
   },

package/src/svg-renderer.ts

@@ -80,7 +80,15 @@ function applyTextStyle(el: SVGElement, style: TextStyle): void {
     el.setAttribute('text-anchor', style.textAnchor);
   }
   if (style.dominantBaseline) {
-    el.setAttribute('dominant-baseline', style.dominantBaseline);
+    // WebKit/iOS Safari has a getBBox() bug with dominant-baseline: hanging
+    // where the bounding box extends above y=0, causing the SVG's default
+    // overflow:hidden to clip the text. Use a dy offset instead, which
+    // achieves the same visual positioning without the bbox issue.
+    if (style.dominantBaseline === 'hanging') {
+      el.setAttribute('dy', `${style.fontSize * 0.8}px`);
+    } else {
+      el.setAttribute('dominant-baseline', style.dominantBaseline);
+    }
   }
   if (style.fontVariant) {
     el.setAttribute('font-variant', style.fontVariant);
@@ -1023,10 +1031,10 @@ function renderBrand(parent: SVGElement, layout: ChartLayout): void {
   setAttrs(text, {
     x: rightEdge,
     y: chromeY,
+    dy: BRAND_FONT_SIZE * 0.8,
     'font-family': layout.theme.fonts.family,
     'font-size': BRAND_FONT_SIZE,
     'text-anchor': 'end',
-    'dominant-baseline': 'hanging',
     'fill-opacity': 0.55,
   });
   (text as SVGElement & ElementCSSInlineStyle).style.setProperty('fill', fill);