search

apexcharts / ng-apexcharts

ng-apexcharts is an implementation of apexcharts for angular. It comes with one simple component that enables you to use apexcharts in an angular project.
MIT License
329 stars 81 forks source link

Annotations Don't Work With Formatter #337

Open rtpHarry opened 5 months ago

rtpHarry commented 5 months ago

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.