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.
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.).
Summary
When using
LegendOrdinalwithshape="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. Usingshape="circle"(orshape="line") works correctly in print.Environment
@visx/legendshape="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.
Cause
In
@visx/legend:shapes/Rect.js) is implemented as a<div>with colour applied via CSSbackground.shapes/Circle.js) is implemented as an<svg>with a<circle>element using thefillattribute.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 afillattribute (similar to how Circle uses<svg>+<circle fill={fill}>), so it prints consistently with the other shapes and does not rely on CSSbackground.Additional context