Position an inset legend at the top-center

Question

According to the C3 documentation, legend.inset.postition only supports top-left, top-right, bottom-left and bottom-right positions. I would like to have my legend positioned at the top-center.

Here is the JS that creates the plot:

var chart = c3.generate({
    data: {
        columns: [
            ['data1', 100, 200, 50, 300, 200, 50, 250, 100, 200, 400, 50],
            ['data2', 400, 500, 250, null, 300, 50, 200, 450, 300, 300, 100]
        ],
    },
    legend: {
        position: 'inset',
        inset: {
            anchor: 'top-left', // how do I implement 'top-center'?
            x: 40,
            y: 2,
            step: 1
        }
    }
});

I have attempted to re-position the element after the chart has been rendered via figuring out its current position. However, none of the SVG elements appear to have attributes that enable this kind of introspection:

var legend = d3.select(".c3-legend-background");
console.log("style[width]: " + legend.style("width")); // style[width]: auto
console.log("attr[x]: " + legend.attr("x")); // attr[x]: null
console.log("attr[y]: " + legend.attr("y")); // attr[y]: null

Answer 1

Wouldn't you just set the x value of the inset object to the correct value to get it to center across the top?

This would depend on your wide your chart if and how wide your legend is. So the calculation would be (ChartWidth - LegendWidth) / 2.

The legend object is then something like:

legend: {
    position:'inset',
    inset: {
        anchor: 'top-left',
        x: 200 // put the result of your calculation here
    }
}

Here's a rough example: http://jsfiddle.net/jrdsxvys/11/