I'm trying to format my labels as percentages. I've tried looking at the documentation for Chartist.js and converting it to CoffeeScript, the problem is things aren't quite as clear to me since we're using Angular and therefore the angular-chartist module. It's a fairly trivial piece that I can't ask my co-founder to spend time on because there are many larger pieces at play in our project, but I would like to understand where I'm coming up short.
The chart is displayed using a chartist directive (which I'm guessing is a part of angular-chartist):
<chartist class="ct-chart" chartist-data="typeCounts" chartist-chart-type="Bar" chartist-responsive-options="typeCounts.barResponsiveOptions"></chartist>
This is my coffeescript for trying to get the options in (note that the labels and series properties are working fine; but the chartist element is not picking up the barResponsiveOptions property (therefore the console.log debug line is not firing):
# Organize return data into labels and series for Chartist
typeCounts = ResultService.getTypeCounts()
$scope.typeCounts.labels = Object.keys(typeCounts)
$scope.typeCounts.series = [typeCounts[type] for type in Object.keys(typeCounts)]
$scope.typeCounts.barResponsiveOptions = [
axisY:
labelInterpolationFnc: (value) ->
console.log("Firing barResponsiveOptions")
Math.round(value * 100) + '%'
]
Right now the chart displays with the data points on the y-axis as fractions of 1 (e.g. 0.0 -> 1.0).
You should use the chartist-chart-options attribute for your regular options and chartist-responsive-options if you're not using responsive options as explained here https://gionkunz.github.io/chartist-js/getting-started.html#responsive-sugar-topping.
Cheers