'Taiga - Angular : next.map is not a function at taiga-ui-addon-charts-components-bar-chart.js

I m trying to display a simple chart using Taiga-ui, but I get this error when using the bar-chart chart. I try to display some values on a single chart, using the example provided in the https://taiga-ui.dev/components/bar-chart website, stackblizt doesn't work for me to make changes so I tried making the function on my editor, but I seem to have something missing.

chart.components.html

<tui-axes
  *ngIf="computeLabels$(range) | async as labels"
  class="axes"
  [axisXLabels]="labels"
  [axisYLabels]="labelsY"
  >
    <tui-bar-chart [max]="50" [value]="values"></tui-bar-chart>
</tui-axes>

chart.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { StatisticsRoutingModule } from './statistics-routing.module';
import { StatisticsComponent } from './statistics.component';

import { ProgressModule } from '@app/shared-modules/progress/progress.module';
import { MatFormFieldModule } from '@angular/material/form-field';
import { FormsModule } from '@angular/forms';
import { ChartComponent } from './company-overview/chart.component';
import { TuiAxesModule, TuiBarChartModule, TuiBarModule } from '@taiga-ui/addon-charts';
import { TuiCalendarModule, TuiRootModule } from "@taiga-ui/core";
import { TuiCalendarMonthModule, TuiCalendarRangeModule } from '@taiga-ui/kit';
import { TuiLineChartModule, TuiRingChartModule } from "@taiga-ui/addon-charts"

@NgModule({
  declarations: [StatisticsComponent, CompanyOverviewComponent],
  imports: [
    CommonModule,
    FormsModule,
    ProgressModule,
    StatisticsRoutingModule,
    TuiRootModule,
    TuiAxesModule,
    TuiBarModule,
    TuiBarChartModule,
    TuiLineChartModule,
    TuiRingChartModule,
    TuiCalendarModule,
    TuiCalendarRangeModule,
    TuiCalendarMonthModule,
  ],
})
export class StatisticsModule {}

chart.component.ts

values = ['11', '25', '18', '35', '12']
labelsY = ['0', '10', '20', '30', '35']

@tuiPure
    computeLabels$({from, to}: TuiDayRange): Observable<readonly string[]> {
        return this.months$.pipe(
            map(months =>
                Array.from(
                    {length: TuiMonth.lengthBetween(from, to) + 1},
                    (_, i) => months[from.append({month: i}).month],
                ),
            ),
        );
    }

enter image description here



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source