Hello,
I am experiencing a strange issue where white text shows up in two anomalous locations, whereas most of the text is showing up black, as expected given the css rules I have defined. Could someone please help me understand how to ensure all text strings are black, rather than two strangely showing as white?
I have this defined in my external css stylesheet:
Code: Select all
tspan {
fill: black;
stroke: none;
stroke-width: 2px;
stroke-linejoin: round;
}
And yet, I am seeing this-- Am example where only two text strings are white, for some strange reason-- "Sedans" and "Cargo Van SE".
The css above properly affects most of the text, except for those two elements.
- Screen Shot 2022-08-10 at 11.20.29 AM.png (129.46 KiB) Viewed 625 times
I find it strange that two elements are unaffected. On closer inspection, their inline style has an RGB color of white defined, whereas the rest have an RGB color of black defined.
- white text.jpg (49.79 KiB) Viewed 625 times
- black text.jpg (65.25 KiB) Viewed 625 times
I tried to fix the issue with the afterGetContainer functionality... but I am not sure how to use it to target specific css elements.
Does anyone suggest how to do this?
Code: Select all
(function(H) {
H.addEvent(
H.Chart,
'afterGetContainer',
function() {
H.css(this.renderTo, {
"tspan": {
"fill": "black",
"stroke": "none",
"stroke-width": "2px",
"stroke-linejoin": "round",
}
});
}
)
})(Highcharts);