CODEWITHSUNDEEP
angulartypescriptchart.js
CJLopez
CJLopez

Reputation: 5815

Chart section is empty

I'm trying to add some charts to an angular project, but it's always shown empty

Component

import {
  Component,
  OnInit
} from '@angular/core';
import {
  Router
} from '@angular/router';
import {
  Chart
} from 'chart.js';

import * as _ from 'lodash';
import * as moment from 'moment';

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

  chart: any = null;

  constructor(
    private router: Router) {}

  ngOnInit() {
    this.chart = new Chart("canvas", {
      type: 'bar',
      data: {
        labels: ['1', '2', '3'],
        datasets: [{
          label: 'test1',
          data: [10, 20, 30],
          backgroundColor: 'rgba(255, 0, 0, 0.5)'
        }]
      }
    });
  }
}
<canvas id="canvas">{{ chart }}</canvas>

But still, I'm only getting a blank page

Any ideas? I was using this site examples https://coursetro.com/posts/code/126/Let's-build-an-Angular-5-Chart.js-App---Tutorial

Update: So, tried adding your suggestion, none worked, but I took a peek at the charts object and saw this

chart object properties

I'm seeing that the canvas and ctx properties are null, so, is the chart object not getting the element on which it will be rendered?

Upvotes: 0

Views: 353

Answers (2)

Our_Benefactors
Our_Benefactors

Reputation: 3539

Call chart.update() after initializing the chart object. See the documentation for modifying chart data here: chartjs.org/docs/latest/developers/updates.html

Upvotes: 2

Linh
Linh

Reputation: 468

In the component you are using the chart, add this to the component's CSS: 

:host {
  display: block;
}

result: https://stackblitz.com/edit/angular-mqsupm

Upvotes: 0

Related Questions