Angular Pyramid Chart with Index Labels

/* app.component.ts */
import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { CommonModule } from '@angular/common';
import { CanvasJSAngularChartsModule } from '@canvasjs/angular-charts';

@Component({
    selector: 'app-root',
    standalone: true,
    imports: [RouterOutlet, CommonModule, CanvasJSAngularChartsModule],
    templateUrl: './app.component.html',
    styleUrl: './app.component.css',
})
export class AppComponent {
    chartOptions = {
        animationEnabled: true,
        theme: "light2",
        title: {
            text: "Product Manufacturing Expenses"
        },
        data: [{
            type: "pyramid",
            indexLabelFontSize: 18,
            showInLegend: true,
            legendText: "{indexLabel}",
            toolTipContent: "{indexLabel}: {y}%",
            dataPoints: [
                { y: 32, indexLabel: "Research and Design" },
                { y: 28, indexLabel: "Manufacturing" },
                { y: 15, indexLabel: "Marketing" },
                { y: 13, indexLabel: "Shipping" },
                { y: 12, indexLabel: "Retail" }
            ]
        }]
    }
}