How do I use/retrieve the C3 scale function post g

Question

I am using C3 to generate a chart and have found it necessary to dig into the underlying D3 constructs to supplement its functionality. I'm at an impasse and need to draw a region that is both limited by the x values and the y values but the "regions" functionality of C3 only allows one or the other. So, I need to draw on the C3-generated chart a rect at the appropriate location but using the scale functions to determine the X/Y values of the new rect. Is there any way to do this with C3 or underlying D3 library?

Answer 1

You can access the scale function from the chart.internal (chart.internal.x and chart.internal.y). You'll probably need the margins too (otherwise your positions will be offset by that much)

Here's how you draw a rectangle from point (0 index, 100) to (2 index, 400)

var rect = chart.internal.svg.append("rect")
    .attr('fill', 'rgba(255, 9, 0, 0.1)')
    .attr("x", chart.internal.x(0) + chart.internal.margin.left)
    .attr("y", chart.internal.y(400) + chart.internal.margin.top)
    .attr("width", chart.internal.x(2) - chart.internal.x(0))
    .attr("height", chart.internal.y(100) - chart.internal.y(400));

Fiddle - http://jsfiddle.net/hehpy91o/