CODEWITHSUNDEEP
javascriptlabelchart.js
PeterYu
PeterYu

Reputation: 41

Chartjs display multiple info with different units in label

I have known that how to show multiple info. with same unit in the label by
multiTooltipTemplate: "<%=datasetLabel%> : <%= value %>%"
and the result as following:
[]InfoA:50%
[]InfoB:50%

But I'm now try to show infos with different units such as:
[]InfoA:50%
[]InfoB:50$

How can I do it?

Upvotes: 0

Views: 1328

Answers (1)

potatopeelings
potatopeelings

Reputation: 41065

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/

Upvotes: 1

Related Questions