Morris.js with format number in brazilian currency

user_4687672 0
Viewed 434

I'm trying to use Morris to create a graph, and it's almost everything working. My issue is that I have to use the brazilian format with number. Should be "1.234,00" instead "1,234.00". Someone knows how to change? I tried a lot of times but I couldn't find a way... I tried to use the function format_number with PHP, but when I change to the brazilian format the graph don't open. Link of library: http://morrisjs.github.io/

<script>
Morris.Bar({
    element: 'mr-Volumetria',
    data: [
        {x: '12/2019', y: 60.72},
        {x: '9/2020', y: 249.46},
        {x: '10/2020', y: 275.54},
        {x: '11/2020', y: 3501.50},
        {x: '12/2020', y: 3739.24}
    ],
    xkey: 'x',
    ykeys: ['y'],
    labels: ['Valor do mês'],
    barColors: function (row, series, type) {
        if(type === 'bar'){
            var red = Math.ceil(255 * row.y / this.ymax);
            return 'rgb('+red+',0,0)';
        }else{
            return '#000000';
        }
    }
});
</script>

Morris

morris.js numbers format php jquery
1 Answers

Strictly to answer your question: You can use the yLabelFormat config option to format the Y values to your liking.

Complete example below on how to format numbers for "pt-BR" (brazilian format) with vanilla JavaScript. Depending on the targeted browsers, you may need to polyfill Intl.NumberFormat. More details here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat

<link href="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>

<div id="mr-Volumetria" style="height: 250px;"></div>

<script>
Morris.Bar({
    element: 'mr-Volumetria',
    data: [
        {x: '12/2019', y: 60.72},
        {x: '9/2020', y: 249.46},
        {x: '10/2020', y: 275.54},
        {x: '11/2020', y: 3501.50},
        {x: '12/2020', y: 3739.24}
    ],
    xkey: 'x',
    ykeys: ['y'],
    labels: ['Valor do mês'],
    barColors: function (row, series, type) {
        if(type === 'bar'){
            var red = Math.ceil(255 * row.y / this.ymax);
            return 'rgb('+red+',0,0)';
        }else{
            return '#000000';
        }
    },
    yLabelFormat: function(y) {return new Intl.NumberFormat("pt-BR").format(y);}
});
</script>

user_32199190
Related