NVD3 line chart with vertical line

Question

I am trying to create a line chart in NVD3 with a vertical line. In particular, this kind of line chart.

The line chart has two panels: the view panel and the zoom panel, I would like the line to be on both.

Something like that:

Is it possible?

Edit: I found a way to do this by simply adding an extra stream to the data that represents the row. eg.

streams[3] = {key:'myline', values:[{x:68,y:0},{x:68,y:7}]} 

Is there a better way?

Answer 1

Yes maybe

Here is an example of how to do this: https://gist.github.com/timelyportfolio/80d85f78a5a975fa29d7#file-code-r

The solution is to add a javascript function using vertical lines using NVD3 (read the comments carefully):

 function drawVerticalLines(opts) { // CAREFUL HERE !!! the css pasth ".nvd3 .nv-focus .nv-linesWrap" depends on the type of chart you are using, lineChart would use only ".nvd3 .nv-linesWrap" ... ! if (!(d3.select('#' + opts.id + ' the css pasth ".nvd3 .nv-focus .nv" depends on the type of chart you are using, lineChart would use only -linesWrap').select('.vertical-lines')[0][0])) { // Adds new g element with .vertical-lines class; use a css debugger to verify d3.select('#' + opts.id + ' .nvd3 .nv-focus .nv-linesWrap').append('g') .attr('class', 'vertical-lines') } vertLines = d3.select('#' + opts.id + ' .nvd3 .nv-focus .nv-linesWrap').select('.vertical-lines').selectAll('.vertical-line') .data( [{ 'date': new Date('1967-11-30'), 'label': 'something to highlight 1967' }, { 'date': new Date('2001-11-30'), 'label': 'something to highlight 2001' }]) var vertG = vertLines.enter() .append('g') .attr('class', 'vertical-line') vertG.append('svg:line') vertG.append('text') vertLines.exit().remove() // CAREFUL 2 : chart.xAxis.scale() scale depends how you are defining your x Axis in nvd3 chart ... if your are using timestamps, (d.date / 60 / 60 / 24 / 1000) becomes (d.date) vertLines.selectAll('line') .attr('x1', function(d) { return chart.xAxis.scale()(d.date / 60 / 60 / 24 / 1000) }) .attr('x2', function(d) { return chart.xAxis.scale()(d.date / 60 / 60 / 24 / 1000) }) .attr('y1', chart.yAxis.scale().range()[0]) .attr('y2', chart.yAxis.scale().range()[1]) .style('stroke', 'red') vertLines.selectAll('text') .text(function(d) { return d.label }) .attr('dy', '1em') //x placement ; change dy above for minor adjustments but mainly // change the d.date/60/60/24/1000 //y placement ; change 2 to where you want vertical placement //rotate -90 but feel free to change to what you would like .attr('transform', function(d) { return 'translate(' + chart.xAxis.scale()(d.date / 60 / 60 / 24 / 1000) + ',' + chart.yAxis.scale()(2) + ') rotate(-90)' }) //also you can style however you would like //here is an example changing the font size .style('font-size', '80%') } 

And call this method in nv.addGraph Callback:

 var sharedChart = null; // Shared reference on the chart nv.addGraph(function() { ..... sharedChart = chart; return chart; , function() { drawVerticalLines(opts, sharedChart); } ); 

With opts ... (obviously you really don't need this):

 var opts${widgetID.replace('-', '0')} = { "dom": "chart${widgetID}", "width": 800, "height": 400, "x": "date", "y": "value", "group": "variable", "type": "lineWithFocusChart", "id": "chart${widgetID}" }; 

Hope this helps, it took me quite a while to find it and make it work!