Hello,
I did not find the way how to format numbers in chartjs - any articles are related to old implementation.
I am using Primefaces 7.0.5, apache-tomcat-9.0.21 / Mojarra 2.2.7, jdk-11.0.3
Did anyone solved it?
Thanks, Jiri
chartjs and number format
Can you give an example of what your Java Number is and how you want it formatted on the UI?
PrimeFaces Developer | PrimeFaces Extensions Developer
GitHub Profile: https://github.com/melloware
PrimeFaces Elite 7.0.8 / PF Extensions 7.0.3
GitHub Profile: https://github.com/melloware
PrimeFaces Elite 7.0.8 / PF Extensions 7.0.3
Hi, I am sorry for being late, another tasks.
my code is:
and
The output looks by this:

the in the number I would like to have thousands separated by space, and "," as decimal point
my code is:
Code: Select all
<p:barChart model="#{statistics.barModel}" style="width: 100%; height: 300px;" id="monthStats" />
Code: Select all
for(MonthStatisticsDTO dto: statThisYear){
valuesThisYear.add(dto.getAmount());
}
barDataSetThisYear.setData(valuesThisYear);
for(MonthStatisticsDTO dto: statPrevYear){
valuesPrevYear.add(dto.getAmount());
}
barDataSetPrevYear.setData(valuesPrevYear);
data.addChartDataSet(barDataSetThisYear);
data.addChartDataSet(barDataSetPrevYear);
List<String> labels = new ArrayList<>();
labels.add("Leden");
labels.add("Únor");
...
data.setLabels(labels);
barModel.setData(data);
BarChartOptions options = new BarChartOptions();
Title title = new Title();
title.setDisplay(true);
if(barType == 1)
title.setText("Trzby");
if(barType == 3)
title.setText("Provize ");
options.setTitle(title);
Tooltip tooltip = new Tooltip();
tooltip.setMode("index");
tooltip.setIntersect(false);
options.setTooltip(tooltip);
barModel.setOptions(options);
The output looks by this:

the in the number I would like to have thousands separated by space, and "," as decimal point
Looks like you just need to use the Primefaces ChartJS Extender functionality combined with this stack overflow post: https://stackoverflow.com/a/52355634/502366
PrimeFaces Developer | PrimeFaces Extensions Developer
GitHub Profile: https://github.com/melloware
PrimeFaces Elite 7.0.8 / PF Extensions 7.0.3
GitHub Profile: https://github.com/melloware
PrimeFaces Elite 7.0.8 / PF Extensions 7.0.3
I am sorry, I am affraid I do not understand how to use it.
In java code, I add:
and in .xhtml page I have:
But it has no efect, does not matter what return part I use..
In java code, I add:
Code: Select all
...
Tooltip tooltip = new Tooltip();
tooltip.setMode("index");
tooltip.setIntersect(false);
options.setTooltip(tooltip);
barModel.setOptions(options);
barModel.setExtender("chartExtender");
Code: Select all
<h:outputScript>
function chartExtender() {
var options = {
scales: {
yAxes: [{
ticks: {
beginAtZero: true,
callback: function(label, index, labels) {
//return Intl.NumberFormat().format(label);
// 1,350
//return Intl.NumberFormat('hi', {
// style: 'currency', currency: 'INR', minimumFractionDigits: 0,
//}).format(label).replace(/^(\D+)/, '$1 ');
return Intl.NumberFormat('hi', {
style: 'currency', currency: 'INR', currencyDisplay: 'symbol', minimumFractionDigits: 2
}).format(label).replace(/^(\D+)/, '$1 ');
}
}
}]
}
}
$.extend(true, this.cfg.config, options);
};
</h:outputScript>