Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

203
Visualizações
Angular Ngx Charts chart stays empty

I have a problem. I am trying to fill my charts with real data from my API. To do that I have the following html:

<ngx-charts-bar-vertical
    [results]="popularCountriesData"
    [legend]="false"
    [showXAxisLabel]="false"
    [showYAxisLabel]="false"
    [xAxis]="true"
    [yAxis]="false"
    [gradient]="false">
</ngx-charts-bar-vertical>

And my typescript file is:

import {Component, OnInit} from '@angular/core';
import {ResearcherService} from "../../../services/researcher.service";
import {HttpErrorResponse} from "@angular/common/http";
import {PostCollection} from "../../../models/PostCollection";

@Component({
  selector: 'app-dashboard-custom',
  templateUrl: './dashboard-custom.component.html',
  styleUrls: ['./dashboard-custom.component.css']
})
export class DashboardCustomComponent implements OnInit {

    popularCountriesData: any = [];

    constructor(private researcherService: ResearcherService) { this.getData(); }

    private getData() {
        this.researcherService.restGetStatisticsCountry().subscribe((data: PostCollection[]) => {
                for (let i = 0; i < data.length; i++)
                    this.popularCountriesData.push({ name: data[i].name, value: data[i].posts.length });
                console.log(this.popularCountriesData)

            },
            (err: HttpErrorResponse) => {
                console.log(err.error);
            });
    }

    ngOnInit(): void {
    }

}

When I run this code, my chart is empty, while I can see in the console log:

[
    {
        "name": "Japan",
        "value": 1
    },
    {
        "name": "Russia",
        "value": 1
    },
    {
        "name": "Netherlands",
        "value": 8
    }
]

If I copy this data and hardcode it in the typescript file like this:

popularCountriesData = [
        {
            "name": "Japan",
            "value": 1
        },
        {
            "name": "Russia",
            "value": 1
        },
        {
            "name": "Netherlands",
            "value": 8
        }
];

The chart has a result: enter image description here

What am I doing wrong?

about 4 years ago · Juan Pablo Isaza
1 Respostas
Responde à pergunta

0

Call this.getData(); from ngOnInit.

Instead of push create new array and assign that new array to popularCountriesData

Something like:

    private getData() {
        this.researcherService.restGetStatisticsCountry().subscribe((data: PostCollection[]) => {
                const tempArray = [];
                for (let i = 0; i < data.length; i++)
                    tempArray.push({ name: data[i].name, value: data[i].posts.length });
                this.popularCountriesData = tempArray;
                console.log(this.popularCountriesData)

            },
            (err: HttpErrorResponse) => {
                console.log(err.error);
            });
    }
about 4 years ago · Juan Pablo Isaza Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda