c3js : Custom region tooltips, hover effects, etc

Question

I've been creating a metrics module (using timeseries) with c3js. I'm now trying to plot out events over my metrics data, which are date-spans (startDate to endDate). Using c3js' regions seemed to be a good choice for it, it only took a little tinkering to make them short and appear above of all my graphed data.

Problem is, the actual SVG Group called g.c3-regions is automatically displayed behind the graphed data. Makes sense, there hasn't been any real need allow any user interaction with regions. I need it in the forefront, so I can bind hover and click functions to each event.

I tried doing this with jQuery: $('.c3-regions').insertAfter('.c3-chart'), which simply places it in front. Works fine - that is, until my c3js instance re-renders. Then it spits out an error that it's having trouble re-rendering the regions (since they obviously moved)

I've also tried cloning it and putting that in front, but it doesn't seem to copy over the SVG information.

Any help would be truly appreciated, can provide any code samples on request.

Cheers - - Andrew

Answer 1

To expand on Robert Longson's comment, what you want to add is

.c3-event-rect {
    pointer-events: none;
}

.c3-chart {
    pointer-events: none;
}

This will allow the clicks to go through to the region layer.