I am working on a project using chart.js. I want to display data in the form of a radar chart. We have 5 different data sources. To make our radar chart more readable, we have separated some of these data sources (some of which have much higher values than others), and our chart looks good.
However, the only problem is that in our legend, data is displayed with a decimal point (as we divided it).
Does anyone know how to edit the legend template in chart.js so that we can multiply the results shown for some of our datasets (so that users do not see decimal data)?
This function is in our app.js file, which creates a dataset for chart.js (pay attention to some values):
return largestStations.reduce(function(previousValue, currentValue, index, array) { previousValue.datasets[index] = { label: currentValue.commonName.replace(' Underground Station', ''), // add chart formatting (needs to be made dynamic) fillColor: "rgba(255, 0, 0, 0.2)", strokeColor: "rgba(255, 0, 0, 1)", pointColor: "rgba(255, 0, 0, 1)", pointStrokeColor: "#fff", pointHighlightFill: "#fff", pointHighlightStroke: "rgba(220,220,220,1)", // end of chart formatting data: [ app.getValueFromStation(currentValue, 'Gates') / 10, app.getValueFromStation(currentValue, 'Lifts'), app.getValueFromStation(currentValue, 'Payphones'), app.getValueFromStation(currentValue, 'Escalators') / 3, app.getValueFromStation(currentValue, 'Cash Machines') ] }; return previousValue; }
We are currently using the default legend template in chart.js, which looks like this:
<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<datasets.length; i++){%><li><span style=\"background-color:<%=datasets[i].strokeColor%>\"></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>
Is editing a legend template the best solution for this problem? If someone knows a better way to display this data (which has a big difference in the range) using chart.js, which would also be very welcome.