NVD3 LinePlusBarChart .enableFocus onClick no working

Question

I'm trying to toggle a focus graph with the NVD3 library using this example as a guide. The code can be found here.

Here is my button that I'm using to toggle:

<div>
  <button onclick="chart_users_new.focusEnable(!chart_users_new.focusEnable()); chart_users_new.update();">toggle focus</button>
</div>

This is my code for the chart:

var chart_users_new
nv.addGraph(function() {
  chart_users_new = nv.models.linePlusBarChart()
    .margin({top: 30, right: 80, bottom: 50, left: 80})
    .color(d3.scale.category10().range())
    .tooltipContent(function(key, x, y, e, graph) {
       //irrelevant 
    });;

  // FULL Graph
  chart_users_new.xAxis.tickFormat(function(d) {
    return d ? d3.time.format('%H:%M%')(new Date(d)) : '';
  });

  chart_users_new.xAxis.axisLabel('Label');

  chart_users_new.y2Axis
    .axisLabel('Label')
    .tickFormat(d3.format(',.'));

  chart_users_new.y1Axis
    .axisLabel('Content at time (true or false)')
    .tickFormat(d3.format(',f'));

  chart_users_new.bars.forceY([0]);

  chart_users_new.lines.forceY([0]);

  d3.select('#chart_users_new2 svg')
      .datum(new_chart_concurrent_users_data)
      .transition()
      .duration(0)
      .call(chart_users_new)
      .selectAll('rect.nv-bar').style("fill-opacity", function(d, i){
        return d.has_content == true ? 0.8:0.5;
      });


  nv.utils.windowResize(chart_users_new.update);

  return chart_users_new;
});

When I click the button this is the error that is printed to the console in Chrome:

Uncaught TypeError: chart_users_new.focusEnable is not a function

Any help is greatly appreciated, thank you.

Answer 1

You need to include the same libraries as in the example you've linked to to get this functionality.