Reputation: 71
I am using ng2-charts to display very basic charts. I am using horizontal bar charts and I need to display values at the end of bars. I couldn't figure out how to do that? See image
Following is my html and options:
<canvas height="500" width="1000" baseChart
[data]="barChartData"
[labels]="statusNames"
[options]="barChartOptions"
[colors]="chartColors"
[legend]=false
[chartType]="barChartType"
(chartHover)="chartHovered($event)"
(chartClick)="chartClicked($event)">
</canvas>
public barChartOptions: any = {
title: {
display: true, text: 'Current Subject Status',
fontSize: 20,
color: "black"
},
scales: {
xAxes: [{
gridLines: {
borderDash: [5],
lineWidth: 1.4
},
ticks: { beginAtZero: true}
}],
yAxes: [{
barThickness: 20,
gridLines: { display: false }
}]
},
maintainAspectRatio: true,
responsive: false
};
public barChartType: string = 'horizontalBar';
public chartColors: any = [{ backgroundColor: "#005CA9" }];
public barChartData: number[] = [3, 97 ,15, 13,63 ];
Upvotes: 4
Views: 4074