Turned Labels in Angular

import { Component, AfterViewInit, OnDestroy, ViewChild } from '@angular/core';
import {
  ChartComponent,
  ApexAxisChartSeries,
  ApexNonAxisChartSeries,
  ApexChart,
  ApexXAxis,
  ApexYAxis,
  ApexTitleSubtitle,
  ApexDataLabels,
  ApexStroke,
  ApexFill,
  ApexLegend,
  ApexTooltip,
  ApexMarkers,
  ApexPlotOptions,
  ApexResponsive,
  ApexGrid,
  ApexAnnotations,
  ApexStates,
  ApexTheme,
  NgApexchartsModule,
} from 'ng-apexcharts';

export type ChartOptions = {
  series?: ApexAxisChartSeries | ApexNonAxisChartSeries;
  chart?: ApexChart;
  xaxis?: ApexXAxis;
  yaxis?: ApexYAxis | ApexYAxis[];
  title?: ApexTitleSubtitle;
  subtitle?: ApexTitleSubtitle;
  dataLabels?: ApexDataLabels;
  stroke?: ApexStroke;
  fill?: ApexFill;
  legend?: ApexLegend;
  tooltip?: ApexTooltip;
  markers?: ApexMarkers;
  plotOptions?: ApexPlotOptions;
  responsive?: ApexResponsive[];
  grid?: ApexGrid;
  annotations?: ApexAnnotations;
  states?: ApexStates;
  theme?: ApexTheme;
  colors?: string[];
  labels?: any;
};

@Component({
  selector: 'app-chart',
  standalone: true,
  imports: [NgApexchartsModule],
  templateUrl: './chart.component.html',
})
export class AppChart implements AfterViewInit, OnDestroy {
  @ViewChild('chart') chart!: ChartComponent;
  public chartOptions: Partial<ChartOptions> = {
          series: [
            {
              data: [
                {
                  x: 'src',
                  children: [
                    {
                      x: 'charts',
                      children: [
                        {
                          x: 'bar',
                          children: [
                            { x: 'stacked', y: 42 },
                            { x: 'range', y: 28 },
                            { x: 'radius', y: 16 },
                          ],
                        },
                        {
                          x: 'line',
                          children: [
                            { x: 'area', y: 34 },
                            { x: 'paths', y: 22 },
                          ],
                        },
                        {
                          x: 'pie',
                          children: [
                            { x: 'arcs', y: 26 },
                            { x: 'donut', y: 18 },
                          ],
                        },
                        { x: 'common', y: 30 },
                      ],
                    },
                    {
                      x: 'modules',
                      children: [
                        {
                          x: 'axes',
                          children: [
                            { x: 'xaxis', y: 30 },
                            { x: 'yaxis', y: 28 },
                            { x: 'grid', y: 20 },
                          ],
                        },
                        {
                          x: 'tooltip',
                          children: [
                            { x: 'labels', y: 24 },
                            { x: 'utils', y: 14 },
                          ],
                        },
                        { x: 'legend', y: 26 },
                        { x: 'anim', y: 34 },
                      ],
                    },
                    {
                      x: 'utils',
                      children: [
                        { x: 'dates', y: 22 },
                        { x: 'colors', y: 16 },
                        { x: 'dom', y: 14 },
                      ],
                    },
                    {
                      x: 'svg',
                      children: [
                        { x: 'paths', y: 20 },
                        { x: 'math', y: 12 },
                      ],
                    },
                    { x: 'assets', y: 24 },
                  ],
                },
              ],
            },
          ],
          chart: {
            type: 'icicle',
            height: 460,
          },
          // The library's own palette, lightened: a turned label sits INSIDE its cell
          // on every level, so the fills have to stay light enough to read dark text
          // against, all the way down. The fifth is a steel blue rather than the
          // palette's violet, which goes muddy once it is tinted this far.
          colors: ['#7CC6F0', '#6FD7C1', '#FFC46B', '#F09BA0', '#9AAEC8'],
          title: {
            text: 'Bundle size by source folder',
            align: 'left',
          },
          subtitle: {
            text: 'Every label turned a quarter turn, which suits short names and a deep tree.',
            align: 'left',
          },
          plotOptions: {
            icicle: {
              // Turn EVERY label, rather than only the ones that would be clipped flat.
              // A turned label reads across the band thickness, so this suits short
              // names: with long ones, 'auto' keeps more of them on screen.
              dataLabels: {
                rotate: 'always',
                minSizeToShow: 14,
                style: {
                  fontSize: '11px',
                  colors: ['#44403C'],
                },
              },
            },
          },
          stroke: {
            width: 1,
            colors: ['#fff'],
          },
        };
  ngAfterViewInit() {
    (window as any).ApexCharts.setLicense('APEX-eyJleHBpcnlEYXRlIjoiMjEyNi0wNy0wNCIsImlzc3VlRGF0ZSI6IjIwMjYtMDctMjgiLCJwbGFuIjoicHJlbWl1bSIsImRvbWFpbnMiOlsiYXBleGNoYXJ0cy5jb20iLCIxMjcuMC4wLjEiLCJsb2NhbGhvc3QiXSwic2lnIjoieVBmb1VCc0Z3TU9ZdUEyaEZkR0I2Y1FtZ0JITUtXcVdJSjB2NVRESXRZbFR3eDJMUmh6R2x0RUc3VXJ4X0s3b25ZMWRZb2Z2VGItN01ydFYyNDVyOWcifQ==');
  }

  ngOnDestroy() {
    // no cleanup needed
  }
}