I recently posted an issue regarding unpredictable hover on points in Highcharts, but the question didn't get much traction. Probably because it's difficult to explain.
I now posted a video here
http://www.youtube.com/watch?v=LovfLWpVVtc
showing this behavior.
It happens both on Chrome and Firefox (the video was done on FF on a high spec MacPro).
The video was done using this JsFiddle from the docs.
http://jsfiddle.net/HnwbQ/1/
As you can see, when approaching the first or last point from outside of the chart, no tootlip is shown. However if the cursor enters the chart and then approaches the first/last point, then a tooltip is rendered. This is erratic, and sometimes a tooltip is rendered when coming from the outside, sometimes it's not.
Any ideas what's the issue?
MORE INFO
This seems to occur mostly when using xAxis: {type: 'datetime'},
I am using Highcharts v2.1.9.
There is no need in 'hack' - just use the latest version of Highcharts http://jsfiddle.net/WdVtE/
OK I think I found a hackish solution to this.
It seems to me this is a bug related to the fact that
xAxis: {type: 'datetime'}
pushes the first and last datapoint to the limits of the plot area (this doesn't happen when using category).
So the way around this problem is to create some padding using
x-axis: {
minPadding:0.02,
maxPadding:0.02
}
Then hover behaves correctly, similar to when x-axis is category.
Note that minPadding and maxPadding have to be > 0.02. If you use 0.01 you'll have a buggy hover.
Related
In my dataLabels options for a series I have set allowOverlap to false. However, I'm still getting overlapping labels. My actual implementation is admittedly really custom and bespoke, and I've tried to create a simple jsfiddle to reproduce this, but can't.
However, I have tracked it down to what I think is the problem, at least in the html output.
In this example, when I inspect the labels elements in Chrome Dev Tools, I see something like the following for the first few labels:
It seems that the class highcharts-data-label-hidden goes together with an opacity: 0 and this acts to hide the label concerned. Where that class label is not applied, opacity is set to 1, to show the label. It works as it should; there are no overlapping labels in this example.
However, with the output from my own code I see something like:
In my output, all labels are shown; none are hidden; and many are overlapping. It seems that the highcharts-data-label-hidden class is being correctly applied to certain labels, i.e. those that should be hidden to avoid overlap. But at the same time, the opacity of these elements is set to 1 rather than 0... in fact all elements have an opacity of 1... and hence all my labels are showing, and many are overlapping as a result.
Sure enough, if I dynamically edit the style tags in Dev Tools to change opacity to 0 for those elements having the highcharts-data-label-hidden class, the labels are nicely laid out without any overlap.
I have tried in vain for hours to work out why my code is setting opacity to 1 even for these labels that should be hidden, despite apparently assigning the highcharts-data-label-hidden class correctly. I need your help, even based on this admittedly limited information.
One clue may be that I also notice that highcharts-data-label-color-0 class appears in the working example for each element, whereas highcharts-data-label-color-undefined appears in mine. Looking at the HC source code, this appears to come from dataLabel.addClass(' highcharts-data-label-color-' + point.colorIndex ..., so point.colorIndex in mine must be ending up as undefined, but I'm not sure why, or whether that is related to the problem I'm seeing with the non-hidden labels. I am doing some 'advanced' stuff with point and label colouring in my code, so that I can set the colour of the label to match the colour of the point, even where a colour gradient is in effect (this is done after the chart loads). But I don't do anything to the label opacity, so far as I know... wouldn't even know how... the dataLabels object doesn't even have an opacity element to change.
Any help appreciated!
EDIT
Finally managed to make a simple repro, just to prove that I'm not going mad! If you run this example, and inspect the overlapping label elements, you will see that (like described above) many have the highcharts-data-label-hidden class and yet also have opacity: 1, making them visible when they shouldn't be.
The (partial) solution appears to be to do a series.update(false) after each series loop (only one series in this example), rather than a chart.update() at the end... as per this updated example. Question: why isn't it necessary to pass true into the update?
However, whilst this is an improvement, there is still an oddity... after loading, try hitting the Unset Extremes button... the labels overlap again.
And it's not just calling setExtremes() with no args that does this... load this example and hit Set Extremes once (OK) and then twice (NOT OK)... the only change in this example is to use wider extremes than in the original, so that labels overlap. Even more weirdly in this example, some labels remain hidden, while others don't... it's not all or nothing.
Even with the first simple repro, which doesn't work on opening, if you hit Set Extremes, then Unset Extremes, the labels no longer overlap. But hit Unset Extremes again, and they overlap again. Can't work out what is going on here.
In fact, having spent a while producing this repro, I now notice that the original example I gave at the very start of my post also shows this behaviour, without needing the load() event... open this again... looks fine at first but then hit the Unset Extremes button... labels overlap! And in this slight modification all I have done is widen the range for Set Extremes... load that and hit Set Extremes (OK) and then again (NOT OK).
How do I ensure non-overlapping labels in this context, at all times, regardless of what axis extremes are set (and in what order the extremes are set)?
Thank you for reproducing the issue. Just like I thought before - it is a regression. Everything used to work fine in the 8.0.4 version. I already reported it on Highcharts GitHub issue channel where you can follow this thread:
https://github.com/highcharts/highcharts/issues/13742
The last stable version: https://jsfiddle.net/BlackLabel/vwc34nhz/
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/8.0.4/highcharts.js"></script>
<div id="container"></div>
<button id="setextremes">Set extremes</button>
<button id="unsetextremes">Unset extremes</button>
If you don't need any new features please use the 8.0.4 version until our core developers will fix this issue.
Does anyone know how to prevent a Vis.js Timeline from resizing "unnecessarily"? By "unnecessarily" I of course mean relative to a visual context not the "code context". In the screengrab below, I understand that the code is "doing its job", as it were, but the visual result is not acceptable.
I've tried all the various settings I could find under the setup options but they didn't help. It is a huge codebase and I'd rather not muck around with it, if I can help it.
While you can't configure it in the javascript, a bit of css can do the trick for you :)
.vis-label .vis-inner {
min-height: 200px;
}
I had similar issues so I thought I would post a response here in the event someone else is experiencing the same problems I had. Changing the CSS didn't work for me. This just created gaps on the Y Axis inside the first or last group item and pushed the timeline items out of whack. There's an option called 'stack' which I had overlooked. For items that overlap slightly their corresponding group will expand in height to accommodate them. In my case I had an item that ended at 16:00 and the item directly after this would have a start time of 16:00. This was causing some overlap but I did not want the height of the group to expand. Setting 'stack: false' in the options prevented the expanding effect. There was still some minor expanding in the region of a couple of pixles but nowhere near the height issues I was having with multiple items sharing the same start/end times.
My site generates a lap chart for a bunch of riders, like so:
The problem is, on some devices the legends don't line up. E.g. if it's perfect in one browser, it stretches a bit too far in others, presumably due to font rendering differences. (I have it set to Roboto).
The API documents the possibility of using lineHeight css property in itemStyle, but it doesn't seem to work for me. I've set it to 50 and '50px', both in "legend" and "legend: itemStyle". No good.
(http://api.highcharts.com/highcharts#legend.lineHeight)
As such the best I can do is fiddle with the fontsize and the itemMarginBottom, which leads me to the problem I have.
Anyone have a solution?
I'm using the latest version of highcharts by the way.
I've been creating a metrics module (using timeseries) with c3js. I'm now trying to plot out events over my metrics data, which are date-spans (startDate to endDate). Using c3js' regions seemed to be a good choice for it, it only took a little tinkering to make them short and appear above of all my graphed data.
Problem is, the actual SVG Group called g.c3-regions is automatically displayed behind the graphed data. Makes sense, there hasn't been any real need allow any user interaction with regions. I need it in the forefront, so I can bind hover and click functions to each event.
I tried doing this with jQuery: $('.c3-regions').insertAfter('.c3-chart'), which simply places it in front. Works fine - that is, until my c3js instance re-renders. Then it spits out an error that it's having trouble re-rendering the regions (since they obviously moved)
I've also tried cloning it and putting that in front, but it doesn't seem to copy over the SVG information.
Any help would be truly appreciated, can provide any code samples on request.
Cheers - - Andrew
To expand on Robert Longson's comment, what you want to add is
.c3-event-rect {
pointer-events: none;
}
.c3-chart {
pointer-events: none;
}
This will allow the clicks to go through to the region layer.
I’m working on a pure d3 implementation of a multiline chart with transitions. It works quite well with a little exception. Using transitions with a line drawn as path seems quite difficult. I found some solutions using clipping paths and so on and always combined with the warning, that these solutions are quite performance consuming.
Is there any easier solution of showing progress in the multiline chart as a real point to point drawing (at least in users perception).
You can inspect my current code under http://bl.ocks.org/m99coder/136db7134df6fdc3e3cf
With kind regards
Marco
Update 2015-07-14 14:14:00 CET
I refactored some parts of my code: http://bl.ocks.org/m99coder/8a9fab35b8f47ab8844c. But unfortunately I couldn’t get it to work as smooth as you given tutorial link (http://bost.ocks.org/mike/path/). Any advices? Maybe it’s related to the defined range, which avoids values outside of „viewport“.
Update 2015-07-14 14:57:00 CET
Getting closer but not perfect yet: http://bl.ocks.org/m99coder/136db7134df6fdc3e3cf/a53f06a0334bada96e1f892c886c5b68fe3c0a05. It looks like the path is hopping back to the right after smooth transition to the left.
Update 2015-07-14 17:37:00 CET
Harmonizing durations of updates and transitions didn’t solved it too. Now it’s hopping to the left: http://bl.ocks.org/m99coder/8a9fab35b8f47ab8844c/cd25a9d33839f52974780b1c142922cbbf8f64f4
I managed it to work as expected. It was a timing issue. Data was modified before the transition was done. The new approach uses a callback to get informed when the transition is over and shifts data afterwards.
http://bl.ocks.org/m99coder/54d6e0130064c699e6e4/06149dd1ab22cebf5b307bab3ec90079e356bce9