c3.jskeen-io

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


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();

What color do you like your sauce?


Solution

  • 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.