change axis color dimple

Question

I have a very simple line chart in dimple. I want to change the x and y axis colour to white.

var svg = dimple.newSvg(".line_chart_container", 400, 300),dataset;
var chart = new dimple.chart(svg, dataset);
var x = chart.addCategoryAxis("x", "Attempts");
//x.style ("fill","red")
var y = chart.addMeasureAxis("y", "Value");
y.showGridlines = true;
x.showGridlines = true;
var s = chart.addSeries(["Metric", "Value"], dimple.plot.bubble);
var lines = chart.addSeries("Metric", dimple.plot.line); 
lines.lineWeight = 2;
lines.lineMarkers = true;
chart.assignColor("Metric", "#30D630");
chart.draw();
s.shapes.style("opacity", function (d) {
return (d.yValue === 0 ? 0 : 0.8);
});

I've checked dimple.axis documentation in GitHub but couldn't find any thing. There is a dimple.axis.colors attribute, but it changes the color of the data and not the axis. Does dimple even support this?

I've also tried to add style attribute(like in D3):

x.style ("fill","red")

but caught an error: Uncaught TypeError: x.style is not a function

Any idea?

Answer 1

x is not a d3 selection, it is a dimple.axis. You can access the inner d3 selection with the shapes property (which is standard for any dimple object). There is an example of that here.

Depending on if you want to change the line color, text color, or everything, you would do

x.shapes.selectAll("*").style("fill", "white")

where * could also be "text" or "line". One note : the individual tick marks are <line> nodes, and to change their color you need to use 'stroke', not 'fill'. Also, the actual axis line itself is not a <line> element, it's a <path> element. So to change that color would be :

x.shapes.select("path.dimple-custom-axis-line").style("stroke", "white");

You can also just manually write a css rule to override the style for a chart :

g.dimple-axis > g.tick > line, g.dimple-axis path.dimple-custom-axis-line {
  stroke:white;
}