C3: Bar chart tooltip is visible only when bar hovered

[ilearnjs]

Hi all.

A have a problem with bar chart tooltips.

For the old versions of c3(0.4.21), d3(3.5.17) tooltip is visible if cursor is above or below bar rectangle

https://jsfiddle.net/r59fmaa0/

For the new versions c3(0.5.3), d3(4.12.0) tooltip is not visible in the same case

https://jsfiddle.net/wx7xr9u3/

C3 version: 0.5.3
D3 version: 4.12.0
Browser: Google Chrome Version 65.0.3325.181 (Official Build) (64-bit)
OS: Windows 10

Thanks for support

[Sazarov]

Has anyone found a workaround for this? I've been using c3 0.4 for a while but I'll have to upgrade at some point. Didn't find anything on whether this is an intentional change or not either. It seems to be unintentional because this is definitely worsening the user experience.

[fuwaneko]

Any news on this? It blocks us from upgrading to newer version of D3 and C3.

[MarkusLaut]

We also need this.

[Jupiterrr]

I ran into #2391 which @panthony markted as a duplicate of this issue. Its seems to me that these two issues are both related to findClosest()
https://github.com/c3js/c3/blob/9556e38b41402c661c8e6d5c608d755ac2da84d5/src/data.js#L328-L355
which is called by https://github.com/c3js/c3/blob/9556e38b41402c661c8e6d5c608d755ac2da84d5/src/interaction.js#L64
So findClosest() is supposed to return the closes points or bars to the cursor. For bar charts only the actual hovered bar is returned and for line charts the closes point in a radius of 10 pixels is returned. Which in both cases might not be the desired behaviour.

1. line charts
   I think a better behaviour is to ignore the y-axis and only uns the x distance of points and cursor. Also consider ignoring $$.config.point_sensitivity for this usecase, so findClosest() always returns the closest point on the x-axis and not only the closest within a minimum distance.

2. bar charts
   To achive what @ilearnjs described it might be nessesary to drop the // find mouseovering bar part and values.filter(function (v) { return v && !$$.isBarType(v.id); }).

[Jupiterrr]

Were these UX changes intended? I just wasn't able to find a changelog entry for them.

[Federico-G]

@Jupiterrr The change was made in the release v0.5.0

I think the problem happened when merging both cases of isMultipleX in c3_chart_internal_fn.redrawEventRect

Also I think this isn't the only bug added in v0.5.0, so I'm going to use the release v0.4.24 with d3 v3 meanwhile

[Weilin37]

I also need this. Been waiting for a fix for over a year.

At the moment I am just changing the point sensitivity. While it does show the tooltip at a larger range from the data point, it does not trigger "onmouseover" event on the data.

[MarkusLaut]

We ended up using a different library because this is a hard requirement.

On Sun, 23 Dec 2018, 21:18 Weilin Meng <[email protected] wrote:

I also need this. Been waiting for a fix for over a year.

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/c3js/c3/issues/2362#issuecomment-449661018, or mute
the thread
https://github.com/notifications/unsubscribe-auth/Am5tFxwjY-CZCehHOS2qN-EXd4VQK5Rgks5u7-T8gaJpZM4TxC8s
.

[jimivdw]

Is there any update on this? I ended up going with @Weilin37 's suggestion of increasing the point sensitivity (in fact, we now set it to Infinity), but that really doesn't feel right.

[sebzap]

@jimivdw, @Weilin37
c3 is not maintained anymore use the fork https://github.com/naver/billboard.js instead, it should work there