PrimeNG charts not displaying

0
votes

I am trying to use PrimeNG charts in my jhipster(spring/angular) project and all kind of charts (or other PrimeNG components) are not displayed at all. I am using angular 7.3.7 and primeng 7.1.3. I did see some reported issues with this and have tried different solutions but with no results.

Html page:

<p-chart type="bar" width="400" height="400" [data]="data" [options]="options"></p-chart>

Component code:

import {Component, OnInit} from '@angular/core';

@Component({
    selector: 'jhi-statistics',
    templateUrl: './statistics.component.html',
    styles: []
})
export class StatisticsComponent implements OnInit {

    data: any;

    constructor() {
        this.data = {
            labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
            datasets: [
                {
                    label: 'My First dataset',
                    backgroundColor: '#42A5F5',
                    borderColor: '#1E88E5',
                    data: [65, 59, 80, 81, 56, 55, 40]
                },
                {
                    label: 'My Second dataset',
                    backgroundColor: '#9CCC65',
                    borderColor: '#7CB342',
                    data: [28, 48, 40, 19, 86, 27, 90]
                }
            ]
        }
    }
}

app.module.ts:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { ChartModule } from 'primeng/primeng';
...

@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        ...
        ChartModule
    ],
    ...

vendor.css:

@import '~bootstrap/dist/css/bootstrap.min.css';
@import '~primeng/resources/primeng.min.css';

and I have no error though. Am I missing something? Any help will be appreciated.

1
angularjhipsterprimeng

1 Answers

0
votes

The original question is already a few months old, but the challenge still exists in April 2020 with PrimeNG 9.0.5. If you have installed chart.js as described in the official documentation, imported and included all components correctly and still only an empty placeholder is displayed instead of the pie chart, the following procedure will probably help you:

HTML part:

<p-chart #chart type="pie" [data]="chartData"></p-chart>

TypeScript part:

@ViewChild('chart') chart: any;

[...]

ngOnInit(): void {
  setTimeout(() => {
    this.chart.refresh();
  }, 100);
}