Pass parameter to c3js tooltop after .generate() and before .load()

Question

I'm trying to graph out metrics that don't have any relation to one another, so instead of plotting out the actual values, I've calculated an alternate set of values that are scaled between 0-1 like a percentage.

For example: [1, 2, 5] => [0.2, 0.4, 1]

So now I have 2 sets of data - the original and scaled versions. I have the scaled version plotting on to my graph just fine, but I want the tooltip to show the original value to the user. See what I mean?

I checked out http://c3js.org/samples/tooltip_format.html, which shows you can set tooltip as a function when you initially generate the C3 object. But I want to change the tooltip later on after I recalculate my original/scaled values and re-load() the graph.

All attempts I've made to explicitly change myGraph.tooltip.format.value = function (...) {...} after initially setting myGraph = C3.generate({...}) have been unsuccessful.

Any ideas how I can accomplish this without having to regenerate the graph from scratch every time?

Answer 1

You need to override internal.getTooltipContent

var data = ['data1', 30000, 20000, 10000, 40000, 15000, 250000];

// simple fake data
var fakeData = data.map(function (d, i) {
    return i ? (d / 100) : d;
})

var chart = c3.generate({
    data: {
        columns: [
            fakeData,
            ['data2', 100, 200, 100, 40, 150, 250]
        ],
    }
});


// do code to take over mars and plant potatoes


// save the original
var originalGetTooltipContent = chart.internal.getTooltipContent;
chart.internal.getTooltipContent = function (data, defaultTitleFormat, defaultValueFormat, color) {
    // we modified the first series, so let's change that alone back
    var originalValue = {
        id: data[0].id,
        index: data[0].index,
        name: data[0].name,
        // unfaked
        value: data[0].value * 100,
        x: data[0].x
    };

    var originalValues = data.map(function (d, i) {
        return i ? d : originalValue;
    })

    return originalGetTooltipContent.call(this, originalValues, defaultTitleFormat, defaultValueFormat, color)
}

I assume you are already doing something about the scaled y axis label?

---

Fiddle - http://jsfiddle.net/puf248en/