Create x-axis labels using angular NVD3

Question

I would like to create strings such as "Monday, Tuesday, Wednesday" etc for my x-axis in my nvd3 line chart below. How would I make the x-axis have a string/label instead of being numeric, in the below code:

$scope.options2 = {
    chart: {
        type: 'lineChart',
        height: 250,
        margin : {
            top: 20,
            right: 20,
            bottom: 40,
            left: 35
        },
        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: {
            axisLabel: 'Time'
        },
        yAxis: {
            axisLabel: 'cd(ng/ml)',
            tickFormat: function(d){
                return d3.format('.02f')(d);
            },
            axisLabelDistance: -10
        },
        callback: function(chart){
            console.log("!!! lineChart callback !!!");
        }
    },
    title: {
        enable: true,
        text: 'Afternoon'
    },
    subtitle: {
        enable: false,
        text: '',
        css: {
            'text-align': 'center',
            'margin': '10px 13px 0px 7px'
        }
    }
};

var datax = [{
    "key" : "cope",
    "values" : [{"y" : 5,"x" : 2,},{"y" : 4,"x" : 1,}, {"y" : 4,"x" : 0,}]
}];    
$scope.data2 = datax;

I am using this library: https://github.com/krispo/angular-nvd3

Bennett Adams Bennett Adams · Accepted Answer · 2016-02-24T04:03:24

EDIT: wrote post thinking you wanted the month, so changed to weekday...

What you're looking for is the xAxis.tickFormat method. Assuming you're using moment.js in your app, you could simply do the following:

xAxis: {
  axisLabel: 'Time',
  tickFormat: function(d) {
    return moment().weekday(d).format('dddd');; // for 0, returns 'Sunday'
                                             // 'Sun' if format 'ddd'
  }
}

If you're not using moment, then you can just create a weekdays array and map the x-value to the same index in the array:

var daysOfWeek = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
...
tickFormat: function(d) {
    return daysOfWeek[d];
},...

Here's a plunker with the moment.js example implemented. Hope this helps!

Create x-axis labels using angular NVD3

1 Answers