Issue with CSS variables in charts since 1.11.12
We use html-to-image to export images of charts created with Recharts.
We use CSS variables to define colors. These used to export fine in 1.11.11, but the color does not export correctly since 1.11.12. There are workarounds obviously, but I wonder why this breaking change was introduced?
Expected Behavior
You can reproduce the expected behavior on CodeSandbox here.
This version uses html-to-image 1.11.11. When clicking the "Export chart" button, the resulting file contains the red and blue colors.
Current Behavior
The unexpected behavior can be tested on CodeSandbox here.
This version of the sample is based on html-to-image 1.11.13. The blue and red colors are lost in the resulting file.
Possible Solution
The obvious workaround is to inject the colors explicitly instead of using CSS variables. We are using MUI so this is easy enough. But CSS vars do have some advantages when switching themes.
Environment
- html-to-image: 1.11.13
- OS: MacOS 15.3
- Browser: Chrome 133
Source: bubkoo/html-to-image