i'm facing a challenge ploting ChartJs bar chart in my angular app with the data coming from my api response
this is the code snippets
<div class="canvas">
<canvas id="canvas" baseChart [data]="barChartData" [options]="barChartOptions" [plugins]="barChartPlugins"
[legend]="barChartLegend" [type]="'bar'">
</canvas>
</div>
this.barChartData = new Chart('canvas', {
type:"bar",
data: {
labels: ["Private", "NASHA", "NHIS", "Others"],
datasets:[{
data: [
this.apiResponse?.Private,
this.apiResponse?.data_1
],
label: 'hey',
backgroundColor: [ '#E8E2F4']
}]
},
options:{
scales: {
y:{
beginAtZero:true
}
}
}
})
now the issue is that the chart is not pupolating and when i console the api response befor creating the chart i get the values as expected, but when i console the value after the chart, it returns undefined
pls what can be the cause, and how do i fix it
As the apiResponse is the response from the API, you should subscribe to the observable and assign the response value to apiResponse.
My concern based on your current code is as you are using the NG2-Charts directive, you are not correctly passing the value to those inputs such as [data], [options].
Solution 1: With NG2-Charts
The barChartData should be the ChartData<'bar'> type but not ChartConfiguration<'bar'>.
barChartData!: ChartData<'bar'>;
barChartOptions!: ChartOptions<'bar'>;
barChartPlugins!: any;
barChartLegend = true;
this.barChartOptions = {
scales: {
y: {
beginAtZero: true,
},
},
};
of({
Private: 6,
data_1: 15,
}) /* Replace this with the observable that you call the API */
.subscribe((resp) => {
this.apiResponse = resp;
this.barChartData = {
labels: ['Private', 'NASHA', 'NHIS', 'Others'],
datasets: [
{
data: [this.apiResponse?.Private, this.apiResponse?.data_1],
label: 'hey',
backgroundColor: ['#E8E2F4'],
},
],
};
});
Solution 2: Pure Chart.js
For pure Chart.js, you can do as below:
of({
Private: 6,
data_1: 15,
}) /* Replace this with the observable that you call the API */
.subscribe((resp) => {
this.apiResponse = resp;
new Chart('canvas2', {
type: 'bar',
data: {
labels: ['Private', 'NASHA', 'NHIS', 'Others'],
datasets: [
{
data: [this.apiResponse?.Private, this.apiResponse?.data_1],
label: 'hey',
backgroundColor: ['#E8E2F4'],
},
],
},
options: {
scales: {
y: {
beginAtZero: true,
},
},
},
} as ChartConfiguration<'bar'>);
});