not seeing mouseover events for area-spline chart

[msridhar]

I'm just getting started with c3 and trying to add a mouseover event listener for an area-spline chart. Here's my rough code:

        var chart = c3.generate({
            data: {
                columns: [
                    ['data1',1,2,3],
                    ['data2',2,3,4]
                ],
                types: {
                    data1: 'area-spline',
                    data2: 'area-spline'
                },
                onclick: function (d: any, i) { console.log("onclick", d, i); },
                onmouseover: function (d, i) { console.log("onmouseover", d, i); },
                onmouseout: function (d, i) { console.log("onmouseout", d, i); }
            },
            point: {show: false}
        });

When I run the above code and move the mouse around on the plot, I don't see anything printing in the console. Looking at src/interaction.js, I see this code around line 137:

$$.main.selectAll('.' + CLASS.shape + '-' + index).each(function (d) {
config.data_onmouseover.call($$, d);
});

If I change CLASS.shape to CLASS.eventRect, I start seeing console output for mouseover. I don't know this code at all, so I don't know if this is a bug or if I'm just using the API wrong. Maybe this code needs to be conditioned on the type of plot?

[poojareddym]

Hi,

I've faced a similar issue before. "point: {show: false}" caused the issue for me. When I removed that line, it worked all fine.

[masayuki0812]

Thank you for reporting. I think this has been fixed now. Could you try the latest code again? Thanks.

[msridhar]

I just tested, and it looks like this bug is fixed; thanks! The onclick behavior isn't exactly what I would expect, but I'll file a separate issue on that one.

[sineed]

@masayuki0812 this fix causes a performance reduce when rendering a chart with many lines.
I catched this on the chart with 50 different lines. Before this commit rendering took about 12 second, now it is about 710 seconds. It is too much.

I try to understand what is the reason.

[masayuki0812]

@sineed Thank you for considering this. I think the reason is the number of circles, which are generated for each data point and required to handle mouse events.
I modified to append circles even if point.show = false because they are needed for event handling as I wrote, but it leads to performance down as you pointed out.

Now I don't have any good idea to solve this, but this would be a workaround if you don't need mouse events:

c3.chart.internal.fn.redrawCircle = function () {};
c3.chart.internal.fn.addTransitionForCircle = function () {};

This changes not to append circles and disable its transition.

[sineed]

@masayuki0812 thanks for quick response and your WA.

For me it's OK to use this solution, but it's not good when I need event handling of circles in group of charts, and for the rest I don't need events at all.

Maybe it will be another override of mentioned functions...

[masayuki0812]

@sineed As you said, it's not easy to enable a part of event handling while removing circles. I think we need to change how to handle the events in the future (e.g. use only one event rect and handle events only from it).