How do I draw donut with absolute values intead of percents with Keen.io & c3?

Question

I'm using Keen.io ("version": "3.4.1") JavaScript SDK, along with their integration with C3.js, to produce a donut graph by using the code below. However, I don't want percentages, but rather absolute numbers. i.e. Not 25%, but 7.

From reading the docs and looking at examples (see "var c3gauge") and example, I thought you could modify the output by applying the chartOptions. That doesn't seem to be working. At this point, I feel like I'm doing something stupid I'm just not catching.

How do I display absolute values in my donut, 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();

score 2 · Accepted Answer · answered Jul 20 '17 at 18:13

This is possible with keen-dataviz.js library. I've created a working example here: https://jsfiddle.net/bx9efr4h/1/

Here's 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 likely why it isn't working like expected for you.

How do I draw donut with absolute values intead of percents with Keen.io & c3?

1 Answers1