Line Chart : Axis - how to change color or style of Y-Axis or X-Axis
See original GitHub issueCould you please tell me how to change the color of the axes of the line chart?
I have specified the chart with settings as below… and tried lots of different things to change the color of the axes… but I can’t get it to work… `$scope.lineChartOptions = { chart: { type: “lineChart”, showLegend:false, forceY:[0,5], // make y axis start at 0 to 5 forceX:[1,4], height: 400, width: 600, margin : { top: 20, right: 20, bottom: 40, left: 55 }, x: function(d){ return d.x; }, y: function(d){ return d.y; }, useInteractiveGuideline: true, dispatch: { stateChange: function(e){ console.log(“stateChange”); }, changeState: function(e){ console.log(“changeState”); }, tooltipShow: function(e){ console.log(“tooltipShow”); }, tooltipHide: function(e){ console.log(“tooltipHide”); } }, xAxis: { ticks: 4, // make x-axis show all 4 weeks, }, yAxis: { ticks: 6, axisLabelDistance: -10 }, callback: function(chart){ //console.log(“!!! lineChart callback !!!”); } } };
`
Issue Analytics
- State:
- Created 7 years ago
- Comments:5
Top GitHub Comments
// X-Axis
.nv-y .tick.zero line { stroke: blue; }
// Y-Axis.nv-y .nv-axis g path.domain { stroke: blue; }
Directly adding
<nvd3 style="fill:#e4b447;stroke:#e4b447;" options="options" data="data"></nvd3>
overrides the axis, label and point colors. However doesn’t affect the area fill color.You can also try adding this to your main css file
.nvd3 .nv-axis path { fill: #e4b447; stroke: #e4b447; }
if you want to change only axis color.