Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Problem with hovering event on timeseries bar chart (bb-event-rect not set properly?) #2913

Closed
ugoQ opened this issue Oct 24, 2022 · 2 comments
Labels

Comments

@ugoQ
Copy link

ugoQ commented Oct 24, 2022

Hi there,
I have a problem on a bar chart where the tooltip and event don't work on the edges on the chart (on a part of the first and last bar)

Here you can see if I hover on the end or the start of the chart, the tooltip is not shown until the cursor is "far" in the bar:
billboardHover1

It gets worse the more bars (columns) I have on the same chart (don't mind the blue color everywhere it's just for the example):
billboardHover2

My problem is it doesn't show the tooltip and the onclick event attached to each bar doesn't work either (I use the non grouped tooltips but it seems it won't work on grouped tooltips either, see below the steps to reproduce).

The rect.bb-event-rect seems to have the good size though.
image

If you want to reproduce easily, just go there https://naver.github.io/billboard.js/demo/#Chart.TimeseriesChart

And use this (with tooltip: {grouped: false} or not, you will see the same thing):

var chart = bb.generate({
  data: {
    x: "x",
    columns: [
	["x", "2013-01-01", "2013-01-02", "2013-01-03", "2013-01-04", "2013-01-05", "2013-01-06"],
	["data1", 30, 200, 100, 400, 150, 250],
	["data2", 130, 340, 200, 500, 250, 350],
	["data3", 400, 500, 450, 700, 600, 500],
	["data4", 400, 500, 450, 700, 600, 500]

    ],
    type: "bar", // for ESM specify as: line()
  },
  axis: {
    x: {
      type: "timeseries",
      tick: {
        format: "%Y-%m-%d"
      }
    }
  },
  bindto: "#timeseriesChart"
});

I saw the same behavior on Chrome and Firefox.
Thanks in advance for any help!

netil pushed a commit to netil/billboard.js that referenced this issue Oct 26, 2022
Fix the first and last x Axis' event receiver coodinate width
to fully occupy x Axis space

Ref naver#2913
@netil netil closed this as completed in 6526c9e Oct 26, 2022
github-actions bot pushed a commit that referenced this issue Oct 26, 2022
## [3.6.2](3.6.1...3.6.2) (2022-10-26)

### Bug Fixes

* **eventrect:** Fix eventReceiver coordinates ([6526c9e](6526c9e)), closes [#2913](#2913)
@netil
Copy link
Member

netil commented Oct 26, 2022

Hi @ugoQ, thanks for the report.
The issue was fixed and released the patch 3.6.2.

@ugoQ
Copy link
Author

ugoQ commented Oct 26, 2022

Just tried it on the 3.6.2, works like a charm.

Man I'm so thankful for this fix, that's not the first time I open an issue on this repo and every time you deliver!
Really appreciate your work, thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

2 participants