Displaying several properties of an event in different active areas, during PNG export

The active areas will be included in the exported image. The area dimensions must be fully specified (it doesn't work if you only specify "left" but not "width" or "right").

If you only want to include the areas in the exported image you can add them using onBeforeEventExport event:

dp.onBeforeEventExport = args => {
  args.areas = [
      { left: 0, top: 0, width: 15, height: 15, text: "A"},
      { left: 0, right: 0, top: 0, bottom: 0, text: "B", horizontalAlignment: "center", verticalAlignment: "bottom"},
      { right: 0, top: 0, width: 15, height: 15, text: "C"},
  ];
};

Isn't args.areas a readonly property of args?

Yes, it is incorrectly marked as readonly in versions up to 2021.4.5098. In those versions, you can cast the args object to any or use a different syntax:

dp.onBeforeEventExport = args => {
  args.areas.push({ left: 0, top: 0, width: 15, height: 15, text: "A"});
  args.areas.push({ left: 0, right: 0, top: 0, bottom: 0, text: "B", horizontalAlignment: "center", verticalAlignment: "bottom"});
  args.areas.push({ right: 0, top: 0, width: 15, height: 15, text: "C"});
};

Is there also an issue, in version 2021.4.5098, regarding horizontalAlignment?
Which seems to be declared as either: "left" | "right" | "bottom";
Whereas some examples mention the "center" option.

Yes, there should be "center" instead of "bottom". It's now fixed in the latest sandbox build (2021.4.5105). Thanks for reporting the issue!