Fix legend display issue

timqian · Dec 2, 2023 · c6b3aaa · c6b3aaa
1 parent 1e0013b
commit c6b3aaa
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 5 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "chart.xkcd",
-  "version": "1.1.14",
+  "version": "1.1.15",
   "description": "xkcd style chart lib",
   "jsdelivr": "dist/chart.xkcd.min.js",
   "unpkg": "dist/chart.xkcd.min.js",

diff --git a/src/utils/addLegend.js b/src/utils/addLegend.js
@@ -1,6 +1,6 @@
 import config from '../config';
 
-export default function addLegend(parent, {
+export default async function addLegend(parent, {
   items, position, unxkcdify, parentWidth, parentHeight, strokeColor, backgroundColor,
 }) {
   const filter = !unxkcdify ? 'url(#xkcdify)' : null;
@@ -28,6 +28,9 @@ export default function addLegend(parent, {
       .text(item.text);
   });
 
+  // wait for textLayer to render, a bit wired
+  await new Promise(resolve => setTimeout(resolve, 10))
+
   const bbox = textLayer.node().getBBox();
   const backgroundWidth = bbox.width + 15;
   const backgroundHeight = bbox.height + 10;
@@ -50,14 +53,14 @@ export default function addLegend(parent, {
   // add background
   backgroundLayer.append('rect')
     .style('fill', backgroundColor)
+    .attr('filter', filter)
     .attr('fill-opacity', 0.85)
     .attr('stroke', strokeColor)
     .attr('stroke-width', 2)
-    .attr('rx', 5)
-    .attr('ry', 5)
-    .attr('filter', filter)
     .attr('width', backgroundWidth)
     .attr('height', backgroundHeight)
+    .attr('rx', 5)
+    .attr('ry', 5)
     .attr('x', 8)
     .attr('y', 5);