[SVG output] trying to use styledMode results in black image

[istvanherbak]

Expected behaviour

styled mode applies css just like normal mode

Actual behaviour

When you set styledMode: true and the output is svg the chart does not contains style informations.

Reproduction steps

Use the request_infile.json from sample\http and set styledMode: true and type: svg.

[jszuminski]

@istvanherbak thanks for reporting!

I will investigate this issue this week and try to propose a sensible solution.

[jszuminski]

@istvanherbak it is not a bug - by default, we do not include the highcharts.css file which results in a 'black image'.

Here's a Vanilla JS demo showing the issue: https://jsfiddle.net/BlackLabel/hzf7b5Lm/

The simplest solution to this problem is just including the highcharts.css file as a resource. Here's a code snippet:

node-export-server/tests/node/scenarios/css_raw.json

Lines 1 to 43 in fe51115

	{
	"export": {
	"options": {
	"chart": {
	"styledMode": true,
	"type": "column"
	},
	"title": {
	"text": "Styling axes (Raw CSS with the default CSS file)"
	},
	"yAxis": [{
	"className": "highcharts-color-0",
	"title": {
	"text": "Primary axis"
	}
	}, {
	"className": "highcharts-color-1",
	"opposite": true,
	"title": {
	"text": "Secondary axis"
	}
	}],
	"plotOptions": {
	"column": {
	"borderRadius": 5
	}
	},
	"series": [{
	"data": [1, 3, 2, 4]
	}, {
	"data": [324, 124, 547, 221],
	"yAxis": 1
	}]
	}
	},
	"customCode": {
	"allowCodeExecution": true,
	"allowFileResources": true,
	"resources": {
	"css": "@import '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; } .highcharts-axis.highcharts-color-1 text { fill: #90ed7d; } #renderer-callback-label .highcharts-label-box { fill: #90ed7d;}"
	}
	}
	}

[istvanherbak]

I am using the v3 branch as a server. I tried to make it work, but no luck.

Here is the request body
{
"type": "svg",
"constr": "chart",
"width": 0,
"height": 0,
"resources":{
"css":"@import 'https://code.highcharts.com/css/highcharts.css'"
},
"infile": {
"chart": {
"styledMode": true
},
"series": [
{
"data": [
1,
3,
2,
4
]
},
{
"data": [
324,
124,
547,
221
]
}
]
}
}

[jszuminski]

@istvanherbak by default, allowCodeExecution is disabled; thus, the resources are not loaded.

Please follow the code snippet that I've listed in my post above (where the allowCodeExecution, allowResources are set to true). If you follow the same way of configuration (putting it in customCode), everything should work.

[istvanherbak]

Sorry but something still does not add up.

{
"type": "svg",
"constr": "chart",
"width": 0,
"height": 0,
"customCode": {
"allowFileResources": true,
"allowCodeExecution": true,
"resources": {
"css": "@import 'https://code.highcharts.com/css/highcharts.css'"
}
},
"infile": {
"chart": {
"styledMode": true
},
"series": [
{
"data": [
1,
3,
2,
4
]
},
{
"data": [
324,
124,
547,
221
]
}
]
}
}

This is invalid json, gives me

TypeError: Cannot create property 'allowFileResources' on boolean 'false'
   at mergeConfigOptions (file:///C:/Temp/HighCharts3/src/node-export-server/lib/config.js:198:24)
   at mergeConfigOptions (file:///C:/Temp/HighCharts3/src/node-export-server/lib/config.js:202:11)
   at mergeConfigOptions (file:///C:/Temp/HighCharts3/src/node-export-server/lib/config.js:202:11)
   at exportHandler (file:///C:/Temp/HighCharts3/src/node-export-server/lib/server/routes/export.js:215:19)
   at Layer.handle [as handle_request] (C:\Temp\HighCharts3\src\node-export-server\node_modules\express\lib\router\layer.js:95:5)
   at next (C:\Temp\HighCharts3\src\node-export-server\node_modules\express\lib\router\route.js:144:13)
   at Route.dispatch (C:\Temp\HighCharts3\src\node-export-server\node_modules\express\lib\router\route.js:114:3)
   at Layer.handle [as handle_request] (C:\Temp\HighCharts3\src\node-export-server\node_modules\express\lib\router\layer.js:95:5)
   at C:\Temp\HighCharts3\src\node-export-server\node_modules\express\lib\router\index.js:284:15
   at Function.process_params (C:\Temp\HighCharts3\src\node-export-server\node_modules\express\lib\router\index.js:346:12)

If i use

{
"type": "svg",
"constr": "chart",
"width": 0,
"height": 0,
"allowFileResources": true,
"allowCodeExecution": true,
"resources": {
"css": "@import 'https://code.highcharts.com/css/highcharts.css'"
},
"infile": {
"chart": {
"styledMode": true
},
"series": [
{
"data": [
1,
3,
2,
4
]
},
{
"data": [
324,
124,
547,
221
]
}
]
}
}

Then it is still black.

Thanks

Also allowFileResources becomes false always when using server.

[jszuminski]

Which CLI command are you using? Could you please share the reproduction steps of this error?

[istvanherbak]

Start a server with
node bin\cli.js --host localhost --port 8701 --allowCodeExecution true --logLevel 4

Use the attached file to send over to the server. See chart is fine as png.
test.json

Change the "type" to svg and send over againhave black square

Hope it helps
Thanks

[istvanherbak]

Hi,
Sorry for reopening, but it is still not working. I am using server mode and the import does nothing with the highcharts.css.

Any other possible workarounds?

Thanks