chartjs and number format

[chaloupka]

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

[Melloware]

Can you give an example of what your Java Number is and how you want it formatted on the UI?

[chaloupka]

Hi, I am sorry for being late, another tasks.

my code is:

Code: Select all

<p:barChart model="#{statistics.barModel}" style="width: 100%; height: 300px;" id="monthStats"  />

and

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

[Melloware]

Looks like you just need to use the Primefaces ChartJS Extender functionality combined with this stack overflow post: https://stackoverflow.com/a/52355634/502366

[chaloupka]

I am sorry, I am affraid I do not understand how to use it.

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");

and in .xhtml page I have:

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>

But it has no efect, does not matter what return part I use..