Doubt how to format value using Chart JS chart

Question

Guys I’m using a plugin for Jquery called Chart JS.

Good and very simple to work with the plugin, the problem is that I report values in the American standard (33.33) and I need the graph to display them in the PT-BR standard (R$33.33)

Someone knows how to do it?

Follow the simple chart model:

var options = {
        scaleFontFamily: "'Verdana'",
        scaleFontSize: 13,
        animation: false,
        scaleFontColor: "#484848",
        responsive: true
    };

    var data = {
        labels: ["Janeiro", "Fevereiro", "Março", "Abril", "Maio", "Junho", "Julho", "Agosto", "Setembro", "Outubro", "Novembro", "Dezembro"],
        datasets: [
            {
                label: "2016",
                fillColor: "rgba(0,145,255,0.2)",
                strokeColor: "rgba(0,145,255,1)",
                pointColor: "rgba(0,145,255,1)",
                pointStrokeColor: "#fff",
                pointHighlightFill: "#fff",
                pointHighlightStroke: "rgba(0,145,255,1)",
                data: [199.99, 2888.99, 123.12, 3457.12, 124, 16885.33, 3578.34, 57853.34, 4678.12, 8754, 24657.55, 2345.33]
            }

        ]
    };

    window.onload = function () {
        var ctx = document.getElementById("lineChart").getContext("2d");
        new Chart(ctx).Line(data, options);
        legend(document.getElementById("lineLegend"), data);
    };

    function legend(parent, data) {
        legend(parent, data, null);
    }

    function legend(parent, data, chart, legendTemplate) {

        legendTemplate = typeof legendTemplate !== 'undefined' ? legendTemplate : "<%= label %>";
        parent.className = 'legend';
        var datas = data.hasOwnProperty('datasets') ? data.datasets : data;

        while (parent.hasChildNodes()) {
            parent.removeChild(parent.lastChild);
        }

        var show = chart ? showTooltip : noop;
        datas.forEach(function (d, i) {

            // Span to div: legend appears to all element (color-sample and text-node)
            var title = document.createElement('div');
            title.className = 'title';
            parent.appendChild(title);

            var colorSample = document.createElement('div');
            colorSample.className = 'color-sample';
            colorSample.style.backgroundColor = d.hasOwnProperty('strokeColor') ? d.strokeColor : d.color;
            colorSample.style.borderColor = d.hasOwnProperty('fillColor') ? d.fillColor : d.color;
            title.appendChild(colorSample);
            legendNode = legendTemplate.replace("<%= value %>", d.value);
            legendNode = legendNode.replace("<%= label %>", d.label);
            var text = document.createTextNode(legendNode);
            text.className = 'text-node';
            title.appendChild(text);

            show(chart, title, i);
        });
    }

// Add events to legend that show tool tips on chart
    var Chart;
    function showTooltip(chart, elem, indexChartSegment) {
        var helpers = Chart.helpers;

        var segments = chart.segments;
        // Only chart with segments
        if (typeof segments !== 'undefined') {
            helpers.addEvent(elem, 'mouseover', function () {
                var segment = segments[indexChartSegment];
                segment.save();
                segment.fillColor = segment.highlightColor;
                chart.showTooltip([segment]);
                segment.restore();
            });

            helpers.addEvent(elem, 'mouseout', function () {
                chart.draw();
            });
        }
    }

    function noop() {
    }

  body {
                margin: 0;
                color:#484848;

                font-family: Verdana; 
                font-size: 13px;
            }


            .box-grafico1 {
                margin: 0px auto;
                width: 90%;
            }
            .box-grafico2 {
                width: 690px;
            }
            #fork {
                position: absolute;
                top: 0;
                right: 0;
                border: 0;
            }
            .legend {
                margin-top: 15px;
                width: 90%;
            }
            .legend .title {
                float: left;
                display: block;
                margin-bottom: 0.5em;
                line-height: 1.2em;
                padding: 0 0.3em;
            }
            .legend .color-sample {
                display: block;
                float: left;
                width: 1em;
                height: 1em;
                border: 2px solid;
                border-radius: 100px;
                margin-right: 0.5em;
            }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script type="text/javascript" src="http://www.alvoradatratores.com.br/Chart.min.js"></script>

    
<div class="box-grafico1">
            <canvas id="lineChart"></canvas>
            <div id="lineLegend"></div>
        </div>

Answer 1

This is possible through the chart options (existing but unclear in the documentation), using tooltipTemplate and scaleLabel to change the text inside the graph and the Y axis respectively.

In practice it could be done so:

var formatedString = '<%= "R$ " + value.toString().split(".").join(",") %>';

var options = {
    scaleFontFamily: "'Verdana'",
    scaleFontSize: 13,
    animation: false,
    scaleFontColor: "#484848",
    responsive: true,
    tooltipTemplate: formatedString,
    scaleLabel: formatedString
};

jsFiddle: http://jsfiddle.net/s8wzfku4/

If you want you can also use a function to format the string. The function takes an object as the first argument and the value is in the property .value. For example like: http://jsfiddle.net/8xkk4gps/2/

Answer 2

When working with more than one dataset, should use the option multiTooltipTemplate instead of tooltipTemplate.

Ex.

multiTooltipTemplate: function(data) {
    return formatar(data.value);
  }

I’ve updated your example this way and it’s working.

http://jsfiddle.net/8xkk4gps/9/