Annotations Don't Work With Formatter

[rtpHarry]

Been bumping up against this issue for a while now. The docs all imply that the annotation must match up to the axis data, but it seems it's actually the label because it doesn't work when I have the formatter in there.

EG, this code works:

import { Component, OnInit } from '@angular/core';
import {
  ApexAnnotations,
  ApexAxisChartSeries,
  ApexChart,
  ApexDataLabels,
  ApexStroke,
  ApexTitleSubtitle,
  ApexXAxis,
  ApexYAxis,
} from 'ng-apexcharts';

export type ChartOptions = {
  series: ApexAxisChartSeries;
  chart: ApexChart;
  dataLabels: ApexDataLabels;
  stroke: ApexStroke;
  xaxis: ApexXAxis;
  yaxis: ApexYAxis;
  title: ApexTitleSubtitle;
  annotations: ApexAnnotations;
};

@Component({
  selector: 'app-your-progress',
  templateUrl: './your-progress.component.html',
  styleUrls: ['./your-progress.component.scss'],
})
export class YourProgressComponent implements OnInit {
  public chartOptions: ChartOptions;

  constructor() {
    this.chartOptions = {
      series: [
        {
          name: 'Symptom Severity',
          data: [
            { x: '2024-06-01', y: 1 },
            { x: '2024-06-02', y: 2 },
            { x: '2024-06-03', y: 3 },
            { x: '2024-06-05', y: 1 },
            { x: '2024-06-07', y: 2 },
            { x: '2024-06-08', y: 3 },
            { x: '2024-06-09', y: 1 },
            { x: '2024-06-10', y: 2 },
            { x: '2024-06-11', y: 3 },
            { x: '2024-06-12', y: 1 },
            { x: '2024-06-13', y: 2 },
          ],
        },
      ],
      chart: {
        type: 'line',
        height: 350,
      },
      dataLabels: {
        enabled: false,
      },
      stroke: {
        curve: 'smooth',
      },
      title: {
        text: 'Symptom Severity Over Time',
      },
      xaxis: {
        categories: [
          '2024-06-01',
          '2024-06-02',
          '2024-06-03',
          '2024-06-05',
          '2024-06-07',
          '2024-06-08',
          '2024-06-09',
          '2024-06-10',
          '2024-06-11',
          '2024-06-12',
          '2024-06-13',
        ],
      },
      yaxis: {
        min: 0,
        max: 3,
        tickAmount: 3,
        labels: {
          formatter: function (val: number) {
            const labels = ['None', 'Mild', 'Moderate', 'Severe'];
            return labels[val];
          },
        },
      },
      annotations: {
        xaxis: [
          {
            x: '2024-06-02',
            borderColor: '#00E396',
            label: {
              borderColor: '#00E396',
              style: {
                color: '#fff',
                background: '#00E396',
              },
              text: 'Annotation 1',
            },
          },
          {
            x: '2024-06-07',
            borderColor: '#FEB019',
            label: {
              borderColor: '#FEB019',
              style: {
                color: '#fff',
                background: '#FEB019',
              },
              text: 'Annotation 2',
            },
          },
          {
            x: '2024-06-09',
            borderColor: '#FF4560',
            label: {
              borderColor: '#FF4560',
              style: {
                color: '#fff',
                background: '#FF4560',
              },
              text: 'Annotation 3',
            },
          },
        ],
      },
    };
  }

  ngOnInit(): void {}
}

This code does not (no error, just no annotations):

import { Component, OnInit } from '@angular/core';
import {
  ApexAxisChartSeries,
  ApexChart,
  ApexDataLabels,
  ApexStroke,
  ApexTitleSubtitle,
  ApexXAxis,
  ApexYAxis,
  ApexAnnotations,
} from 'ng-apexcharts';

export type ChartOptions = {
  series: ApexAxisChartSeries;
  chart: ApexChart;
  dataLabels: ApexDataLabels;
  stroke: ApexStroke;
  xaxis: ApexXAxis;
  yaxis: ApexYAxis;
  title: ApexTitleSubtitle;
  annotations: ApexAnnotations;
};

@Component({
  selector: 'app-your-progress',
  templateUrl: './your-progress.component.html',
  styleUrls: ['./your-progress.component.scss'],
})
export class YourProgressComponent implements OnInit {
  public chartOptions: ChartOptions;

  constructor() {
    this.chartOptions = {
      series: [
        {
          name: 'Symptom Severity',
          data: [
            { x: '2024-06-01', y: 1 },
            { x: '2024-06-02', y: 2 },
            { x: '2024-06-03', y: 3 },
            { x: '2024-06-05', y: 1 },
            { x: '2024-06-07', y: 2 },
            { x: '2024-06-08', y: 3 },
            { x: '2024-06-09', y: 1 },
            { x: '2024-06-10', y: 2 },
            { x: '2024-06-11', y: 3 },
            { x: '2024-06-12', y: 1 },
            { x: '2024-06-13', y: 2 },
          ],
        },
      ],
      chart: {
        type: 'line',
        height: 350,
      },
      dataLabels: {
        enabled: false,
      },
      stroke: {
        curve: 'smooth',
      },
      title: {
        text: 'Symptom Severity Over Time',
      },
      xaxis: {
        categories: [
          '2024-06-01',
          '2024-06-02',
          '2024-06-03',
          '2024-06-05',
          '2024-06-07',
          '2024-06-08',
          '2024-06-09',
          '2024-06-10',
          '2024-06-11',
          '2024-06-12',
          '2024-06-13',
        ],
      },
      yaxis: {
        min: 0,
        max: 3,
        tickAmount: 3,
        labels: {
          formatter: function (val: number) {
            const labels = ['None', 'Mild', 'Moderate', 'Severe'];
            return labels[val];
          },
        },
      },
      annotations: {
        xaxis: [
          {
            x: '2024-06-02',
            borderColor: '#00E396',
            label: {
              borderColor: '#00E396',
              style: {
                color: '#fff',
                background: '#00E396',
              },
              text: 'Annotation 1',
            },
          },
          {
            x: '2024-06-07',
            borderColor: '#FEB019',
            label: {
              borderColor: '#FEB019',
              style: {
                color: '#fff',
                background: '#FEB019',
              },
              text: 'Annotation 2',
            },
          },
          {
            x: '2024-06-09',
            borderColor: '#FF4560',
            label: {
              borderColor: '#FF4560',
              style: {
                color: '#fff',
                background: '#FF4560',
              },
              text: 'Annotation 3',
            },
          },
        ],
      },
    };
  }

  ngOnInit(): void {}
}

I don't know if this is a bug, a documentation issue, or just a me-problem, but I thought I would post it here now that I've finally solved the root cause of my issue.