How to draw a donut with absolute percentage values using Keen.io & c3?
I am using Keen.io ("version": "3.4.1") JavaScript SDK along with their C3.js integration to generate donut graphics using the code below. However, I don't need percentages, but absolute numbers. that is, not 25%, but 7.
From reading the docs and looking at examples (see "var c3gauge") and example , I thought you could change the output by applying chartOptions. It doesn't seem to work. At the moment I feel like I'm doing something stupid, I just won't get caught.
How do I show absolute values in my donut and not percentages?
var c3donut = new Keen.Dataviz()
.library('c3')
.chartType('donut')
.el(document.getElementById(elem))
.title("Awesome Sauce")
.parseRawData(data)
.chartOptions({
donut: {
label: {
format: function (value) {
console.log("I never fire, why?");
return value;
}
}
}
})
.render();
source to share
This is possible with keen-dataviz.js . I created a working example here: https://jsfiddle.net/bx9efr4h/1/
Here's the part of the code that made it work:
var chart = new Keen.Dataviz()
.el('#chart')
.type("donut")
.chartOptions({
donut: {
label: {
format: function(value) {
return value;
}
}
}
})
.prepare();
keen-js works a little differently because c3.js is not the default dataviz library for it. This is probably not what was expected for you.
source to share