Dotted or dashed gridlines on nvd3 plots

To style your gridlines on your nvd3 plots (or Angular-nvd3) you can use simple css styles in the line object within your plot.

For example, to make the gridlines a dotted line, we could use the following styling:

.nvd3 .tick line {
    stroke-dasharray: 1,1;
}

Or to do a dashed line with 4 pixel long dashes separated by gaps of 2 pixels, we can do this:

.nvd3 .tick line {
    stroke-dasharray: 4,2;
}

We can of course use the same methods to apply lots of other stylings to our gridlines such as opacity (looks good on dark backgrounds), different colors, etc.

Custom tooltips in Angular-nvD3

This applies to the Angular-nvD3 charting directive for Angular JS.

To create custom tooltips rather than NVD3’s built-in “interactiveGuideline” we can do something like the following to create some HTML of our own to display within the tooltip. In this case I am pulling out the timestamp and value of the point from my dataseries (d.point is the current point being hovered over) and also the series name of the current series (d.series[0].key)…

$scope.options = {
    chart: {
        useInteractiveGuideline: false,
        tooltip: {
            contentGenerator: function(d) {
                var str = '';
                //console.log(d);
                str += ('<div style="font-weight:bold; margin:auto; text-align:center;">' +d3.time.format('%Y-%m-%d %H:%M')(new Date(d.point.x)) + '</div>');
                str += ('' + d.series[0].key + ': ');
                str += ('' + d.point.y +'');
                return str;
            }
        }
    }
}

Disable line toggle when clicking on legend in NVD3

Being able to turn on/off different series on a graph by clicking on them in the legend is a pretty neat feature of NVD3 but sometimes we don’t want the user to be able to do it.

Hidden away in the documentation is the little toggle to help us do this, a property on the legend object called “updateState”.
All we need to do is set legend.updateState = false and clicking on the legend will no longer do anything.

Or in Angular-nvd3 we add it to our chart options like this:

$scope.chartOptions = {
    chart: {
        legend: {   
            updateState: false
        },
    },
    ... other properties ...
}

Plotting Historical Parking Data Using Angular and NVD3

I was looking for a good and free charting component I could use in Angular. I’ve played around with some raw D3 in the past but I didn’t want to re-invent the wheel that much. Fortunately I found the NVD3 library which works on top of D3 to simplify common charting tasks line line charts, bar charts, etc and, even better, somebody’s already created an Angular directive on top of that.
…click here to read the rest…

Angular NVD3 daily x axis tick marks / labels

This took me too long to find the answer for so here it is.
How do you get the tick marks on the x-axis of a time-series chart to be on the hour or on the day with the Angular NVD3 directive?

Well you have to explicitly set the xScale to be a d3 time scale and then you can just set the xAxis to d3.time.days or d3.time.hours and it’ll magically work…

chart: {
    xScale : d3.time.scale(),
        xAxis: {
        ticks: d3.time.days,
        axisLabel: '',
        tickFormat: function(d) {
            return d3.time.format('%Y-%m-%d')(new Date(d));
        },
        showMaxMin: false,
    },
}

angular nvd3 daily tick labels