How do I customize Horizontal BoxPlot Chart Popover/Tooltip?

[IceBreakerG]

I have an Angular 18 project, and in one of my components, I'm using a Horizontal BoxPlot chart. When hovering over one of the bars, a popover/tooltip appears showing the values for Minimum, Q1, Median, Q3, and Maxium.

Is there a way I can customize this or change it to show different labels for those values? Here's my chart definition:

chartOptions = {
      series: [/* This is set in a different method */],
      chart: {
        height: 350,
        toolbar: {
          show: false
        },
        type: 'boxPlot',
        width: '100%'
      },
      title: {
        text: 'Value List',
        align: 'left'
      },
      plotOptions: {
        bar: {
          horizontal: true,
          barHeight: '30%',
        },
        boxPlot: {
          colors: {
            upper: '#e9ecef',
            lower: '#f8f9fa'
          }
        }
      },
      stroke: {
        colors: ['#6c757d']
      },
      xaxis: {
        labels: {
          formatter: (value: string) => {
            return `$${parseInt(value).toFixed(2)}`
          }
        },
      }

[IceBreakerG]

I messed up the template portion As well as the custom tooltip. This fixes the issue:

Template

<apx-chart
  style="width: 100%"
  [chart]="chartOptions.chart"
  [plotOptions]="chartOptions.plotOptions!"
  [series]="chartOptions.series"
  [stroke]="chartOptions.stroke"
  [title]="chartOptions.title"
  [tooltip]="chartOptions.tooltip!" <!-- This was missing -->
  [xaxis]="chartOptions.xaxis!"
/>

Typescript Definition

chartOptions = {
  ...
  tooltip: {
        enabled: true,
        custom: function ({ series, seriesIndex, dataPointIndex, w }) {
          let data = w.globals.initialSeries[seriesIndex].data[dataPointIndex]

          console.log('Custom Tooltip Data', data)

          return (
            '<ul>' +
            '<li><b>Price</b>: ' +
            data.x +
            '</li>' +
            '<li><b>Number</b>: ' +
            data.y +
            '</li>' +
            "<li><b>Product</b>: '" +
            data.product +
            "'</li>" +
            "<li><b>Info</b>: '" +
            data.info +
            "'</li>" +
            "<li><b>Site</b>: '" +
            data.site +
            "'</li>" +
            '</ul>'
          )
        }
      },
}