Styled mode svg export while using as server, no css applied at all
istvanherbak opened this issue · 4 comments
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
]
}
]
}
}
Thanks for reporting @istvanherbak!
Two questions:
- 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. - 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}"
}
}
Hi,
I added the import statement inside the css resources as well.
Please see my answers below.
-
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)
-
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
Any idea? Thanks
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