Is there a way to edit tooltip contents (specifically in a line chart)?

[adischik]

I would like to add to the tooltip additional data that is not shown in the chart. (not the y value of specific x's)

[masayuki0812]

Please use tooltip.content option to customize the tooltip. https://github.com/masayuki0812/c3/blob/master/c3.js#L303

Basically, the default of tooltip.content can be used and please modify as you want.

[jwelch95]

It took me some time to figure it out. the function you want to be editing in is contents: function(d, defaultTitleFormat, defaultValueFormat, color) the variable d[0] holds all of the data about your point and makes it much easier to access the other information about your data.

[andyopayne]

I'd like to exclude some data from my tooltip. I have the following:

data:{ columns: [["d1",1,2,3,4] , ["t1",5,6,7,8]] }

And I want to exclude the data "t1" from my tooltip. I'm trying to use tooltip.content, but it doesn't seem to be working.

content: { contents: function(d, defaultTitleFormat, defaultValueFormat, color) { if (d[0].name == "d1") return d[0]; }}

Do you have any suggestions?

[masayuki0812]

Hi, d is an array that includes data that has same x basically. Now you can use this.internal.data.targets on v0.3 in the function tooltip.contents, so you can access all of the data.

Please see this fiddle: http://jsfiddle.net/7kYJu/186/ Thanks.

[kriticism]

It seems that using 'data.order : null' has caused the shown stacking bottom-to-top in the stacked chart, top-to-bottom in tool-tip, and left-to-right in the legend. I want to change the order of contents displayed in the tool-tip. Like VNe on top, then Ne, then N and so on. Or any other customization (which, say, is stored in an array). How do i do that?

<also asked at:https://github.com/masayuki0812/c3/issues/1050>

[aendra-rininsland]

@kriticism Not entirely sure, I don't think arbitrarily ordering tooltip contents is supported at the moment. Might be worth asking the Google Group?

[abhirocks550]

I would like to add tooltip with key value pair using line chart. What i would like to acheive is something like below link http://bl.ocks.org/mccannf/1629644

please click redraw if it doesn't show tooltip at page load.

how can we do that in c3 js?

[michaelrodov]

Hi there! We try to keep the issue queue clear for specific code-related problems with C3, Could you please try asking your question on either the Google Group or Gitter instead?

Thank you

[Muzietto]

The function to override is currently at line 1278 and no more at #L303, as indicated by @masayuki0812 at the top of this thread.

[gantona]

i just make a trick wich allows avoid sort the tooltips to be shown as they are in the data array. In the function c3_chart_internal_fn.getTooltipContent, about 7 lines below, there is a line where it checks if config.data_groups.length === 0.

Well, i just added a config property called tooltip_sorted initialized to true, about the line 1274 between tooltip_grouped property and tooltip_format_title. Then back to getTooltipContent, just before the check for config.data_groups.length added if config.tooltip_sorted === true, else do nothing.

Then the two parts are now like: new var

            // tooltip - show when mouseover on each data
            tooltip_show: true,
            tooltip_grouped: true,
            tooltip_sorted: false,
            tooltip_format_title: undefined,

the check for the new var

**if (config.tooltip_sorted === true) {** 
            if (config.data_groups.length === 0) {
                d.sort(function(a, b){
                    var v1 = a ? a.value : null, v2 = b ? b.value : null;
                    return orderAsc ? v1 - v2 : v2 - v1;
                });
            } else {
                var ids = $$.orderTargets($$.data.targets).map(function (i) {
                    return i.id;
                });
                d.sort(function(a, b) {
                    var v1 = a ? a.value : null, v2 = b ? b.value : null;
                    if (v1 > 0 && v2 > 0) {
                        v1 = a ? ids.indexOf(a.id) : null;
                        v2 = b ? ids.indexOf(b.id) : null;
                    }
                    return orderAsc ? v1 - v2 : v2 - v1;
                });
            }
        **}**
        for (i = 0; i < d.length; i++) {

Now i can specify in the model if i want a tooltip sorted or not by:

        , tooltip: {
            sorted: false
        }

[charul17]

tooltip: { order: null, format: { title: function (d) { return }, value: function (value, ratio, id) { var format = id === 'data1' ? d3.format('.2f') : d3.format('.2f'); //console.log(id); return format(value) + '%'; }

                        }
                    }