Change the background-color of my series area with dimple

Question

How could I change the colour of the serie area? I have tried to add to my css file this

rule: .gridlines{background-color:#345;}

but it doesn't work.

This is my code:

var svg = dimple.newSvg("#meteo_pop_up_grafica_imagen", 500, 450);
data2.forEach(function (d) {

                    d["Hour"] = d["time"].substring(11,20)+d["time"].substring(8,10)+d["time"].substring(3,7)+d["time"].substring(23,28);
                    d["Day"] = d["time"].substring(8,10)+d["time"].substring(3,7)+d["time"].substring(23,28);
                    //d["Time of Day"] = d["time"].substring(d["time"].length - 7);
                }, this);
 var myChart = new dimple.chart(svg, data2);
 var x1 = myChart.addTimeAxis("x","Hour","%H:%M:%S %d %b %Y","%H:%M");
 var x2 = myChart.addTimeAxis("x","Day","%d %b %Y", "%d-%b-%Y");
  x1.addOrderRule("time");

x1.timePeriod = d3.time.hours;
x1.timeInterval = 4;
x2.timePeriod = d3.time.days;
x2.timeInterval = 1;
var y1 = myChart.addMeasureAxis("y", "Piranometro");
var piranometro = myChart.addSeries("Piranom.", dimple.plot.line,[x1,y1]);
myChart.assignColor("Piranom.","blue");
 myChart.draw();


                x1.shapes.selectAll("text").attr("transform",
                        function (d) {
                          return d3.select(this).attr("transform") + " rotate(-90)";
                        });

You can find the code here:

http://jsfiddle.net/zFzV8/45/

Answer 1

You can colour just the plot area by adding an svg rectangle behind the chart. Here I create one with the same bounds as the chart. To use css just set a class instead of the fill:

I have put the height and width of the svg into variables and used the code:

svg.append("rect")
    .attr("x", width * 0.1)
    .attr("y", height * 0.1)
    .attr("width", width * 0.8)
    .attr("height", height * 0.8)
    .style("fill", "#456");  

http://jsfiddle.net/2Gj3G/

Dimple defaults to a 10% margin, so I have used that here but it would be neater to use the setBounds method of the chart and ensure they match.

Answer 2

You have to give class for .tick not .gridlines

Working Demo

CSS

.tick {
    fill: rgba(250, 250, 255, 0.6);
}

Also, I couldn't find .plot in the HTML