const config: any = {
type: 'bar',
data: {
localNumberPipe : this.localNumberPipe,
labels: this.labels,
datasets: [{
minBarLength: 5,
maxBarThickness: 50,
label: 'Waterfall Chart',
elements: {
bar: {
backgroundColor: this.color,
borderColor: this.color,
}
},
data: this.data,
borderWidth: 1,
borderSkipped: false
}]
},
options: {
maintainAspectRatio: false,
plugins: {
tooltip: {
callbacks: {
context: {
_this: this,
},
label: function (context) {
var bar = JSON.parse(context.formattedValue);
var label = [];
if (bar) {
var l= this.locale;
const diff = Number.parseFloat(bar[1]) - Number.parseFloat(bar[0]);
label.push('Difference: ' + formatNumber(diff, 'en-US', '1.0-0'));
label.push('Start: ' + formatNumber(bar[0], 'en-US', '1.0-0'));
label.push('End: ' + formatNumber(bar[1], 'en-US', '1.0-0'));
}
return label;
}
}
}
},
scales: {
y: {
beginAtZero: true
}
}
},
plugins: [connectorLines]
};
In the constructor I have this code where I am getting localy as ‘an-US’
constructor(private localeService: LocaleService) {
this.localNumberPipe = new LocalNumberPipe(localeService);
Chart.register(...registerables);
**this.locale** = this.localeService.locale ;
console.log(this.locale);
}
but if I try to access this.locale in tooltip callback function it returns undefine. Is it something related to this scope? if so is any way to add locale in chart config as a property so I can access it in tooltip callback function.
In the developer console this return the tooltip details.
label: function (context) {
var bar = JSON.parse(context.formattedValue);
debugger /// execute this at this stage
Thank you for your support!