d3.js - Modifiying dimple layout grouped chart -

i using same chart below. want push x-axis headers i.e. regular, premium, budget little bit below i.e. top padding or margin. give styling give background color , change text color. tried using fill , not work desired. hide price tier/channel also

http://dimplejs.org/examples_viewer.html?id=bars_vertical_grouped

these svg text elements there no top-padding or margin. can move them down bit increasing y property though, running following after call chart.draw method move labels down 5 pixels:

d3.selectall(".dimple-axis-x .dimple-custom-axis-label")   .attr("y", function (d) {        // y property of current shape , add 5 pixels       return parsefloat(d3.select(this).attr("y")) + 5;     }); 

to change text colour need use fill property (again that's svg text thing):

d3.selectall(".dimple-axis-x .dimple-custom-axis-label")   .style("fill", "red"); 

to colour background of text little less trivial, there isn't thing in svg, can insert rectangle behind text , it:

d3.selectall(".dimple-axis-x .dimple-custom-axis-label")   // iterate each shape matching selector above (all x axis labels)   .each(function () {       // select shape in current iteration       var shape = d3.select(this);       // bounds of text (accounting font-size, alignment etc)       var bounds = shape.node().getbbox();       // parent group (this target rectangle make sure transformations etc applied)       var parent = d3.select(this.parentnode);       // number of pixels add around each edge bounding box tight fitting.       var padding = 2;        // insert rectangle before text element in dom (svg z-position entirely determined dom position)       parent.insert("rect", ".dimple-custom-axis-label")          // set bounds using bounding box +- padding          .attr("x", bounds.x - padding)          .attr("y", bounds.y - padding)          .attr("width", bounds.width + 2 * padding)          .attr("height", bounds.height + 2 * padding)          // whatever styling want - or set class , use css.          .style("fill", "pink");       }); 

these 3 statements can chained final code bit this:

d3.selectall(".dimple-axis-x .dimple-custom-axis-label")    .attr("y", function (d) { return parsefloat(d3.select(this).attr("y")) + 5; })    .style("fill", "red")    .each(function () {       var shape = d3.select(this);       var bounds = shape.node().getbbox();       var parent = d3.select(this.parentnode);       var padding = 2;        parent.insert("rect", ".dimple-custom-axis-label")          .attr("x", bounds.x - padding)          .attr("y", bounds.y - padding)          .attr("width", bounds.width + 2 * padding)          .attr("height", bounds.height + 2 * padding)          .style("fill", "pink");       }); 

fyi dimple-custom-axis-label class added in recent release of dimple please make sure using latest version. otherwise you'll have find alternative selector