Set 'focus' area in nvd3.js lineWithFocusChart

Question

I'm usuing the lineWithFocusChart.js model shown in the nvd3 examples shown here: http://nvd3.org/ghpages/examples.html

I want to be able to choose a specific x range for the graph to be focused on at load. I thought there would be a variable in chart that I could set to accomplish this.

Answer 1

Suppose there's only one graph generated by nvd3 on the page:

chart = nv.graphs[0] // how to choose the graph by DOM id?
chart.brushExtent([10,20])
chart.update()

Thank @elsherbini's comment.

Answer 2

The solution provided here no longer works with the newest version of NVD3. Instead, you can use the following when you create the chart:

  chart = nv.models.lineWithFocusChart()
    .options({
      brushExtent: [10000,490000]
    });

Or this after you've created it:

chart.brushExtent([10000,490000]);

See the documentation here: http://nvd3-community.github.io/nvd3/examples/documentation.html#lineWithFocusChart