I have managed to get the values to be displayed, but not to behave correctly with respect to the axis

HTML:

<apx-chart
        [series]="chartOptions.series"
        [chart]="chartOptions.chart"
        [xaxis]="chartOptions.xaxis"
        [colors]="chartOptions.colors"
        [dataLabels]="chartOptions.dataLabels"
        [markers]="chartOptions.markers"
        [yaxis]="chartOptions.yaxis"
        [title]="chartOptions.title"
></apx-chart>

TS:

let matrix = {};
        const data = this.data.map((point, index) => {
            matrix[index] = point[this.data.type + 'Value'];
            let value = this.data.type === 'number' ? point[this.data.type + 'Value'] : index;
            return {
                x: this.transformDate(point.createdAt),
                    y: value
            }
        });

        this.chartOptions = {
            series: [
                {
                    name: this.data.name,
                    data
                },
            ],
            chart: {
                height: this.chartHeight,
                width: this.chartWith,
                type: "line",
                dropShadow: {
                    enabled: true,
                    color: "#000",
                    top: 18,
                    left: 7,
                    blur: 10,
                    opacity: 0.2
                },
                toolbar: {
                    show: false
                }
            },
            colors: ["#77B6EA", "#545454"],
            dataLabels: {
                enabled: true,
                formatter: (val, index) => {
                    return this.data.type === 'number' ? val : matrix[val];
                }
            },
            title: {
                text: this.data.name,
                align: "left"
            },
            markers: {
                size: 1
            },
            xaxis: {
                title: {
                    text: "Date"
                }
            },
            yaxis: {
                labels: {
                    show: true,
                    formatter: (value, index) => {
                        return this.data.type === 'number' ? value : matrix[value];
                    }
                },
                title: {
                    text: this.data?.unit || 'Values'
                },
            },
        };

When the values are numeric there is no problem, the problem is with the boolean and the enum type, these are represented but badly they always grow on the y-axis and the values are repeated

Examples: Graph with enum values

Graph with boolean values