Styled mode svg export while using as server, no css applied at all

[istvanherbak]

Expected behaviour

When i add css resource or inject css using customCode the output svg has the correct styles applied.
Only when i change the type to png is working at the moment.

Actual behaviour

Everthing is black

Reproduction steps

Use http request

{
    "type": "svg",
    "constr": "chart",
    "width": 0,
    "height": 0,
    "allowFileResources": true,
    "allowCodeExecution": true,
    "customCode":"function() { let head = document.getElementsByTagName('HEAD')[0]; let link = document.createElement('link'); link.rel = 'stylesheet'; link.type = 'text/css'; link.href = 'http://localhost:8000/highcharts.css'; head.appendChild(link);}" 
    ,
    "resources":{
        "css":".highcharts-background { fill: red}"
    },
    "infile": {
        "chart": {
            "styledMode": false
        },
        "series": [
            {
                "data": [
                    1,
                    3,
                    2,
                    4
                ]
            },
            {
                "data": [
                    324,
                    124,
                    547,
                    221
                ]
            }
        ]
    }
}

[jszuminski]

Thanks for reporting @istvanherbak!

Two questions:

1. Please include a console.log inside of the customCode method - it would be great to see if this actually runs. If yes, it would be great to see if the head has actually been appended with a proper link. Let me know what is the result of this.
2. Make sure that http://localhost:8000/highcharts.css is accessible - verify that it's running and available.

As a workaround, try injecting the stringified CSS from your CSS file into the resources.css option.

The best approach that I see here is to use the CSS's @import statement which removes the need of you modifying the HEAD of your document with custom JavaScript. Here's a sample:

"customLogic": {
    "allowCodeExecution": true,
    "allowFileResources": true,
    "resources": {
      "css": "@import url(https://code.highcharts.com/css/highcharts.css);.highcharts-yaxis .highcharts-axis-line{stroke-width:2px}.highcharts-color-0{fill:#f7a35c;stroke:#f7a35c}.highcharts-axis.highcharts-color-0 .highcharts-axis-line{stroke:#f7a35c}.highcharts-axis.highcharts-color-0 text{fill:#f7a35c}.highcharts-color-1{fill:#90ed7d;stroke:#90ed7d}.highcharts-axis.highcharts-color-1 .highcharts-axis-line{stroke:#90ed7d}#renderer-callback-label .highcharts-label-box,.highcharts-axis.highcharts-color-1 text{fill:#90ed7d}"
    }
  }

[istvanherbak]

Hi,

I added the import statement inside the css resources as well.
Please see my answers below.

1. the console.log I add to the custom code is nowhere visible (at least i don't know how and where to look for it) however I am pretty sure that the element creation is a success as the highcharts.css is requested from the local server. (see attached picture's right window is a local express server serving custom files and css)

2. The import statement is also generates the local server serving the highcharts.css, (the highcharts.css file is logged twice in the window) but the result is the same, black svg.
   

The local css is downloaded from the code.highcharts.com/css/highcharts.css url. png, jpeg, even pdf is working fine.

I have no idea what is missing.

Thanks in advance,
István

[istvanherbak]

Any idea? Thanks

[istvanherbak]

Found out the styledMode: true should be the isse. When i set it to false i get an svg. However the styles are default. Why the styledMode is not applying css?

Thanks