Dual Axis Currency Labels in React

import React from 'react'
import ReactApexChart from 'react-apexcharts'
import './styles.css'

const ApexChart = () => {
  const [state, setState] = React.useState({
    series: [
      {
        name: 'Booked',
        type: 'column',
        data: [51020, 13850, 11630, 23820, 59530],
      },
      {
        name: 'Invoiced',
        type: 'line',
        data: [51020, 13850, 11630, 23820, 59530],
      },
    ],
    options: {
      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'
            },
          },
        },
      ],
    },
  })

  return (
    <div>
      <div id="chart">
        <ReactApexChart
          options={state.options}
          series={state.series}
          type="line"
          height={420}
        />
      </div>
    </div>
  )
}

export default ApexChart