0

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:

James
  • 1,292
  • 1
  • 14
  • 29
  • Looks like this is a bug in keen-js... I filed an issue: https://github.com/keen/keen-js/issues/332 – jwegner Aug 31 '15 at 16:28

1 Answers1

0

You need to use chartOptions like so

...
chartType: 'donut',
chartOptions: {
    donut: {
        label: {
            format: function (value) {
                return value;
            }
        }
    }
}
...
potatopeelings
  • 40,709
  • 7
  • 95
  • 119
  • Thanks for your answer. I tried that code but it didn't work. To check the label object was being used, I added `show: false` which did turn off the label so it's weird. Checking the response the container page receives from Keen it looks like this: `{"result": [{"device.navigator.platform": "iPhone", "result": 2}]}` so there definitely seems to be a value being returned rather than a ratio. Hmm... – James Aug 27 '15 at 08:48