Chartjs-Chartjs display multiple info with different units in label

by

1👍

✅

Changing Tooltip Template By Label

You can use the label property of the valuesObject to figure out the index and use that to pick your symbol, like so

Chart.mySymbols = ['!', '@', '#', '$', '%', '^', '&'];

var ctx = document.getElementById("myChart").getContext("2d");
var myChart = new Chart(ctx).Line(window.data, {
    multiTooltipTemplate: "<%=datasetLabel%> : <%= value %><%= Chart.mySymbols[window.data.labels.indexOf(label)] %>"
});

Notice that both data and mySymbols collection are properties of globally referencible objects (window and Chart in this case, but it could be any global object). This is because only the valuesObject is injected into the template function. Unless you want to change the library code, using global objects would be the way to do it (however, do note that its not good design).

Fiddle – http://jsfiddle.net/z1nfqhfn/

Changing Tooltip Template By DataSet

If you want to do a similar thing by dataset, it would be

Chart.mySymbols = ['°C', '%'];

var ctx = document.getElementById("myChart").getContext("2d");
var myChart = new Chart(ctx).Line(window.data, {
    multiTooltipTemplate: "<%=datasetLabel%> : <%= value %><%= Chart.mySymbols[window.data.datasets.map(function(e) { return e.label }).indexOf(datasetLabel)] %>"
});

Fiddle – http://jsfiddle.net/fnu0dyd2/

Leave a comment