title: Problem injecting variable-pie chart with highcharts-export-server
body: <p>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:</p>
  
  <blockquote>
    <p><strong>The requested series type does not exist.</strong>
    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.</p>
  </blockquote>
  
  <p>The chart I'm using is part of the <code>highcharts-more</code> module, so the error makes sense. I even found docs that seemed to spell out my solution. Thre is a <code>resources</code> option where you can provide scripts for injection to your export. That page is <a href="https://www.highcharts.com/docs/export-module/render-charts-serverside" rel="nofollow noreferrer">here</a>, but I'll include the important bit below:</p>
  
  <p><strong>-resources</strong></p>
  
  <pre><code>{ 
      "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)\";" 
  }
  </code></pre>
  
  <ul>
  <li><strong>files:</strong> 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.</li>
  <li><strong>css:</strong> css inserted in the body of the page</li>
  <li><strong>js:</strong> javascript inserted in the body of the page</li>
  </ul>
  
  <p>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 <code>highcharts-more.js</code>.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const exportImagesBase64 = async(data, format = 'png') =&gt; {
    HighchartsExport.initPool();
  
    let resources = JSON.stringify({
      files: "http://code.highcharts.com/highcharts-more.js"
    });
  
    let charts = data.map(chart =&gt; 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) =&gt; {
    return new Promise((resolve, reject) =&gt; {
      HighchartsExport.export(data, (err, res) =&gt; err ? reject(err) : resolve(res));
    });
  };</code></pre>
  </div>
  </div>
  </p>
  
  <p>Here is an example of what <code>data</code> might be equal to in the code above</p>
  
  <pre><code>[{
      "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": "&lt;b&gt; {point.name}&lt;/b&gt;&lt;br/&gt;Impressions: &lt;b&gt;{point.y}&lt;/b&gt;&lt;br/&gt;Clicks: &lt;b&gt;{point.z}&lt;/b&gt;&lt;br/&gt;"
      },
      "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
      }
    }]
  </code></pre>
  
  <p>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.</p>