dc.js - How to use cap and othersGrouper in capMixin?

Question

I am trying to create a row chart with dc.js which shows the top 5 URLs and group the rest (not top 5) into 'Others'. From what I have searched online, it is possible by using cap() and othersGrouper() under capMixin (https://www.tutorialspoint.com/dcjs/dcjs_capmixin.htm)

This is part of my code:

urlChart
    .width(300)
    .height(250)
    .dimension(url)
    .group(numOfUrl)
    .xAxis().ticks(4)
    .cap(10)
    .othersGrouper(false);

I am getting the error saying that cap() and othersGrouper() are not functions. So I am wondering what I did wrong here.

Answer 1

Looks like you ran into this common "gotcha":

Why does everything break after a call to .xAxis or .yAxis?

I think this is one reason some people don't like method chaining in JavaScript: it's not always clear if you are chaining to the same object or something else.

I always advise to split any axis manipulation into its own statement:

urlChart
    .width(300)
    .height(250)
    .dimension(url)
    .group(numOfUrl)
    .cap(10)
    .othersGrouper(false);

urlChart
    .xAxis().ticks(4);

I am not sure what could be done in the library to mitigate this. I've moved the FAQ closer to the top, and this question will help the SEO.

Thanks for asking!