angular-nvd3 line-chart change color of axis

Question

Can anyone tell me how to specify a color or css class for the y axis of an angular-nvd3 lineChart ?

I've been specifying the options:

<nvd3 options="lineChartOptions" data="graphData" ></nvd3>

and then have all the options in an object:

$scope.lineChartOptions = {
                    chart: {
                        type: 'lineChart',
                        showLegend:false,
                        forceY:[0,5], // make y axis start at 0 to 5
                        forceX:[1,4],
                        // interpolate:"monotone",
                        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,
                        tooltip: {
                          contentGenerator: function(d) { return '<h3>HELLO WORLD</h3>'; }
                        },
                        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: {
                            // axisLabel: 'Week',
                            ticks: 4, // make  x-axis show all 4 weeks,

                            // tickFormat: function(d){
                            //  return "week " + d;
                            // }
                        },
                        showYAxis: true,
                        yAxis: {
                            // axisLabel: 'Score',
                            // tickFormat: function(d){
                            //     return d3.format('.02f')(d);
                            // },
                            ticks: 6,
                            axisLabelDistance: -10
                        },
                        callback: function(chart){
                            //console.log("!!! lineChart callback !!!");
                        }
                    },
                    // title: {
                    //     enable: true,
                    //     text: 'Title for Line Chart'
                    // },
                    // subtitle: {
                    //     enable: true,
                    //     text: 'Subtitle for simple line chart... ',
                    //     css: {
                    //         'text-align': 'center',
                    //         'margin': '10px 13px 0px 7px'
                    //     }
                    // },
                    // caption: {
                    //     enable: true,
                    //     html: '<b>AND</b>  we can put any sort of html here too...',
                    //     css: {
                    //         'text-align': 'justify',
                    //         'margin': '10px 13px 0px 7px'
                    //     }
                    // }
                };

But cannot figure out for the life of me how to specify a color for the axes or how to specify a css class for the tick texts...

Any help would be greatly appreciated...

Answer 1

For the y axis you can do it by css, as follows:

.nvd3 .nv-axis path { fill: #E5E5E5; stroke: #E5E5E5; }