data.onclick hander does not work in Firefox (v47) when chart SVG is transformed

[geofreyflores]

c3 version: 0.4.11

When the SVG is transformed and shifted using CSS, onclick handler does not get triggered.

I created a jsfiddle for a chart that is shifted using transform: translate(...) to reproduce the error: https://jsfiddle.net/ka632eu5/1/

To reproduce on Firefox browser (currently using ESR v45.8)

• Open console and click on any data; onclick handler is not triggered and nothing happens (error)
• remove/uncomment css for the SVG transform and rerun; now click handler works (console.log shows)

Tested to not work on Firefox (v45) but seems to work on Chrome (using v56)

From debugging, this seems to be caused by the onclick handler on c3_chart_internal_fn.generateEventRectsForMultipleXs(...) using d3.mouse(this) to get position of the click. This doesn't seem localized to the transformed SVG.

Workaround for now is to avoid doing transform on the SVG element.

This issue also seems to be related to this d3 issue: https://github.com/d3/d3/issues/90

[e-olga]

Good day, We have faced with the same issue. Whether the issue be resolved in nearest future? Regards, Olga

[OshanAbeykoon]

Hi, I'm also facing the same issue with following chart types,

• Bar
• Line

I didn't got such issue on pie and donut charts.

I have created a sample reproducing the errors. https://codesandbox.io/s/dank-rain-lyqv1

Following are some strange issues i found in the latest c3 0.7.4 version and also on 0.6.14 version,

1. The Bars are not clickable on it self, But if i move the cursor above the a bar i can see the bar highlighting, also once the bar is highlighted i can click on the bar and the on click on the bar executes.

2. The right side of the Bar of Bar 3 and Bar 5 is not clickable and it doesn't highlight the Bars, But if i move the cursor more to the left side of the Bars i can see the bar highlighting. Also bar is clickable.

3. In a multiple data columns scenario, the 3 rd data 1 bar chart gets highlighted when we mouse move on top of the bar but not on the bottom .

As per @geofreyflores avoiding the transform fixes this issue. But we should have some other way to fix this.

Will this issue be fixed?

[vikas-0]

any update on this?