'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],
),
),
);
}
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
