Setting background-color for Forio Contour charts - d3.js

Question

I'm using the Forio Contour charting library - I can't figure out a way to set the background color for my charts (see jsfiddle). It always inherits the bg of the container div which is not what I want.
http://jsfiddle.net/Y4EVP/1/
$(function () {
var data = [22, 8, 5, 19, 11, 4, 5, 13, 20, 29, 25];
new Contour({
el: '.chart',
})
.cartesian()
.line(data)
.render();
});
Couldn't find any related properties on http://forio.com/contour/documentation.html - am I missing something?

Answer 1

You can do it in two ways:
You could set the background-color to the svg using css, which will set the background for the whole chart (including the axis and labels) if that's what you want
if you want to add a background color just to the plot area (ie, the axis and labels remain with the container's background), you could create an extension that is just a rect with the size of the plot area and then add that new extension to your chart in the correct order, something like:
Contour.export('background', function (color, layer, options) {
layer.enter().append('rect')
.attr('class', 'custom-background')
.attr('x', options.chart.plotLeft)
.attr('y', options.chart.plotTop)
.attr('width', options.chart.plotWidth)
.attr('height', options.chart.plotHeight)
});
now you have control of the background color with css:
.custom-background {
fill: #f00;
opacity: 0.5;
}
Hope this helps