Problem injecting variable-pie chart with highcharts-export-server

Question

I'm using Highcharts Export Server as a Node.js module to produce charts in PNG format. When I include a Variable Radius Pie Chart though, I get an error in the resulting File. The error is Highcharts error #17:

The requested series type does not exist. This error happens when you are setting chart.type or series.type to a series type that isn't defined in Highcharts. A typical reason may be that your are missing the extension file where the series type is defined, for example in order to run an arearange series you need to load the highcharts-more.js file.

The chart I'm using is part of the highcharts-more module, so the error makes sense. I even found docs that seemed to spell out my solution. Thre is a resources option where you can provide scripts for injection to your export. That page is here, but I'll include the important bit below:

-resources

{ 
    "files": "highstock.js,highcharts-more.js,data.js,drilldown.js,funnel.js,heatmap.js,treemap.js,highcharts-3d.js,no-data-to-display.js,map.js,solid-gauge.js,broken-axis.js", 
    "css": "g.highcharts-series path {stroke-width:2;stroke: pink}", 
    "js": "document.body.style.webkitTransform = \"rotate(-10deg)\";" 
}

files: A comma separated string of filenames that need to be injected to the page for rendering a chart. Only files with the extensions .css and .js are injected, the rest is ignored.
css: css inserted in the body of the page
js: javascript inserted in the body of the page

After some digging, I did find that I could pass this resource option as a JSON stringified object into my export parameters. So, I attempted to inject the remote version of highcharts-more.js.

const exportImagesBase64 = async(data, format = 'png') => {
  HighchartsExport.initPool();

  let resources = JSON.stringify({
    files: "http://code.highcharts.com/highcharts-more.js"
  });

  let charts = data.map(chart => exportPromise({
    type: format, //png
    options: chart, //standard highcharts config object
    resources //resources option to inject highcharts-more
  }));

  charts = await Promise.all(charts);

  HighchartsExport.killPool();

  return charts;
};

const exportPromise = (data) => {
  return new Promise((resolve, reject) => {
    HighchartsExport.export(data, (err, res) => err ? reject(err) : resolve(res));
  });
};

Here is an example of what data might be equal to in the code above

[{
    "chart": {
      "plotBackgroundColor": null,
      "plotBorderWidth": null,
      "plotShadow": false,
      "type": "variablepie",
      "height": 300,
      "width": 300
    },
    "title": {
      "text": "Placement Breakdown",
      "align": "left",
      "x": 30,
      "y": 30
    },
    "tooltip": {
      "headerFormat": "",
      "pointFormat": "<b> {point.name}</b><br/>Impressions: <b>{point.y}</b><br/>Clicks: <b>{point.z}</b><br/>"
    },
    "plotOptions": {
      "pie": {
        "allowPointSelect": true,
        "cursor": "pointer",
        "dataLabels": {
          "enabled": false
        },
        "showInLegend": true
      }
    },
    "series": [
      {
        "minPointSize": 10,
        "innerSize": "20%",
        "zMin": 0,
        "data": [
          {
            "name": "facebook",
            "y": 13642,
            "z": 357
          },
          {
            "name": "instagram",
            "y": 12920,
            "z": 326
          }
        ]
      }
    ],
    "credits": {
      "enabled": false
    }
  }]

Since adding the resource options, I am still receiving the #17 Highcharts error. Am I thinking about this completely wrong? I can't find any more information out there about this, so I'm hoping someone has some knowledge to share.

You are going to programatically produce these charts, correct? They are never rendered or donwloaded using the exporting meny "Download PNG"? Also a side note, it would seem to me that the requirement is modules/variable-pie.js, not highcharts-more.js. — Halvor Holsten Strand
That's correct, I produce the PNG files and eventually several of them end up being rendered together in a PDF that is uploaded to S3. The Highcharts docs, here seem to indicate that highcharts-more.js is the requirement, but I'll give that a try — Mike
Hm, I'm wondering if its a documentation error...? Their demo chart doesn't seem to need highcharts-more. — Halvor Holsten Strand
Great catch. The demo page breaks when you replace /modules/variable-pie.js with highcharts-more.js. This fixed my export problem. If you put in an answer I'll accept it. Thanks for the help! — Mike

Halvor Holsten Strand Halvor Holsten Strand · Accepted Answer · 2019-01-14T13:13:11

The documentation for the variable pie chart type refers to highcharts-more.js as a requirement.

The actual requirement for this chart type appears to be modules/variable-pie.js. Using this additional resource instead should fix issues with "The requested series type does not exist" when exporting.

Problem injecting variable-pie chart with highcharts-export-server

1 Answers