I'm having trouble tring to generate a HORIZONTAL BOXPLOT WITH OUTLIERS

[PHGSantos]

I'm currently trying to use the Horizontal Boxplot example in you webpage through the sandbox. The goal is to have a boxplot with ouliers (scatters) that is horizontally oriented. But I just can't seem to be able to add the scatters to the horizontal boxplot.

That's the app.component.ts file i'm using in the sandbox, the rest of the files remain unchanged from the original. It didn't seemed to me like they needed any changes.

import { Component, ViewChild } from "@angular/core";


import {
  ChartComponent,
  ApexChart,
  ApexPlotOptions,
  ApexTitleSubtitle,
  ApexAxisChartSeries,
  ApexStroke
} from "ng-apexcharts";


export type ChartOptions = {
  series: ApexAxisChartSeries;
  chart: ApexChart;
  title: ApexTitleSubtitle;
  plotOptions: ApexPlotOptions;
  stroke: ApexStroke;
};


@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  @ViewChild("chart") chart: ChartComponent;
  public chartOptions: Partial<ChartOptions>;


  constructor() {
    this.chartOptions = {
      series: [
        {
          name:'box',
          type:'boxPlot',
          data: [
            {
              x: "Category A",
              y: [54, 66, 69, 75, 88]
            }
          ]
        },
        {
          name:'outlier',
          type:"scatter",
          data: [
            {
              x: "Category A",
              y: 51
            }
          ]
        },
      ],


      chart: {
        height: 350,
        type: "boxPlot"
      },
      title: {
        text: "Horizontal BoxPlot Chart",
        align: "left"
      },
      plotOptions: {
        bar: {
          horizontal: true,
          barHeight: "50%"
        },
        boxPlot: {
          colors: {
            upper: "#3f51b5",
            lower: "#3f51b5"
          }
        }
      },
      stroke: {
        colors: ["#242526"]
      }
    };
  }


  public generateDayWiseTimeSeries(baseval, count, yrange) {
    var i = 0;
    var series = [];
    while (i < count) {
      var y =
        Math.floor(Math.random() * (yrange.max - yrange.min + 1)) + yrange.min;


      series.push([baseval, y]);
      baseval += 86400000;
      i++;
    }
    return series;
  }
}

Can someone help me with this issue?

[github-actions]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.