Inline styles not added in Safari with custom css

[luismillan]

Hi

Why do I get a different behavior in Safari compared to Chrome and Firefox

While in Chrome and Firefox fill and stroke are added according to what I have in the custom css file

Safari does not add the inline styles, so when I export the svg I see a black box instead (if I add a fill="none" to remove the black box of course the chart is not visible at all since all the other fills and stroke properties are missing)

Is this a known issue, I have highcharts 9.0.1

Regards

[andrzej.b]

Hi,

Welcome to our forum and thanks for contacting us with your question!

Differences in rendering across browsers, including Safari compared to Chrome and Firefox, can sometimes occur due to variations in how each browser handles SVG and CSS styles. In your case, it seems that Safari is not applying the expected inline styles for fill and stroke when exporting the SVG.

Here are a few steps you can take to troubleshoot and potentially resolve the issue:
1) Update Highcharts: First, consider updating to the latest version of Highcharts, as there may have been bug fixes or improvements related to SVG rendering and export functionality since version 9.0.1.
2) Check CSS Specificity: Ensure that your CSS rules are specific enough to override any default styles applied by Highcharts. You can use browser developer tools to inspect the SVG elements and see which styles are being applied.
3) Use Highcharts Options: Instead of relying solely on CSS, you can set fill and stroke properties directly in the Highcharts configuration. For example:

Code: Select all

Highcharts.chart('container', {
    series: [{
        type: 'column',
        data: [1, 2, 3],
        color: '#FF0000', // Set fill color directly
        borderColor: '#000000', // Set stroke color directly
        borderWidth: 2 // Set stroke width directly
    }]
});

4) SVG Export Options: If you're exporting the chart, you can also specify options related to exporting in the Highcharts configuration.

If you've tried these suggestions and are still experiencing the issue, I would ask you to share your chart and export config so that we can investigate it further.

Kind regards,