Comments (8)
@istvanherbak thanks for reporting!
I will investigate this issue this week and try to propose a sensible solution.
from node-export-server.
@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
from node-export-server.
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
]
}
]
}
}
from node-export-server.
@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.
from node-export-server.
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.
from node-export-server.
Which CLI command are you using? Could you please share the reproduction steps of this error?
from node-export-server.
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
from node-export-server.
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
from node-export-server.
Related Issues (20)
- Stacked columns render as a single pixel on export HOT 1
- Is .env file in root is now ignored? HOT 3
- Unable to setup on Ubuntu Server 22.04 HOT 3
- Stop creation of log and tmp folder HOT 6
- Add a `mapChart` constructor to the UI HOT 1
- unable to export variable-pie chart type throwing error HOT 2
- Chart renders in 2 different layouts (random) HOT 1
- Inquiry Regarding Enhancement Request HOT 1
- Styled mode svg export while using as server, no css applied at all HOT 4
- Error: ENOENT: no such file or directory, open '/app/dist//../templates/template.html' HOT 1
- Font missing in export.highcharts.com HOT 6
- Inject css variables using nodejs module HOT 2
- chart rendering breaks around 5000 x-Axis data points HOT 6
- Docker file for V4 HOT 4
- The Google fonts are not installed on the production server HOT 1
- The width and height are only taken from sourceHeight HOT 1
- column chart export https://export.highcharts.com/ 500 error HOT 1
- Cannot add series-on-point module to the export server HOT 3
- Highcharts.AST.allowedAttributes HOT 6
- Preview and download are not generating in windows HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from node-export-server.