suvarna chikkamath
1 min readMay 28, 2019

--

How to display the values on bar chart useing Typescript.

Bar chart Design.

Display the values on bar chart

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)’
}
}
}

--

--