1 min readMay 28, 2019
How to display the values on bar chart useing Typescript.
Bar chart Design.
TypeScript Code:
public chart1Options:any = {
scaleShowVerticalLines: false,
responsive: true,
animation: {
onComplete: function () {
let ctx = this.chart.ctx;
ctx.textAlign = “center”;
ctx.textBaseline = “middle”;
let chart = this;
let datasets = this.config.data.datasets;
datasets.forEach(function (dataset: Array<any>, i: number) {
ctx.font = “10px Arial”;
ctx.fillStyle = “Black”;
chart.getDatasetMeta(i).data.forEach(function (p: any, j: any) {
ctx.fillText(datasets[i].data[j], p._model.x, p._model.y — 20);
});
});
}
},
legend: {
display: true,
labels: {
fontColor: ‘rgb(255, 99, 132)’
}
}
}