Modify Keen.io donut chart using c3.js (Javascript SDK)

Question

I'm trying to format donut charts using c3.js using the Keen javascript SDK. My example is pretty simple:

var query1 = new Keen.Query("count_unique", {
            eventCollection: "notification",
            filters: filters,
            groupBy: ["platform"],
            targetProperty: "event",
            timeframe: "this_7_days",
            timezone: "Europe/London"
        });

        client.draw(query1, document.getElementById("chart_1"), {
            library: 'c3',
            chartType: 'donut',
            title: 'Notification by platform',
            label: {
                format: function (value, ratio, id) {
                    return d3.format('$')(value);
                }
            }
        });

This works fine and I get the donut looking OK (a donut split by platform). However, I want the actual values to be shown in the label rather than % of the total. The above snippet is supposed to achieve that (thanks to some SO copy-pasta) but it doesn't.

I've tried a lot of combinations but just can't change the labels at all. If anyone has any ideas, that would be great - thanks.

References:

• http://c3js.org/reference.html#donut-label-format
• https://github.com/keen/keen-js/blob/master/docs/visualization.md

Answer 1

You need to use chartOptions like so

...
chartType: 'donut',
chartOptions: {
    donut: {
        label: {
            format: function (value) {
                return value;
            }
        }
    }
}
...