I've double-checked by disabling styledMode in my app, and the charts print fine when I do so (albeit with the wrong styles!), so you're right that the problem's with styledMode.
The styles are imported near the top of my app.scss file like this (with all the other separate scss files):
This loads an SCSS file from within the application folder, which may admittedly be out of date compared with the actual version of Highcharts I'm running (but see below).
If I force print emulation in my browser, there are no styles at all defined for these elements - all that's in the Inspector is:
Code: Select all
element.style {
}
g[Attributes Style] {
transform: translate(71, 10) scale(1, 1);
clip-path: url(#highcharts-afz5t0u-18-);
}
user agent stylesheet :not(svg) {
transform-origin: 0px 0px;
}
I can therefore make elements be displayed not-black with print emulation enabled if I add my own fill and stroke values to "element.style", which does strongly suggest that I have missing rules in my CSS! I know nothing about the specifics of rendering SVGs with CSS (all my experience to date has been with HTML) but I assume that black is the default "no styles" approach. But I'm not clear why the styles used for screen rendering aren't being used for print rendering, as they would be for HTML.
===
FWIW, I have also tried loading the Highcharts SCSS file directly from node_modules, thusly:
Code: Select all
@import "~highcharts/css/highcharts";
(Note that, in the previous message I loaded the compiled CSS but this should load the SCSS source file.)
I would hope that this would resolve the issue and include all the required styles but, although it compiles with no errors or warnings, only elements that I've explicitly styled in my own CSS are displayed properly, with most lines and points being unstyled. Checking the inspector when building from the source SCSS in node_modules, I can see errors in the compiled scss (even though the build succeeds in webpack). Specifically, the values for the fill and stroke properties are incorrect. For example:
Code: Select all
.highcharts-color-0 {
fill: "blue" #3086FF;
stroke: "blue" #3086FF;
}
This doesn't happen when I load the pre-compiled CSS file from node_modules, so there's something odd going on in the build. Also, the specific colours used are different: the same style looks like this in the pre-compiled CSS file:
Code: Select all
.highcharts-color-0 {
fill: #7cb5ec;
stroke: #7cb5ec;
}
If I force print emulation in this case, I can see that there are no styles defined for fill and stroke on the SVG elements (as above). So, for some reason, I am just not grabbing the styles for formatting the printed output, even though I *am* grabbing the styles for screen rendering!
Which settings would be useful for me to share? You can see how I'm loading the SCSS here, and how I load the JS in the original post.