node-export-server
node-export-server copied to clipboard
No gridlines visible in an image
Actual behaviour
Use the following JSON file to generate a PNG:
{
"chart": {
"type": "column",
"backgroundColor": "transparent",
"style": {
"fontFamily": "sans-serif"
},
"polar": true
},
"title": "",
"credits": false,
"legend": {
"enabled": false
},
"plotOptions": {
"series": {
"grouping": false,
"pointPadding": 0,
"groupPadding": 0,
"stacking": "normal"
}
},
"xAxis": {
"labels": {
"useHTML": true,
"enabled": true,
"style": {
"fontSize": "14px",
"color": "#444444"
}
},
"categories": [
"Abundance & Generosity<br/>70%",
"Connection & Compassion",
"Courage & Vulnerability",
"Candor & Debate",
"Action & Accountability"
],
"gridZIndex": 10,
"gridLineColor": "gray"
},
"yAxis": {
"reversedStacks": false,
"tickInterval": 20,
"gridZIndex": 10,
"gridLineColor": "gray",
"min": 0,
"max": 100,
"showLastLabel": true,
"showFirstLabel": false,
"labels": {
"style": {
"color": "#444444"
},
"distance": 20,
"y": 13
}
},
"series": [
{
"name": "Abundance & Generosity",
"color": "#41a3d1",
"data": [
[
0,
70
]
]
},
{
"name": "Connection & Compassion",
"color": "#c93452",
"data": [
[
1,
73
]
]
},
{
"name": "Courage & Vulnerability",
"color": "#8a136a",
"data": [
[
2,
58
]
]
},
{
"name": "Candor & Debate",
"color": "#fcc200",
"data": [
[
3,
63
]
]
},
{
"name": "Action & Accountability",
"color": "#5bbaaf",
"data": [
[
4,
48
]
]
}
]
}
If you use this config in JSFiddle there will be no problems: https://jsfiddle.net/wittski/hjxodgz9/1/ but if you do on the server https://export.highcharts.com/ the gridlines will not be displayed
I found a workaround for this. If you set the x axis label font size to 10px and the chart width to 500, the grid lines will appear, at least on my local export server. It seems related to this
Internal note: works via SVG exporting through the exporting.js module: https://jsfiddle.net/65cvbrxo/
Already fixed.