Dual Axis Currency Labels in JavaScript

var options = {
  series: [
    {
      name: 'Booked',
      type: 'column',
      data: [51020, 13850, 11630, 23820, 59530],
    },
    {
      name: 'Invoiced',
      type: 'line',
      data: [51020, 13850, 11630, 23820, 59530],
    },
  ],
  chart: {
    type: 'line',
    height: 420,
  },
  title: {
    text: 'Booked vs invoiced',
    align: 'left',
  },
  subtitle: {
    text: 'Two independently scaled axes can land both labels on the same row; dataLabels.avoidOverlap keeps them legible',
    align: 'left',
  },
  colors: ['#8bc34a', '#ef5350'],
  stroke: {
    width: [0, 2],
  },
  fill: {
    opacity: [0.35, 1],
  },
  markers: {
    size: [0, 4],
  },
  dataLabels: {
    enabled: true,
    background: {
      enabled: true,
      borderWidth: 0,
    },
    formatter: function (val) {
      return (
        '$' +
        (val / 1000).toLocaleString('en-US', {
          minimumFractionDigits: 2,
          maximumFractionDigits: 2,
        }) +
        'K'
      )
    },
  },
  xaxis: {
    categories: ['May 2026', 'Jun 2026', 'Jul 2026', 'Aug 2026', 'Sep 2026'],
  },
  yaxis: [
    {
      seriesName: 'Booked',
      title: {
        text: 'Booked',
      },
      labels: {
        formatter: function (val) {
          return '$' + (val / 1000).toFixed(0) + 'K'
        },
      },
    },
    {
      seriesName: 'Invoiced',
      opposite: true,
      title: {
        text: 'Invoiced',
      },
      labels: {
        formatter: function (val) {
          return '$' + (val / 1000).toFixed(0) + 'K'
        },
      },
    },
  ],
}

var chart = new ApexCharts(document.querySelector('#chart'), options)
chart.render()