Highcharts Export Server legend labelFormatter未生效问题求助

Problem #

I'm using Highcharts Export Server in a Node.js environment. The chart legend displays correctly, but the custom labelFormatter function I configured isn't executing—my custom text doesn't show up, and instead the default series names ('a', 'b', 'c') are displayed. I've tried using the load event and custom HTML approaches, but neither worked. Here's my code:

let chartDetails = { 
  type: "png", 
  options: { 
    chart: { 
      type: "pie", 
      showInLegend: true, 
      dataLabels: { enabled: false } 
    }, 
    title: { 
      align: 'left', 
      floating: false, 
      text: 'Main Title', 
      style: { fontSize: '24px' } 
    }, 
    subtitle: { 
      verticalAlign: 'middle', 
      align: 'center', 
      floating: false, 
      text: '<b>300</b><br>Total Issues', 
      style: { fontSize: '30px' } 
    }, 
    plotOptions: { 
      pie: { 
        innerSize: '70%', 
        shadow: false, 
        showInLegend: true, 
        dataLabels: { enabled: false, } 
      } 
    }, 
    legend: { 
      enabled: true, 
      floating: true, 
      borderWidth: 0, 
      align: 'right', 
      layout: 'vertical', 
      verticalAlign: 'middle', 
      useHTML: true, 
      labelFormatter: function () { 
        console.log("this: is equal to "); 
        console.log(this); 
        return 'custom word'; 
      } 
    }, 
    series: [ { 
      data: [ 
        { name: "a", y: 100 }, 
        { name: "b", y: 20 }, 
        { name: "c", y: 50 } 
      ] 
    } ] 
  }
};

I expect the legend to show 'custom word' for all items, but it's showing the original names instead.

Root Cause #

The Highcharts Export Server processes chart configurations as JSON under the hood, and JSON doesn't support native JavaScript functions. When you pass a function directly in your options object, it gets stripped out during serialization to JSON—so the Export Server never receives or executes it.

Solution #

Instead of passing a native function for labelFormatter, define it as a stringified function. The Export Server will parse this string into a valid function when rendering the chart.

Here's the modified legend configuration:

legend: { 
  enabled: true, 
  floating: true, 
  borderWidth: 0, 
  align: 'right', 
  layout: 'vertical', 
  verticalAlign: 'middle', 
  useHTML: true, 
  labelFormatter: "function() { return 'custom word'; }"
}

Explanation #

• By wrapping the function in quotes, you preserve it as a string that the Export Server can evaluate in its headless browser environment.
• If you need access to the this context (like the series item's name or data), you can still include that logic in the stringified function:

  labelFormatter: "function() { return 'Custom: ' + this.name; }"
  

Additional Notes #

• If you were trying the load event approach, you'd need to stringify that function too, like this:

  chart: {
    type: "pie",
    showInLegend: true,
    dataLabels: { enabled: false },
    events: {
      load: "function() { /* Your custom logic here */ }"
    }
  }
  

• Double-check your stringified function for syntax errors—even a missing semicolon can prevent it from executing correctly in the Export Server's environment.

内容的提问来源于stack exchange，提问作者Ibrahim Mohamed