Not able to show graph on click of a button - html

Question

Graph is not displayed on click. I have
I have two child components
Data component for showing the list of employees
Rating component for showing employee's respective rating
I have put 'graph code' inside 'ngOnInit' function in Rating component, and click button is in Data component, with help of event emitting i am trying to pass a boolean value from Data to Rating .
As you can see below in rating.component.html, if the flag value becomes true, then show graph. But even after flag becomes true, graph is not visible.
Data component
import { DataService } from './../../services/data.service';
import { Component, OnInit, Output, EventEmitter} from '#angular/core';
#Component({
selector: 'app-data',
templateUrl: './data.component.html',
styleUrls: ['./data.component.css'],
})
export class DataComponent implements OnInit {
users: { name: string; city: string }[] = [];
visible = false;
#Output() show = new EventEmitter();
constructor(private dataSerivce: DataService) {}
ngOnInit(): void {
this.users = this.dataSerivce.getEmployees();
}
toggle() {
this.visible = !this.visible;
if (this.visible) {
console.log('enter');
this.show.emit(this.visible);
} else {
this.show.emit(null);
}
}
}
Rating component
import { Rating } from './../../../../models/rating.model';
import { DataService } from 'src/app/services/data.service';
import { Component, OnInit, Input, OnChanges, SimpleChanges} from '#angular/core';
import {Chart} from '../../../../node_modules/chart.js';
#Component({
selector: 'app-rating',
templateUrl: './rating.component.html',
styleUrls: ['./rating.component.css']
})
export class RatingComponent implements OnInit ,OnChanges{
rating: Rating[] = [];
#Input() flag = false;
constructor(private dataService: DataService) { }
ngOnInit() {
console.log('init');
var myChart= new Chart('myChart', {
type: 'bar',
data: {
labels: ['Technical', 'Communication', 'Experience', 'Leadership'],
datasets: [{
label: 'skill scores',
data: [10,15, 16, 22],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)'
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)'
],
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
}
ngOnChanges(changes: SimpleChanges){
console.log('first time');
}
private getRatings($event){
this.dataService.getRating().subscribe(res =>{
this.rating.push(res);
});
}
}
Rating html code
<div style="height:40%;width:40%;" class="center" *ngIf ="flag" >
<canvas
class="chart chart-bar"
chart-data="dataChart" id = "myChart"></canvas>
</div>

Answer 1

While the chart.js options might be correct, the current code in RatingComponent is not referencing the chart.js options to any particular DOM Element. This could be one of the reasons why the chart is not getting rendered.
ChartJS expects a reference to a DOM Element which it shall use to render the chart.
For example:
HTML Template:
<div #barchart class="barChart"><d/iv>
RatingsComponent :
import { Component, OnInit, ViewChild } from '#angular/core';
import { Chart } from 'chart.js';
#Component({
...
})
export class RatingComponent implements OnInit {
#ViewChild('barchart') private chartRef;
chart: any;
ngOnInit() {
// provide reference of the html component to the the Chart Instance.
this.chart = new Chart(this.chartRef.nativeElement, {
// insert chart options here
});
}
}
Alternatively
After looking at your update, I think the part that is causing issue is that you are not passing the required data to the canvas component.
According to the documentation of ChartJS.
HTML Code:
<div>
<div style="display: block">
<canvas baseChart
[datasets]="barChartData"
[labels]="barChartLabels"
[options]="barChartOptions"
[legend]="barChartLegend"
[chartType]="barChartType">
</canvas>
</div>
</div>
Component
import { Component, OnInit } from '#angular/core';#Component({
selector: 'app-my-bar-chart',
templateUrl: './my-bar-chart.component.html',
styleUrls: ['./my-bar-chart.component.css']
})
export class MyBarChartComponent implements OnInit { constructor() { }
public barChartOptions = {
scaleShowVerticalLines: false,
responsive: true
};
public barChartLabels = ['2006', '2007', '2008', '2009', '2010', '2011', '2012'];
public barChartType = 'bar';
public barChartLegend = true; public barChartData = [
{data: [65, 59, 80, 81, 56, 55, 40], label: 'Series A'},
{data: [28, 48, 40, 19, 86, 27, 90], label: 'Series B'}
];
ngOnInit() {
}}