Type error in x-axis formatter function

[jchan201]

Description

The formatter function only accepts a string argument in apexcharts.d.ts, so passing a function that takes any other type of argument (such as a number) results into a type error. This is a problem when passing an array of numbers to categories.

Perhaps changing the type to be the same as categories would solve the problem:

// apexcharts.d.ts

type ApexXAxis = {
  categories?: any;
  labels?: {
    ...
    [-] formatter?(value: string, timestamp?: number, opts?: any): string | string[]
    [+] formatter?(value: any, timestamp?: number, opts?: any): string | string[]
  }
}

Steps to Reproduce

Currently using Vue 3, but the problem may persist with other frameworks using TypeScript as well.

App.vue

<script setup lang="ts">
import { ref } from "vue";
import VueApexCharts from "vue3-apexcharts";
import type { ApexOptions } from "apexcharts";

const chartOptions = ref<ApexOptions>({
  chart: {
    id: "vuechart-example",
  },
  xaxis: {
    categories: [1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998],
    labels: {
      // Type Error, but works fine otherwise
      formatter: (value: number) => {
        if (value > 1995) return `H${value}`;
        else return `L${value}`;
      },
    },
  },
});

const series = ref([
  {
    name: "series-1",
    data: [30, 40, 45, 50, 49, 60, 70, 91],
  },
]);
</script>

<template>
  <div>
    <VueApexCharts width="500" height="350" type="bar" :options="chartOptions" :series="series"></VueApexCharts>
  </div>
</template>

Reproduction Link

https://codesandbox.io/p/devbox/fyftzc