d3.js - change axis color dimple -
i have simple line chart in dimple. want change x , y axis colour 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 couldn't find thing. there dimple.axis.colors attribute, changes color of data , not axis. dimple support this?
i've tried add style attribute(like in d3):
x.style ("fill","red")
but caught error: uncaught typeerror: x.style not function
any idea?
x
not d3 selection, dimple.axis. can access inner d3 selection shapes
property (which standard dimple object). there example of here.
depending on if want change line color, text color, or everything, do
x.shapes.selectall("*").style("fill", "white")
where * "text" or "line". 1 note : individual tick marks <line>
nodes, , change color need use 'stroke', not 'fill'. also, actual axis line not <line>
element, it's <path>
element. change color :
x.shapes.select("path.dimple-custom-axis-line").style("stroke", "white");
you can manually write css rule override style chart :
g.dimple-axis > g.tick > line, g.dimple-axis path.dimple-custom-axis-line { stroke:white; }
Comments
Post a Comment