CODEWITHSUNDEEP
dc.js
hotzeplotz
hotzeplotz

Reputation: 98

dc.js barChart - click on x-axis ticks and labels

i am using dc.js (2.0.0-beta.32) for several bar charts, which may happen to display bars whose values differ of 2-3 orders of magnitude, making smaller values' bars almost zero-height, which are almost impossible to click reliably.

i can somehow mitigate this by using a non-linear scale for the bars' height, though this is not really useful because of other constraints i have on data and charts across the project.

adding labels via .label() is not doable either because of the layout i have to work within.

unless i am missing something obvious, i can't see a way to make the x axis tick labels themselves clickable (rather than labels on top of bars added via .label()): is there any way to make selection of columns (as in, bar + associated tick label)?

the closest solution i have found is this: https://stackoverflow.com/a/30560518/550077 though again not really usable in my chart layout which includes 40-50 narrow bars (it's a small improvement but clicking is still not as reliable as it could be by clicking on tick labels)

Upvotes: 1

Views: 954

Answers (1)

Gordon
Gordon

Reputation: 20120

It's kind of messy, but if you know how to map the x domain to your data, you can add your own click handlers to the axis.

For example, on the filtering example, you can add a handler like this:

spendHistChart.select('.axis.x')
    .selectAll('.tick text')
    .on('click', function(d) {
        spendHistChart.replaceFilter(new dc.filters.RangedFilter(d, d+1)); 
        spendHistChart.redrawGroup();
    });

As noted on the user group, you'll also need to enable pointer-events for ticks, since they're disabled by dc.css by default.

Note that the above assumes a chart with a linear scale. If you're dealing with an ordinal scale, the call may be as simple as .replaceFilter(d), but again, it depends on the mapping from your x domain to your actual data.

Upvotes: 1

Related Questions