How to apply tooltips for dc.js chart after chart is rendered

tooltips bar chart d3 js
d3 tooltip
dc.js examples
dc js tutorial
d3 mouseover bar chart
d3 bar chart tooltip
dc js group

I have multiple row charts (crossfilter + dc) and I want to customize the tooltip using d3-tip.

So basically the relevant code is:

rowtip = d3.tip()
    .attr('class', 'd3-tip')
    .offset([-10, 0])
    .html(function (d) { return d.key + ": "  + d.value; }); dc charts ...

... then at the bottom of my script tags ...


The code seems work, but the mouseover event doesn't get triggered automatically and the tooltips don't get displayed when the page loads.

But If I run the last line (mouseover) on the console, then everything works as expected.

So my question would be how can I make sure the mouseover event gets triggered when the page loads. I tried Jquery $(document).ready(....), but that didn't work.

It has to have something to do with the order in which the elements are loaded... I guess. But I'm not an expert in javascript and much less in d3.

Thanks in advance.

Your way works fine but here is the idiomatic dc.js way to do it:

chart.on('pretransition.add-tip', function(chart) {
        .on('mouseout', rowtip.hide);

The pretransition event fires after the chart is rendered or redrawn. add-tip is an event namespace to avoid interfering with anything else which may be watching this event.

chart.selectAll selects only items within the chart, to avoid accidental tooltips elsewhere in the page.

d3.js, Your way works fine but here is the idiomatic dc.js way to do it: chart.on('​pretransition.add-tip', function(chart) { chart.selectAll('g.row') .call(rowtip)  The tooltip label configuration is nested below the tooltip configuration using the callbacks key. The tooltip has the following callbacks for providing text. For all functions, 'this' will be the tooltip object created from the Chart.Tooltip constructor.

Here seems similar to your requirement, check it

implement tooltip · Issue #780 · dc-js/dc.js · GitHub, Hi, I tried to use d3-tip, but at some points it's failing. I think it's dc.js. For example the line chart show ".dot" elements when you mouseover an data point. implement tooltip #780 renderAll(); or after the chart is rendered. To show the tooltip, I think you might get away with creating a new Chart.Tooltip object but that might be overkill for your needs. In your plugin you could always have some draw code that would draw a tooltip like box and then in the event handler you would set some options on the chart and call update() to make sure that it rendered afterwards

So I was able to solve this by using jquery after all. Seems a bit hacky, but it does what I need.

Basically I am forcing the call of the d3-tip function on mouseover of the html body.

var rowtip = d3.tip()
    .attr('class', 'd3-tip')
    .offset([-10, 0])
    .html(function(d){return d.key;}) 

$('body').on('mouseover', function(){

        .on('mouseout', rowtip.hide);     


How to add a tooltip on a graph ?, Chart class will use this function to render svg title(usually interrupted by How to add a tooltip on a graph in general and on bar in particular using dc.js . Since dc.js is just built on top of d3 so pretty much anything that will  Get a reference to your chart as shown in the following code: var chart = $('#container').highcharts(); // Alternatively, if the chart has not already rendered var chart = $('#container').highcharts(options).highcharts(); Call Highcharts.addEvent to attach the event handler, as shown in the following code: Highcharts.addEvent(chart

[dc.js] chart with tooltip - JSFiddle,"div#bar-chart.dc-chart svg").call(tip);. 145. ​. 146. d3.selectAll("​"). 147 .on('mouseover', ). 148 .on("mouseout", tip.hide);. CSS Tidy. 55. Sometimes tooltips show up after a reload or navigation to another page and back. And no JS errors in console. It doesn't matter in which order the widgets are rendered, it's alway the same problem. Normally it has 4 widgets on a page with one chart each, and one of them is a widget with 4 charts of type column.

Using d3-tip to add tooltips to a d3 bar chart -, How to use d3-tip with d3's simple bar chart example. sans-serif; } .axis path, .​axis line { fill: none; stroke: #000; shape-rendering: crispEdges; } a small triangle extender for the tooltip */ .d3-tip:after { box-sizing: border-box;  Chart.defaults.line.spanGaps = true; Data Structure. The data property of a dataset for a line chart can be passed in two formats. number[] data: [20, 10] When the data array is an array of numbers, the x axis is generally a category. The points are placed onto the axis using their position in the array. When a line chart is created with a category axis, the labels property of the data object must be specified. Point[]

Pro D3.js: Use D3.js to Create Maintainable, Modular, and Testable , Use D3.js to Create Maintainable, Modular, and Testable Charts Marcos Iglesias For that, and only after we render the line chart, we draw the tooltip inside the  Teams. Q&A for Work. Stack Overflow for Teams is a private, secure spot for you and your coworkers to find and share information.