#1984·visx

Bug: LegendOrdinal `shape="rect"` does not appear in print / print preview

Author: spencermayneCreated Mar 4, 2026Updated Mar 10, 2026

Summary

When using LegendOrdinal with shape="rect", the legend shape (coloured rectangle) is not visible in browser print preview or when printing to PDF. The legend labels still appear; only the rectangular shape indicators are missing. Using shape="circle" (or shape="line") works correctly in print.

Environment

  • Package: @visx/legend
  • Browser: Chrome (others likely affected)
  • Reproduction: Use any LegendOrdinal example with shape="rect" and open print preview (e.g. legends docs example).

Expected behavior

The legend rectangle shapes should be visible when printing or in print preview, consistent with how circle and line shapes render.

Actual behavior

The rect shapes do not appear in print preview or in printed output. Circle and line shapes do appear.

ImageImage

Cause

In @visx/legend:

  • Rect (shapes/Rect.js) is implemented as a <div> with colour applied via CSS background.
  • Circle (shapes/Circle.js) is implemented as an <svg> with a <circle> element using the fill attribute.

Browsers typically do not print CSS background colours unless the user enables “Background graphics” / “Print background colors and images”. SVG fills are treated as document content and print regardless. So the rect disappears in print while the circle does not.

Suggested fix

Implement the rect legend shape as an SVG <rect> with a fill attribute (similar to how Circle uses <svg> + <circle fill={fill}>), so it prints consistently with the other shapes and does not rely on CSS background.

Additional context

  • No custom CSS or print styles are required to reproduce; the issue appears with default visx legend usage.
  • This affects any use case where the legend is shown in print or PDF (reports, exports, etc.).