I have several highcharts graphs set up and have recently noticed that I'm unable to click on legend entries to show/hide their associated series in Firefox. This works fine in Chrome and Safari so it seems like this is a browser-related issue.
I've noticed that the highcharts demoes do not have this problem, so it must be something I'm doing in my implementation but I'm having a very difficult time figuring it out. What is it that Firefox does differently that could cause this sort of problem with highcharts?
Point of interest: if I set the chart's useHtml parameter to true, the legend entries become clickable. This is not a solution however because it breaks a bunch of other stuff.
Thanks!
I had a similar problem, in which points in line graphs were not clickable in Firefox (but they were clickable in Chrome). Turned out that Firefox places the dataLabels on top of the graph points.
Solved it with:
plotOptions: {
series: {
dataLabels: {
zIndex: 2
See also:
http://api.highcharts.com/highcharts#plotOptions.series.dataLabels
I solved this problem, which happened for me in Firefox, Chrome, and Safari, but not in IE9.
I found out the problem is CSS related. My page has 2 "boxes"; left and right. My Vaadin pie chart is sitting on the right box. On the left box I have a html <H1> tag that has width overflow to the right box (width: 900px) which covers part of the pie chart. As a result some rectangular area is not clickable. This can easily be fixed by using the Firefox Firebug tool to inspect the CSS. I hope this saves you the hours I spent to install the latest vaadin chart library; debug the codes, etc.
Related
I am using multiple of Highcharts which has different legend y value position for each chart for some reason.
As I want to generalize for all the charts, I am trying to control all the y values from css like below...
.highcharts-legend-item rect{y:3;}
The above css is working great as expected in Chrome alone.. not working in Firefox
I can do that by going to each chart and alter the legend: {y:3}, but because of less control on server code I am not able to do the same.
Is there any other way to do the same for Firefox please?
http://jsfiddle.net/1h91po8b/1/
I wanted to enable data labels in the chart I created. However, when I saw the graph all the data labels are not visible/drawn. In this image you cannot see the data labels in all points
However as part of this post, I wanted to give the fiddle with the chart text that is generated for your reference. But when I ran that fiddle it seemed like it was working. I am not sure if I am missing any thing.
Another issue is the tool tip is gone. Can I not have tooltip along with the data labels? Data labels are essential for me since the downloaded images wont have tool tip and datalabels come handy. Tooltips are handly in web application.
Can any one help me in this here?
Here is the code from the jsfiddle I am talking about:
plotOptions: {
spline: {
dataLabels: {
enabled: 'True'
},
enableMouseTracking: false
}
}
The issue is enableMouseTracking: false. Setting this means that HC will not listen to where the mouse is so it doesn't know where to put the tooltip. Turn this back on and tool tips will show.
Also, you have tons of dangling commas on your jsFiddle. Click on JSHint at the top to highlight them. Chrome and FF can sort of ignore them but other browsers like IE will throw errors.
You need to use crop to show all datalabels.
None of my charts are printing in IE7 and also IE9 in document mode 7 or 8.
The text(axis titles, axis labels, legend labels) comes up but the chart itself and the legend symbols do not.
I did try to search a lot and saw a few posts suggesting issues with document modes but the chart not printing in a simple IE7 browser seems strange. I do need to support printing for my sites users!
Any pointers would be great.
I'm trying to fill gradient color in my charts, with the sample code in the demo "http://www.highcharts.com/demo/pie-gradient". And then I found in line charts' legend, the line part of the symbol disappeared, while the markers were still visible. If I disable the markers, then there is nothing left.
Here is an example based on the code of a line chart demo: http://jsfiddle.net/TCbE3/
enter code here
I'm using Highcharts 3.0.1, with both latest FireFox and Chrome, and this problem occurs in both.
Any ideas how to fix this problem?
While using a demo highchart (from highcharts.com). To be more specific a basic bar chart, a grey theme.
As in this one http://www.highcharts.com/demo/bar-basic/gray
The bars on the graph in grey theme have a white line around them that I want to remove. I found in the javascript that it is strokewith=1 that make them appear. I can't find a way to set it to 0 since it is in the library from highcharts. How can i access strokewith=1 locally ?
best regards from Iceland :)
This is handled with the borderWidth property. I recommend checking out the documentation on the API. Set borderWidth: 0 to get your result.