annotations not working with node export server

[hassanhammady]

"I am using the Highcharts Node Export Server, and my chart contains annotations. However, when I export the chart using the Node module or the Highcharts server arguments , the exported image does not include any annotations.

I need a solution to fix this issue, please."

Expected behaviour

Chart image with annotations

Actual behaviour

Chart image without annotations

![options_phantom] (https://github.com/user-attachments/assets/b8f833bf-f115-4ad2-90e1-cfdf6f6ac315)

Reproduction steps

### here is js code used

import { writeFileSync } from 'fs';
import exporter from '../../lib/index.js';
// Export settings with the old options structure (PhantomJS)
// Will be mapped appropriately to the new structure with the mapToNewConfig utility
const exportSettings = {
  type: 'png',
  constr: 'chart',
  outfile: './samples/module/options_phantom.jpeg',
  logLevel: 4,
  scale: 1,
  workers: 1,
  options: {
    chart: {
      type: "column",
      backgroundColor: "#FFFFFF",
    },
    title: {
      text: "Monthly Revenue",
    },
    xAxis: {
      categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
      title: {
        text: "Months",
      },
    },
    yAxis: {
      min: 0,
      title: {
        text: "Revenue (USD)",
      },
    },
    series: [
      {
        name: "Revenue",
        data: [3000, 4000, 3200, 5000, 4500, 6000, 7000, 6800, 6200, 7500, 8200, 9000],
      },
    ],
    annotations: [
      {
        labels: [
          {
            point: {
              xAxis: 0,
              yAxis: 0,
              x: 3, // April
              y: 5000,
            },
            text: "Highest Revenue of the Quarter",
          },
          {
            point: {
              xAxis: 0,
              yAxis: 0,
              x: 11, // December
              y: 9000,
            },
            text: "Year-End Peak",
          },
        ],
      },
    ],
  }
};
const start = async () => {
  try {
    // Map to fit the new options structure
    const mappedOptions = exporter.mapToNewConfig(exportSettings);
    // Set the new options
    const options = exporter.setOptions(mappedOptions);
    // Init a pool for one export
    await exporter.initExport(options);
    // Perform an export
    await exporter.startExport(options, async (error, info) => {
      // Exit process and display error
      if (error) {
        throw error;
      }
      const { outfile, type } = info.options.export;
      // Save the base64 from a buffer to a correct image file
      writeFileSync(
        outfile,
        type !== 'svg' ? Buffer.from(info.result, 'base64') : info.result
      );
      // Kill the pool
      await exporter.killPool();
    });
  } catch (error) {
    // Log the error with stack
    exporter.logWithStack(1, error);
    // Gracefully shut down the process
    await exporter.shutdownCleanUp(1);
  }
};
start();

[Remolutionary]

Same here. When i use the HighCharts default server, there are annotations but when I use my own export server they are missing.

[jszuminski]

Thanks for reporting @hassanhammady! I have added it to our backlog.

Internal note: works as expected through exporting.js client-side export (SVG): https://jsfiddle.net/BlackLabel/c7dux9mp/

[hassanhammady]

Thanks for reporting @hassanhammady! I have added it to our backlog.

Internal note: works as expected through exporting.js client-side export (SVG): https://jsfiddle.net/BlackLabel/c7dux9mp/

My pleasure @jszuminski and Thank you too for your response and the example you shared.

I agree with you, solution works as expected when adding SVG code manually. However, this approach doesn’t support dynamically adding SVG code.

In my case, I am sending my chart options as JSON through HTTP. I checked the code in your repository under samples/http/request_svg.json and found that the SVG is hardcoded. Since I need something dynamic, I decided to use the JSON example in samples/http/request_infile.json. However, if you add annotations to this JSON file, then it thought http , the chart is exported without the annotations.

So, annotations are not visible in the exported image when using JSON for dynamic chart options.

[jszuminski]

I've investigated the problem @hassanhammady and the good news is that there's a quick fix for it.

The annotations module was removed from the officially deployed export server because of its disproportionate effect on the resources of the server. For this reason, we decided to get rid of it to make sure that the server works better for 98% of users who did not use annotations at all.

If you set up your own Export Server, you can simply add the annotations string to the config.js where all modules are defined: https://github.com/highcharts/node-export-server/blob/d61b4622344c155fdb2498fd55085e15222f060c/lib/schemas/config.js#L16-L27

I've checked it locally and it works when annotations are added.

[Remolutionary]

I tried the same thing, but the annotations are still not exporting. Here is my config.json: Am I doing something wrong?

[jszuminski]

Are you sure that you have modified the config and that the annotations module has been loaded? Please share the full logs of your export - then we will be able to see if this module has been fetched successfully. Also, what's the result of your exporting after changing this config to the one you attached above?

[Remolutionary]

Sorry you are right - I edited the wrong config. I'm running the HTTP server like this: highcharts-export-server --enableServer 1

For others: the config.js is found here: /usr/local/lib/node_modules/highcharts-export-server/lib/schemas

Now the annotations are exported correctly.

[jszuminski]

Great, good to hear, thanks!

[hassanhammady]

Hi @jszuminski , I tried your solution and the annotation has now been exported perfectly and everything is functioning as expected. i wanted to extend my sincere thanks for your help and support with the recent issue I encountered. I truly appreciate the prompt and professional service you provided.