Show tooltip API on Pie and Donut chart not working

[misaizdaleka]

Here's the example: http://jsfiddle.net/k9Dbf/269/

As you can see, the tooltip is not showing and there's an error in the console too: Uncaught TypeError: Cannot read property 'getBoundingClientRect' of null

[nichoth]

+1

[kjavia]

+1.

Here is a workaround that I put inside the data.onclick event handler.

var config = chart.internal.config;
config.tooltip_show = true;
chart.internal.showTooltip([d], element);
config.tooltip_show = false;

[aspirisen]

+1 @kjavia Could you provide whole example about how to show tooltip externally using your workaround

[kjavia]

var chart = c3.generate({
    data: {
        columns: [
            ['data1', 30, 200, 100, 400, 150, 250],
            ['data2', 50, 20, 10, 40, 15, 25]
        ],
        onclick: function(d, element) {
        chart.internal.config.tooltip_show = true;
        chart.internal.showTooltip([d], element);
        chart.internal.config.tooltip_show = false;
      }
    },
    tooltip: {
        show: false
    }
}); 

[filipcarlen]

Is there another way to solve this? I am trying to make a the corresponding sector in a pie chart to show a tooltip when hovering in another list, and it would be nice if tooltip.show from the api would work.

[kjavia]

@filipcarlen I should be possible. In your list item hover callback, you can add this code.

chart.internal.config.tooltip_show = true;
chart.internal.showTooltip([d], element);
chart.internal.config.tooltip_show = false;

The trickier part is to find "d" and element items. You may use the index of the data item from the list to find those. chart.data() gives you the list of data items, and element can be referenced from d3.select('.c3-shape-{index}'); Or something like that.

[sabari-venkatesh]

Thank you very much @kjavia You saved my precious day :100:

[irenenirgendwo]

+1