Show a value using hover detail on rickshaw graph render

Question

I'm using Rickshaw.Graph.HoverDetail to show values in a graph when moving the mouse over the graph.

Now, I would like to show an initial value from the graph - HoverDetail-style - when it has been loaded (before a MouseEvent gets fired for the graph).

Any ideas?

Answer 1

I'm using the subclass example for my hover referenced here. At least with this, I was able to get my hover to appear on load by simulating the mouse event on the svg element:

e = document.createEvent('MouseEvents');
e.initEvent('mousemove', true, false);
rgraph[0].children[0].dispatchEvent(e)

This feels a bit hacky but seems to work okay (this example is using angular, but rgraph[0].children[0] would be the main graph svg element). Here is the above in context.

Note: You can also look at the source of examples/hover.js in the the Rickshaw GitHub repository.

var Hover = Rickshaw.Class.create(Rickshaw.Graph.HoverDetail, {
    render: function(args: any) {
        legend.innerHTML = args.formattedXValue;
        args.detail
            .sort((a: any, b: any) => { return a.order - b.order })
            .forEach(function(d: any) {
                var line = document.createElement('div');
                line.className = 'rline';
                var swatch = document.createElement('div');
                swatch.className = 'rswatch';
                swatch.style.backgroundColor = d.series.color;
                var label = document.createElement('div');
                label.className = 'rlabel';
                label.innerHTML = d.name + ": " + d.formattedYValue;
                line.appendChild(swatch);
                line.appendChild(label);
                legend.appendChild(line);
                var dot = document.createElement('div');
                dot.className = 'dot';
                dot.style.top = graph.y(d.value.y0 + d.value.y) + 'px';
                dot.style.borderColor = d.series.color;
                this.element.appendChild(dot);
                dot.className = 'dot active';
                this.show();
            }, this);
    }
});

var hover = new Hover({graph: graph});
e = document.createEvent('MouseEvents');
e.initEvent('mousemove', true, false);
rgraph[0].children[0].dispatchEvent(e);