I'm currently working on my Angular project with ngChartjs, and I've run into a conflict regarding the tooltip values.
https://i.sstatic.net/NBKCJ.png
For example, if the value is 6131327.319655154, I have tried formatting it to 6131327.31 using the code snippet below, but it's not functioning as expected.
tooltips: {
callbacks: {
label(tooltipItem, data) {
return tooltipItem.yLabel.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ','); }, },
},
This is the code I am using:
HTML
<canvas ngChartjs
[datasets]="barChartData"
[labels]="barChartLabels"
[options]="barChartOptions"
[colors]="barChartColors"
[legend]="barChartLegend"
[chartType]="barChartType"
[colors]="colors">
</canvas>
.ts // Bar Chart
public colors = [
{ backgroundColor: '#29aae2' },
// { backgroundColor: '#7f9ebc' },
];
barChartOptions: any = {
scaleShowVerticalLines: false,
responsive: true,
scales: {
xAxes: [{
display: true,
scaleLabel: {
display: false,
labelString: 'Month'
},
gridLines: false,
ticks: {
display: true,
beginAtZero: true,
fontSize: 13,
padding: 10
}
}],
yAxes: [{
display: true,
scaleLabel: {
display: false,
labelString: 'Value',
},
gridLines: {
drawBorder: false,
offsetGridLines: false,
drawTicks: false,
borderDash: [3, 4],
zeroLineWidth: 1,
zeroLineBorderDash: [3, 4]
},
tooltips: {
callbacks: {
label(tooltipItem, data) {
return tooltipItem.yLabel.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ','); }, },
},
ticks: {
/* max: 100,*/
// stepSize: 20,
display: true,
beginAtZero: true,
fontSize: 13,
padding: 10,
// stepSize: 100000,
callback(value) {
const ranges = [
{ divider: 1e6, suffix: 'M' },
{ divider: 1e3, suffix: 'k' }
];
function formatNumber(n) {
// tslint:disable-next-line:prefer-for-of
for (let i = 0; i < ranges.length; i++) {
if (n >= ranges[i].divider) {
return (n / ranges[i].divider).toString() + ranges[i].suffix;
}
}
return n;
}
return ' ' + formatNumber(value);
}
}
}]
}
};
barChartLabels: string[] = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
barChartType = 'bar';
barChartLegend = true;
barChartColors: Array<any> = [
{
backgroundColor: this.themeColors.blue,
borderWidth: 0
},
{
backgroundColor: this.themeColors.blueLight,
borderWidth: 0
}
];
barChartData: any[] = [
{
data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
label: '2020',
categoryPercentage: 0.70,
barPercentage: 0.70,
},
{
data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
label: '2021',
categoryPercentage: 0.70,
barPercentage: 0.70,
}
];
Has anyone encountered a similar issue and found a solution?
Thanks