dc.js - display mouseover values from chart outside graph

Question

I'm looking to create a stacked line graph similar to the following example:

https://dc-js.github.io/dc.js/

However, in addition I would like a field above the graph that displays the current value of the mouseover.

I.e. instead of having to pause for a second with the cursor on the graph, and then having a mouse over box come up, I would like the values to show outside the graph, similar to the way that they do in Google Finance (see how price and vol on top left of graph change as you mouseover). E.g.https://www.google.com/finance?q=apple&ei=MUiWVtnQIdaP0ASy-6Uo

I would really appreciate any info the community could share on what is the best way to approach this.

Answer 1

You can do this by adding your own mouseover/mouseout events to the dots in the chart. I've added a .display-qux span inside the chart div:

<div id="monthly-move-chart">
    ...
    <span class="display-qux"></span>
</div>

but of course it could be somewhere else, this just makes it easy to select for this example.

Then add mouse events using the renderlet event, which is fired after every render and every redraw:

    .on('renderlet', function(chart) {
        chart.selectAll('circle.dot')
            .on('mouseover.foo', function(d) {
                chart.select('.display-qux').text(dateFormat(d.data.key) + ': ' + d.data.value);
            })
            .on('mouseout.foo', function(d) {
                chart.select('.display-qux').text('');
            });
    });

The .foo is an event namespace, to avoid interfering with internal use of these events. You should probably use a word here that is relevant to what you're trying to do. Documentation on event namespaces is here.

Sample output:

The process is the same for adding events to the other charts, but for example, you would selectAll('rect.bar', ... for bar charts, etc.