Reverse flag does not work on Y Axis

[DevidCIC]

The reverse flag works on the X Axis but not on Y Axis.

stacked,
            ticks: {
              reverse: this.isChartDirectionHorizontal,
            },

[nagix]

Can you share your entire chart configuration?

[DevidCIC]

Can you share your entire chart configuration?
The entire chart configuration is too big. 570 lines of code.

This is the chart, I want the y axis reverted.

 const hasMultipleAxes: boolean = uniq(chartData.series.map(a => a.serie.YAxisName || '')).length > 1;

        const chartDatasets: ChartDataSets[] = chartData.series.map((serie, index) => {
			const type: string = this.chartTypeMapping[serie.serie.SeriesType];
            let chartPointsData: ChartPoint[] | number[] = [];

            // if the seriesType is radar or doughnut then data has to be of type number[] otherwise ChartPoint[]
            const seriesType: SeriesType = serie.serie.SeriesType;
            const isPolarOrDoughnutChart: boolean = seriesType === SeriesType.Polar || seriesType === SeriesType.Doughnut;
            const isRadarOrPolarOrDougnutChart: boolean = seriesType === SeriesType.Radar || isPolarOrDoughnutChart;
            if (isRadarOrPolarOrDougnutChart) {
                chartPointsData = serie.yValues.map(point => point.yValue);
            } else {
                chartPointsData = serie.yValues.map(point => {
                    if (this.isChartDirectionHorizontal) {
                        return (<ChartPoint>{
                            y: point.xPoint.xValue,
                            r: point.weight || 1,
                            x: point.yValue
                        });
                    } else {
                        return (<ChartPoint>{
                            y: point.yValue ,
                            r: point.weight || 1,
                            x: point.xPoint.xValue,
                        });
                    }});
            }

            const format = serie.serie.YFormat && this.evaluationService.GetFormatSync(serie.serie.YFormat);
            const labels = serie.yValues.map(a => a.xPoint.xLabelFormatted);
            const dataset: ChartDataSets = {
                isRadarOrPolarOrDougnutChart,
                isPolarOrDoughnutChart,
                isChartDirectionHorizontal: this.isChartDirectionHorizontal,
                format,
                pointRadius: 4.5,
                fill: isRadarOrPolarOrDougnutChart ? true : false,
                data: chartPointsData,
                label: translate(serie.serie.Name || '').translation,
                type: this.isChartDirectionHorizontal ? 'horizontalBar' : type,
                stack: serie.serie.Group || undefined,
                yAxisID: this.isChartDirectionHorizontal ? undefined : (serie.serie.YAxisName || ''),
                xAxisID: this.isChartDirectionHorizontal ? (serie.serie.YAxisName || '') : undefined,
                ...<any>ChartHelpers.getColors(type, index, serie.yValues.length, colors, serie.yValues.map(a => a.yValue)),
                labels
            };

            return dataset;
        });

        const stacked: boolean = chartData.series.some(serie => !!serie.serie.Group);
		this.chartType = chartDatasets.some(chartDataSet => chartDataSet.type === 'bar') ? 'bar' : <ChartType>(chartDatasets[0] && chartDatasets[0].type);

        this.chartLabels = chartData.xPoints.map(point => point.xLabelFormatted);

        const xAxes: ChartXAxe[] = [{
            stacked,
            ticks: {
              reverse: this.isChartDirectionHorizontal,
            },
            scaleLabel: {
              display: !!this.customization.XAxisName,
              labelString: this.customization.XAxisName && translate(this.customization.XAxisName).translation,
            },
          }];

        const yAxes: ChartYAxe[] = uniqBy(visibleSeries, chartSerie => chartSerie.YAxisName || '')
            .map((serie, index) => {
                const id = serie.YAxisName || '';
                const yFormat: ClarionFormat = serie.YFormat && this.evaluationService.GetFormatSync(serie.YFormat);

                let position = '';
                if (this.isChartDirectionHorizontal) {
                    position = index % 2 === 0 ?  'bottom' : 'top';
                } else {
                    position = index % 2 === 0 ?  'left' : 'right';
                }

                return <ChartYAxe>{
                    stacked,
                    id,
                    display: true,
                    gridLines: {
                        display: index === 0
                    },
                    position,
                    type: 'linear',
                    scaleLabel: {
                        display: !!id,
                        fontColor: hasMultipleAxes ? serie.ColorHex : null,
                        labelString: translate(id).translation,
                    },
                    ticks: {
                        beginAtZero: true,
                        callback: (value: number, index, values) => yFormat && yFormat.Format(new ClarionObject(value)).trim() || value,
                        fontColor: hasMultipleAxes ? serie.ColorHex : null,
                    },
                };
            });

        let chartScales: ChartScales;
        if (this.isChartDirectionHorizontal) {
            chartScales = {
                xAxes: yAxes,
                yAxes: xAxes
            };
        } else {
            chartScales = {
                xAxes,
                yAxes
            };
        }

        const isDougnut: boolean = this.customization.Series && this.customization.Series.some(a => a.SeriesType === SeriesType.Doughnut);
        const alwaysDisplayLabels = isDougnut;

        this.chartOptions = <ChartOptions>{
            legend: {
                display: isDougnut ? false : this.customization.DisplayLegend
            },
            pan: {
                enabled: this.chartZoomMode !== ChartZoomMode.None,
                mode: this.chartZoomMode === ChartZoomMode.Horizontal ? 'x' : (this.chartZoomMode === ChartZoomMode.Vertical ? 'y' : 'xy'),
            },
            zoom: {
                enabled: this.chartZoomMode !== ChartZoomMode.None,
                mode: this.chartZoomMode === ChartZoomMode.Horizontal ? 'x' : (this.chartZoomMode === ChartZoomMode.Vertical ? 'y' : 'xy'),
                speed: 10,
                sensitivity: 3,
            },
            plugins: {
                datalabels: {
                    backgroundColor: (context: { dataset: { backgroundColor: any; }; }) => {
                        return context.dataset.backgroundColor;
                    },
                    borderRadius: 4,
                    color: 'white',
                    display: (context: { dataset: any; dataIndex: string | number; }) => {
                        const dataset = context.dataset;
                        const point = dataset.data[context.dataIndex];
                        if (point === null || point === undefined || point.y === null) {
                            return false;
                        }
                        if (alwaysDisplayLabels) {
                            return true;
                        }
                        return this.displayLabels;
                    },
                    font: {
                        weight: 'bold',
                    },
                    formatter: (value: number, context: ChartContext) => {
                        const dataset = context.dataset;
                        const point = (dataset.data && dataset.data[context.dataIndex]) || null;

                        if (point) {
                            let pointValue: number;
                            if (typeof point === 'number') {
                                pointValue = point;
                            } else {
                                    if (dataset.isChartDirectionHorizontal) {
                                        pointValue = Number(point.x);
                                    } else {
                                        pointValue = Number(point.y);
                                    }
                            }

                            let result: number | string = pointValue;
                            if (dataset.format) {
                                result = dataset.format.Format(new ClarionObject(pointValue.toString())).trim() || pointValue;
                            }

                            if (context.dataset.isPolarOrDoughnutChart) {
                                const label = this.chartLabels[context.dataIndex];
                                if (label) {
                                    return `${label}: ${result}`;
                                }
                            }

                            return result;
                        }
                    }
                },
            },
            scales: chartScales,
            responsive: true,
            maintainAspectRatio: false
        };

        this.chartDatasets = chartDatasets;
        this.loading.next(false);
    }

[nagix]

Duplicate of #3306. #6342 is trying to solve this.

[DevidCIC]

Any updates on this ?
I see that if the Y-Axis consists of numbers then setting the reversed flags works. But if the Y-Axis consists of letters than the reversed does not work.