rickshaw
rickshaw copied to clipboard
shutterstock
HoverDetail shows info for wrong bar
Using a bar chart with 2 bars only, adding the HoverDetail feature.
If I move the mouse from left to right I observe the following:
at left of 1st bar, correct information shown at right of 1st bar, incorrect: info for 2nd bar is shown at left of 2nd bar, incorrect: info for 1st bar is shown at right of 2nd bar, correct information shown
There also seems to be issues on the Y axis - the label doesn't change immediately as you move into a stacked segment.
<html>
<head>
<link rel="stylesheet" href="lib/rickshaw-1.5.1.css">
<script type="text/javascript" src="lib/d3-3.5.5.min.js" charset="utf-8"></script>
<script type="text/javascript" src="lib/rickshaw-1.5.1.min.js"></script>
<script type="text/javascript">
function onload()
{
var chart = new Rickshaw.Graph({
element: document.getElementById("chart"),
renderer: 'bar',
series: [{name:"A", color:"red", data:[{x:0,y:5}, {x:1,y:0}]},
{name:"B", color:"yellow", data:[{x:0,y:2}, {x:1,y:0}]},
{name:"C", color:"blue", data:[{x:0,y:0}, {x:1,y:3}]},
{name:"D", color:"grey", data:[{x:0,y:0}, {x:1,y:3}]},
{name:"E", color:"purple", data:[{x:0,y:0}, {x:1,y:1}]}]
});
var formatter = function(n)
{
var map = {0: 'Bar One', 1: 'Bar Two'};
return map[n];
};
new Rickshaw.Graph.Axis.X({graph:chart,
element:document.getElementById("chartXAxis"),
tickFormat:formatter,
ticks:chart.series[0].data.length,
orientation:"bottom"
});
new Rickshaw.Graph.HoverDetail({graph:chart, xFormatter:formatter});
var legend = new Rickshaw.Graph.Legend({
graph: chart,
element: document.getElementById("chartLegend")
});
var highlighter = new Rickshaw.Graph.Behavior.Series.Highlight({
chart: chart,
legend: legend,
disabledColor: function() {return 'rgba(0, 0, 0, 0.2)';}
});
chart.render();
}
</script>
<style type="text/css">
#chart {height:300px; width:400px; display:inline-block; vertical-align:bottom;}
#chartLegend {display:inline-block; vertical-align:bottom; }
#chartXAxis {}
</style>
</head>
<body onload="onload();">
<div id="chart"></div>
<div id="chartLegend"></div>
<div id="chartXAxis"></div>
</body>
</html>
Hi. I've seen a similar issue as well, and implemented a fix for our project. The symptoms I've seen weren't quite the same as yours, as moving the mouse to the right of the last bar for me resulted in the bar to the left of the last one being active. The fix addresses that behavior, although it's not perfect as a bar is only active if the mouse floats over the left half of that bar. The change is made within the file, "rickshaw.js". Search that file for the following line:
if (data[i + 1].x <= domainX) { i++ } else { i— }
Then try replacing that line with the following code:
if (data[i + 1].x <= domainX) { i++; if(i == (data.length - 1)) dataIndex = i; } else { i-- }
Hope this helps
UPDATE 2015-09-30: We're still seeing the issue for some of our Chrome users. Works fine on Firefox with this fix, and works fine for some users using the same version of Chrome as those who are reproducing the issue. We've tried clearing the browser's cache, to no avail. When the issue reproduces, the actual mouseevent object is reporting a bad x-value when rolling over the bars in the graph. Crazy.
I'm running into this now as well. Still an issue on Chrome 55 ... but works just fine on Firefox 50.1.0.
Turns out this is a known issue in how Chrome handles certain types of elements like SVG: https://bugs.chromium.org/p/chromium/issues/detail?id=592316
Sadly, @RashidClark's patch does not fix the issue for Chrome.
