node-export-server icon indicating copy to clipboard operation
node-export-server copied to clipboard

No gridlines visible in an image

Open jszuminski opened this issue 1 year ago • 2 comments

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

jszuminski avatar Oct 22 '24 16:10 jszuminski

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

wittsparks avatar Nov 11 '24 14:11 wittsparks

Internal note: works via SVG exporting through the exporting.js module: https://jsfiddle.net/65cvbrxo/

jszuminski avatar Nov 20 '24 17:11 jszuminski

Already fixed.

PaulDalek avatar Jun 03 '25 16:06 PaulDalek