How would you go about having a dc.js bar-chart not be clickable but be hoverable?

1
votes

I have a top 10 chart that works (using a fake group) how all other bar-charts work with cross-filter. If I select one of the things on the top 10 chart it filters all the other charts which is not what I want to have happen. I just want the chart display the chart.title text (the hover-text) while disabling its ability to be clickable.
So far I've looked into dc.js itself to see if there was a configuration for the bar-chart to get what I need and I couldn't find anything.

I've tried using this 

ng-click="stopClick($event)"

$scope.stopClick = function (event) {
  event.preventDefault();
  event.stopPropagation();
};

That didnt do anything to the chart.

I've tried using inline css for the chart 

style="pointer-events: none;"

But that disables the hover-text completely.

Any help would be greatly appreciated.

2
dc.js

2 Answers

1
votes

Huh, you would expect .brushOn(false) to do this, but I guess it has no effect for bar charts with ordinal x scale.

Instead, you can disable the event handler manually:

  chart.on('pretransition', function(chart) {
      chart.selectAll('rect.bar').on('click', null);
  });
0
votes

I wasn't having luck with the chosen answer but Gordon's answer to a different question did work https://stackoverflow.com/a/50702979

chart.onClick = function() {}