c3js / c3

:bar_chart: A D3-based reusable chart library
http://c3js.org
MIT License
9.34k stars 1.39k forks source link

Tooltip failing for multiple datasets #2154

Open msj121 opened 7 years ago

msj121 commented 7 years ago

When using the C3 on your website (/js/c3.min-3cd9714d.js) if I paste the code below into the standard multiple line chart (http://c3js.org/samples/simple_xy_multiple.html) I get the correct graph.

However, when I zoom in quite a bit, and I try to hover over each point. If I am on the exact time point it shows up, as soon as I leave even a few pixels it goes away. xSort doesn't seem to help for me.

Any ideas? Thanks.

var t1, t2, t3, t4 = 0;
var chart = c3.generate({
    data: {
        columns: [
            ['data1', 30, 200, 100, 400, 150, 250],
            ['data2', 50, 20, 10, 40, 15, 25]
        ],
        selection: { enabled: true }
    },

    subchart: {
        show: true
    },
    onrendered:function(){
        console.log("Hello")
    }
});

setTimeout(function () {
 t1 = (new Date).getTime();
 console.log("Data1: ", t1);
    chart.load({
        columns: [
            ['data1', 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450]
        ],
        done: function() { 
            t2 = (new Date).getTime();
            console.log("Data1: ", t2); 
            console.log("TIME1: ", (t2 - t1));
        } 
    });
}, 1000);

setTimeout(function () {
 t3 = (new Date).getTime();
 console.log("Data2: ", t3);
    chart.load({
        columns: [
            ['data2', 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500, 300, 400, 100, 350, 250, 450, 230, 190, 300, 500 ]
        ],
        done: function() { 
            t4 = (new Date).getTime();
            console.log("Data2: ", t4); 
            console.log("TIME2: ", (t4 - t3));
        } 
    });
}, 5000); 
msj121 commented 7 years ago

To be honest, I just checked and even the standard example.

http://c3js.org/samples/simple_xy_multiple.html Does not behave the same as http://c3js.org/samples/simple_xy.html

For the multiple example tooltip only shows up when your on the exact dot which can be frustrating. However, the not multiple example shows tooltip for point that is closest! Why do they behave differently can I fix this, is there a setting for this? (I don't think I see one).

msj121 commented 7 years ago

Not sure if it is intended behaviour but I think should be noted, that setting "x" allows the "closest to" type of tooltip functionality, whereas not setting "x" requires exact pixel hovering. I only determined this, not from the code, but from finding to conflicting examples that don't behave the same way and setup the "x" value differently. Feel free to close this; however, I think it should be noted in tooltip functionality.

There is of course a chance that I missed such a note, and if so, I apologize.

simkesd commented 6 years ago

@masayuki0812 Is this the intended behavior or a bug? I think that this comment explains the problem better then original one https://github.com/c3js/c3/issues/2154#issuecomment-326241304

DarkMikey commented 6 years ago

Is this issue "fixed" with versions above 0.5? I can't reproduce this on the example page anymore.

simkesd commented 6 years ago

@MichaelDunkel , It seems to me that even the example that used to work (http://c3js.org/samples/simple_xy.html) is now not working as we were expecting. Not sure if that is expected.

If you check this example, which uses version 0.4, you can see that you don't have to hover the exact point in order to see the tooltip. https://codepen.io/anon/pen/BxyWrO?editors=1010

@masayuki0812 sorry for bothering you again, but is this intended behaviour or smth that we should consider a bug?

DarkMikey commented 6 years ago

@simkesd sorry, what I wrote was misleading. Anyway, you got my point though?

I took a look at some Pens. Pens using versions 0.4. of C3.js all behave like I'd expect. In versions beyond 0.5. you have to hover the exact point. Also on mobile it's easier to get to hover state (=tooltip), as you don't have to catch the exact point.

Would be great to make this adjustable.

simkesd commented 6 years ago

@MichaelDunkel I'm hoping this will be introduced to 0.5 also :) In 0.4 if you had a multiple datasets on same graph you'd get the same problem. So this problem basically existed in 0.4, but it appears that it became the default behaviour for both single and multiple dataset versions in 0.5.