DC.js Barchart- provide tooltip or title on the X axis labels

Question

I'm working on a barchart from dc.js. I'm having trouble providing a tooltip or a title on the labels X axis.

The reason why I need axis tooltips is that I added a feature to text labels that reaches a maximum length and it will apply the '...' into it. The tooltip will help the users to view the full text of that X axis Text labels. Here are the following that i have done but it didnt work.

I use chart.selectAll(g.x text) **or .text and add an .on('mouseover', ...) function which that didn't work. I look at the developer tool and i see the events when i select the element for the labels but its not appearing when i hover over it.
I manually added an attribute of 'onMouseOver' and its function and that also didn't work. Here is the code I used. The getTooltip function have a console.log message to see if it triggers.

chart.selectAll('g.x text') .attr('transform', 'translate(-40,20) rotate(315)') .attr('onMouseOver', 'getTooltip(this)');
I added a title attribute when I selectAll(g.x text) but that didn't work.

I'm running out of ideas and this needs to be done soon. Please can you assist me?

Is it possible to have a tooltip or a title on the X axis labels for barchart dc.js?

Thank you. Here is the code I did below.

        barchart
    .title(function(v) {
        var total = d3.format(',d') ( v.value.Total );
        return lve_cit_bucketsLookup[v.key] + " Total:" + total;
    }).renderlet(function (chart) {
       // rotate x-axis labels
     chart.selectAll('g.x text')
         .attr('transform', 'translate(-40,20) rotate(315)') 
         /* .attr('onMouseOver', 'getTooltip(this)') */;

       // works with .tick
        chart.selectAll('g.x text')
        .on('mouseover', function(d){
                console.log("mouseover fool: " + d) 
            div.transition()
                .duration(200)
                .style("opacity", .9);
            div.html("dest")
            .style("left", (d3.event.pageX) + "px")     
         .style("top", (d3.event.pageY - 28) + "px"); 
        })
        .on('mouseout', function(d) {
             div.transition()        
                .duration(500)      
                .style("opacity", 0);   
        }); 

   })
    .xAxis().tickFormat(function(v) {
        var getLookup = lve_cit_bucketsLookup[v];
        if(getLookup.length > 10)
            return getLookup.substring(0,10) + '...';
        else
            return getLookup;
        });

By the way, I used the .on('mouseover', ...) function when I selectAll(x axis text labels) for the heatmap dc.js and it works like a charm. But I'm still having trouble for this barchart.

Gordon Gordon · Accepted Answer · 2018-01-02T20:57:05

dc.js blocks pointer events on its axes in its CSS.

I think this was a heavy-handed way to stop the text from accidentally being selected, which nowadays would better be addressed with user-select: none. (I've filed an issue to investigate this.)

It's explicitly re-enabled for heatmaps because of the select row or column feature, which is why that worked for you.

Anyway, you can add your own CSS rule to override dc.js like this:

.dc-chart g.axis text {
    pointer-events: auto;
}

and you should start getting those mouse events again!

DC.js Barchart- provide tooltip or title on the X axis labels

1 Answers