Format Number (formatar números)

[profbaco]

I am using the optionsRaw option as below: (Estou usando a opção de optionsRaw conforme abaixo:)

->optionsRaw('{
                "responsive": true,
                "plugins": {
                    "tooltip": {
                        "callbacks": {
                            "label": function(context) {
                                let label = context.dataset.label || "";
                                if (label) {
                                    label += ": ";
                                }
                                if (context.parsed.y !== null) {
                                    label += "R$ " + context.parsed.y.toLocaleString("pt-BR", {
                                        minimumFractionDigits: 2,
                                        maximumFractionDigits: 2
                                    });
                                }
                                return label;
                            }
                        }
                    }
                },
                "scales": {
                    "y": {
                        "ticks": {
                            "callback": function(value, index, values) {
                                return "R$ " + value.toLocaleString("pt-BR", {
                                    minimumFractionDigits: 2,
                                    maximumFractionDigits: 2
                                });
                            }
                        }
                    }
                }
            }');

But it's not formatting the numbers. What's wrong with my code? (Mas ele não esta formatando os números. O que esta errado no meu código?)

[profbaco]

I tried something simpler: (Tentei algo mais simples:)

->optionsRaw(
                '{
                    "scales": {
                        "y": [{
                            "ticks": {
                                "callback": function(value) {
                                    return value.toLocaleString("pt-BR", { style: "currency", currency: "BRL" });
                                }
                            }
                        }]
                    },
                    "legend": {
                        "display": true,
                        "position": "top"
                    }
                }'
            );

And it still didn't work. Does this lib not have this feature? (E mesmo assim não funcionou. Será que esta lib não tem este recurso?)

[peterjthomson]

Some questions:

1. What version of Chart JS are you on? The scales->y syntax is for v 3 and below.
2. What embedding strategy are you using? The CDN pattern includes Luxon, Moment and some Currency helpers. Whereas the npm or self-managed might require more setup.

Some suggestions:

1. When I ran your first attempt in our code-base it worked out of the box. So maybe try that one again.
2. The second attempt includes a slightly 'off' mix of square brackets and curly braces. That's valid JSON(ish) in some places in Chart JS, but not quite right for the versions of Chart JS that use scales->y instead the later versions use scales->yAxis
3. The optionsRaw() is really just a straight string pass through to Chart JS so that you can use all the native functionality. Maybe try getting the formatting you want working in the sandbox / playground here: https://www.chartjs.org/docs/latest/samples/bar/vertical.html

[profbaco]

I simply used the function:
php "composer` require icehouse-ventures/laravel-chartjs"
When I checked my composer.json, it installed: "icehouse-ventures/laravel-chartjs": "^4.2",
On my blade, I tried:
{!! $chart->render() !!}
and also tried:

In neither case, it didn't format the number for me. I'm not including any ChartJS CDN, just the pure lib. Could this be why?

/===================/

Eu simplesmente utilizei o recurso:
php "composer require icehouse-ventures/laravel-chartjs"
Ao verificar no meu composer.json ele instalou: "icehouse-ventures/laravel-chartjs": "^4.2",
No meu blade eu tentei:
{!! $chart->render() !!}
e também tentei:

Em nenhum dos dois casos, ele não formatou o número pra mim. Eu não estou fazendo a inclusão de nenhum CDN do ChartJS somente a lib pura. Pode ser por causa disto?

[profbaco]

I found the problem. In my blade file, I had to include the JS file for formatting:

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

At the bottom of the page for the number formatting to work, and I didn't know I had to do this. I just added it and it worked without any problems.
/===================/
Achei o problema, no meu arquivo blade eu tive que fazer a inclusão do arquivo JS para formatar:

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

No final da página para funcionar a formatação dos números, e não sabia que tinha que fazer isto. Foi só colocar que funcionou sem problemas.