nvd3.js line chart -- add vertical lines

Question

I need to add several vertical lines (say 10 or 20) to an nvd3 line chart.

The question here suggests adding a series for this, but I would need to add 20 series, overcrowding the legend and the interactive tooltip.

From what I understand this can't be done out-of-the-box (please correct me if I'm wrong), so my question is what is the easiest way of doing this:

Add D3 lines to the DOM (how would I go about scale, positioning them horizontally, etc?)
Add generic support for this in nvd3
Add support for hiding specific series from the legend and from the tooltip, and add 20 series
Any other idea?

[This question](http://stackoverflow.com/questions/18856060/how-do-i-add-an-average-line-to-an-nvd3-js-stacked-area-chart) may help. — Lars Kotthoff, Jun 01 '14 at 16:52
Well that would certainly be less work than the other options. Depends on whether you think you'll need this frequently though. — Lars Kotthoff, Jun 01 '14 at 16:56

score 1 · Answer 1 · answered Jun 01 '14 at 20:35

Well, it turns out that it wasn't that hard. I chose option #3, and the following code changes to nv.d3.js got the job done:

In the legend model, change

function chart(selection) {
    selection.each(function(data) {

... to

function chart(selection) {
    selection.each(function(dataUnfiltered) {
        var data = dataUnfiltered.filter(function (d) {
            return !d.disableLegend;
        });

and in the lineChart model, change:

interactiveLayer.dispatch.on('elementMousemove', function(e) {
    lines.clearHighlights();
    var singlePoint, pointIndex, pointXLocation, allData = [];
    data
    .filter(function(series, i) {
      series.seriesIndex = i;
      return !series.disabled;
    })

... to

interactiveLayer.dispatch.on('elementMousemove', function(e) {
    lines.clearHighlights();
    var singlePoint, pointIndex, pointXLocation, allData = [];
    data
    .filter(function(series, i) {
      series.seriesIndex = i;
      return !series.disabled && !series.disableTooltip;
    })

(Obviously this second change would have to be done to each chart model you want to support, say also cumulativeLineChart and `stackedAreaChart).

This will enable you to specify, in addition to color, key, values, etc. also disableTooltip: true and/or disableLegend: true.

Hope this helps someone.

nvd3.js line chart -- add vertical lines

1 Answers1