I want to display category and the quantity in Apex Chart

Question

I'm trying to display categories and quantities in bar chart using Apex Chart inside my angular website.

I need it to work on this version since there is a lot of chart already taken and updating the version will cause the problem. If I can't solve it using Apex Chart please tell me the best chart library I can use.

I want the final result to be like this image.

"apexcharts": "3.23.0", "ng-apexcharts": "1.5.8"

Here is my code:

import { Component, ViewChild } from "@angular/core";
import {
  ApexAxisChartSeries,
  ApexChart,
  ChartComponent,
  ApexDataLabels,
  ApexXAxis,
  ApexPlotOptions,
  ApexStroke,
  ApexTitleSubtitle,
  ApexYAxis,
  ApexTooltip,
  ApexFill,
  ApexLegend,
  ApexGrid,
} from "ng-apexcharts";

export type ChartOptions = {
  series: ApexAxisChartSeries;
  chart: ApexChart;
  dataLabels: ApexDataLabels;
  plotOptions: ApexPlotOptions;
  xaxis: ApexXAxis;
  yaxis: ApexYAxis;
  stroke: ApexStroke;
  title: ApexTitleSubtitle;
  tooltip: ApexTooltip;
  fill: ApexFill;
  legend: ApexLegend;
  colors: string[];
  grid: ApexGrid;
};

@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: [
        {
          data: [10, 18, 13, 10, 18, 13, 20],
        },
      ],
      grid: {
        show: false,
      },
      colors: [
        "#33b2df",
        "#546E7A",
        "#d4526e",
        "#13d8aa",
        "#A5978B",
        "#2b908f",
        "#f9a3a4",
        "#90ee7e",
        "#f48024",
        "#69d2e7",
      ],
      chart: {
        type: "bar",
        height: 350,
        stacked: true,
      },
      plotOptions: {
        bar: {
          barHeight: "80%",
          distributed: true,
          columnWidth: "80%",
          horizontal: true,
          endingShape: "flat", // Add this to have a flat ending shape
        },
      },
      stroke: {
        width: 1,
        colors: ["#fff"],
      },
      title: {
        text: "Fiction Books Sales",
      },
      xaxis: {
        categories: [
          "category A",
          "category B",
          "category C",
          "category A",
          "category B",
          "category C",
          "asdm",
        ],
        labels: {
          show: false,
        },
      },
      yaxis: {
        axisBorder: {
          show: false,
        },
        show: false,
      },
      dataLabels: {
        enabled: true,
        formatter: function (val, { seriesIndex, dataPointIndex, w }) {
          // Display the value outside the bar
          return `${val}K`;
        },
        style: {
          fontSize: "12px",
          colors: ["#304758"],
        },
        offsetX: 0,
        dropShadow: {
          enabled: true,
          top: 1,
          left: 1,
          blur: 1,
          opacity: 0.45,
        },
      },
      legend: {
        show: false,
      },
    };
  }
}

and here is the HTML

<div id="chart">
  <apx-chart
    [series]="chartOptions.series"
    [chart]="chartOptions.chart"
    [dataLabels]="chartOptions.dataLabels"
    [plotOptions]="chartOptions.plotOptions"
    [xaxis]="chartOptions.xaxis"
    [stroke]="chartOptions.stroke"
    [fill]="chartOptions.fill"
    [yaxis]="chartOptions.yaxis"
    [title]="chartOptions.title"
    [tooltip]="chartOptions.tooltip"
    [legend]="chartOptions.legend"
    [grid]="chartOptions.grid!"
  ></apx-chart>
</div>

I tried a lot of Apex Opti. Here is what I want it to look like.