search

c3js / c3

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

Zoom with grid lines have areas preventing zoom #2717

Closed Venefilyn closed 4 years ago

Venefilyn commented 4 years ago

Adding grid.x.lines to a chart with zoom.enabled=true will create lines and labels on the chart that prevent zooming. It also prevents hovercard info on the dots if the label or line is in the way

Sandbox: https://codesandbox.io/s/modest-cherry-t6p6o?fontsize=14

Expected results

  1. Hover over 1px vertical grid line or label
  2. Zoom in with mouse scroll
  3. Graph zooms in

Actual results

  1. Hover over 1px vertical grid line or label
  2. Zoom in with mouse scroll
  3. Graph does not change
Venefilyn commented 4 years ago

Any updates on this?

My guess would be that the zoom is only applied to <g> elements, which means it stops when hovering over <line> or <text>.

Though I'm not sure where this happens

Venefilyn commented 4 years ago

Moving c3-event-rects above c3-chart seems to work when testing in browser. Though editing locally and doing tests seems to break when I try to do prepend instead of append

Venefilyn commented 4 years ago

There's an undocumented grid.lines.front which is defaulted to true. Turning this false made zoom to work.

Why is it undocumented? Why is it default true?