I18n with chart.js (javascript)

by

👍:2

I’m not sure the code in the question is JavaScript or something else that compiles into JavaScript.

With that caveat, you can set the formatting using the multiTooltipTemplate option that you pass in as an option. The JavaScript code would look like 

var ctx = document.getElementById("myChart").getContext("2d");
var myCurrencySymbol = 'USD'
var myNewChart = new Chart(ctx).Line(data, {
    animation: false, responsive: true,
    maintainAspectRatio: false, bezierCurve: false,
    multiTooltipTemplate: function (d) {
        return d.value + ' ' + myCurrencySymbol;
    }
});

The point being that you can pass in a function to multiTooltipTemplate (and not just interpolated strings)

I’ve hardcoded myCurrencySymbol here, but you should be getting that from your locale service / library or setting it based on the locale. Note that this is assuming that you are actually doing the conversion on the server side (because 100 USD <> 100 JPY obviously)

That said, looks like your multiTooltipTemplate is already overridden from the default. So you might want to hunt it down (Ctrl + F) and copy over what you need from the template.

The dataset name is available as d.datasetLabel (just like d.value is used currently)

Leave a comment