Monday, 29 May 2017

Highcharts Node.js Export Server: How to export pattern fill using setOptions {defs { ... } }

I have a Highcharts chart (https://jsfiddle.net/trevisan/uv6nuar0/) that I'm trying to export to png using this command

highcharts-export-server.cmd -fromFile .\my-chart.json

but it seems that Highcharts Node.js Export Server doesn't accept the globalOptions as a parameter in my json file as I'm getting this error:

[error] phantom worker 1 unexpected data - SyntaxError: Expected token ']'

I'm assuming my json object is right because I got it working nicely if I render the chart in a web page (see the jsfidle).

Does someone know how to fix this or some other approach to include defs options to be exported?

Here is my-chart.json file content:

{
  "globalOptions": {
      "lang": {
        "numericSymbols": null
      },
      "defs": {
        "circle1": {
          "tagName": "pattern",
          "id": "circle-1",
          "patternUnits": "userSpaceOnUse",
          "patternTransform": "rotate(45)",
          "width": 3,
          "height": 3,
          "children": [
            {
              "tagName": "rect",
              "x": 0,
              "y": 0,
              "width": 3,
              "height": 3
            },
            {
              "tagName": "circle",
              "cx": "0.4",
              "cy": "0.4",
              "r": "0.4",
              "fill": "#9d070d"
            }
          ]
        },
        "circle2a": {
          "tagName": "pattern",
          "id": "circle-2a",
          "patternUnits": "userSpaceOnUse",
          "patternTransform": "rotate(45)",
          "width": 3,
          "height": 3,
          "children": [
            {
              "tagName": "rect",
              "x": 0,
              "y": 0,
              "width": 3,
              "height": 3
            },
            {
              "tagName": "circle",
              "cx": "0.725",
              "cy": "0.725",
              "r": "0.725",
              "fill": "#9d070d"
            }
          ]
        },
        "circle2b": {
          "tagName": "pattern",
          "id": "circle-2b",
          "patternUnits": "userSpaceOnUse",
          "patternTransform": "rotate(45)",
          "width": 3,
          "height": 3,
          "children": [{
            "tagName": "rect",
            "x": 0,
            "y": 0,
            "width": 3,
            "height": 3
          }, {
            "tagName": "circle",
            "cx": "1.15",
            "cy": "1.15",
            "r": "1.15",
            "fill": "#9d070d"
          }]
        }
      }
  },
  "styledMode": 1,
  "instr": {
    "chart": {
      "type": "column"
    },
    "credits": {
      "enabled": false
    },
    "legend": {
      "enabled": false
    },
    "title": {
      "text": null
    },
    "plotOptions": {
      "series": {
        "pointPadding": 0,
        "groupPadding": 0,
        "dataLabels": {
          "verticalAlign": "top"
        }
      },
      "column": {
        "stacking": "percent"
      }
    },
    "xAxis": [{
      "offset": 10,
      "labels": {
        "rotation": 0
      },
      "categories": [
        "2012",
        "2013",
        "2014",
        "2015",
        "2016"
      ]
    }],
    "yAxis": [
      {
        "className": "highcharts-color-0",
        "min": 0,
        "max": 100,
        "tickInterval": 20,
        "minorTickInterval": 10,
        "tickWidth": 1,
        "minorTickWidth": 1,
        "tickLength": 12,
        "minorTickLength": 8,
        "gridLineWidth": 0,
        "minorGridLineWidth": 0,
        "offset": 10,
        "title": {
          "text": null
        },
        "labels": {
          "format": "{value}%"
        }
      },
      {
        "linkedTo": 0,
        "lineWidth": 0,
        "tickWidth": 0,
        "gridLineWidth": 0,
        "offset": 0,
        "labels": {
          "enabled": false
        },
        "title": {
          "text": null
        }
      }
    ],
    "series": [
      {
        "name": "Stage 0",
        "className": "stage-0",
        "data": [
          {
            "y": 53,
            "dataLabels": {
              "enabled": true,
              "backgroundColor": "transparent",
              "padding": 0,
              "allowOverlap": true,
              "crop": false,
              "overflow": "none",
              "align": "left",
              "y": 2,
              "format": "<span style=\"padding-left: 4px;\">Stage 0</span>",
              "useHTML": true
            }
          },
          48,
          64,
          51,
          64
        ]
      },
      {
        "name": "Stage 1",
        "color": "#6bcff6",
        "data": [
          {
            "y": 51,
            "dataLabels": {
              "enabled": true,
              "backgroundColor": "transparent",
              "padding": 0,
              "allowOverlap": true,
              "crop": false,
              "overflow": "none",
              "align": "left",
              "y": 2,
              "format": "<span style=\"padding-left: 4px;\">1</span>",
              "useHTML": true
            }
          },
          58,
          55,
          50,
          32
        ]
      },
      {
        "name": "Stage 2a",
        "color": "#6bcff6",
        "data": [
          {
            "y": 28,
            "dataLabels": {
              "enabled": true,
              "backgroundColor": "transparent",
              "padding": 0,
              "allowOverlap": true,
              "crop": false,
              "overflow": "none",
              "align": "left",
              "y": 2,
              "format": "<span style=\"padding-left: 4px;\">2a</span>",
              "useHTML": true
            }
          },
          46,
          33,
          21,
          17
        ]
      },
      {
        "name": "Stage 2b",
        "color": "#6bcff6",
        "data": [
          {
            "y":  32,
            "dataLabels": {
              "enabled": true,
              "backgroundColor": "transparent",
              "padding": 0,
              "allowOverlap": true,
              "crop": false,
              "overflow": "none",
              "align": "left",
              "y": 2,
              "format": "<span style=\"padding-left: 4px;\">2b</span>",
              "useHTML": true
            }
          },
          37,
          29,
          36,
          19
        ]
      },
      {
        "name": "Stage 3",
        "className": "stage3",
        "color": "#9d070d",
        "data": [{
            "y": 57,
            "dataLabels": {
              "enabled": true,
              "backgroundColor": "transparent",
              "padding": 0,
              "allowOverlap": true,
              "crop": false,
              "overflow": "none",
              "align": "left",
              "y": 2,
              "format": "<span style=\"padding-left: 4px;\">3</span>",
              "useHTML": true
            }
          },
          65,
          44,
          48,
          27
        ]
      },
      {
        "name": "Unknown",
        "visible": false,
        "data": [
          15,
          11,
          35,
          31,
          {
            "y": 94,
            "dataLabels": {
              "enabled": true,
              "backgroundColor": "transparent",
              "padding": 0,
              "allowOverlap": true,
              "crop": false,
              "overflow": "none",
              "align": "left",
              "y": 2,
              "format": "<span>Unknown</span>",
              "useHTML": true
            }
          }
        ]
      },
      {
        "name": "Total (n=)",
        "visible": false,
        "data": [
          236,
          265,
          260,
          237,
          {
            "y": 253,
            "dataLabels": {
              "enabled": true,
              "backgroundColor": "transparent",
              "padding": 0,
              "allowOverlap": true,
              "crop": false,
              "overflow": "none",
              "align": "left",
              "y": 6,
              "format": "<span>Total (n=)</span>",
              "useHTML": true
            }
          }
        ]
      }
    ]
  },
  "outfile": "demo.png"
}

Thanks in advance!



via Rafael Trevisan

No comments:

Post a Comment