I needed to create a error bar style chart with HighCharts. The issue is, I want to remove the connecting verticle line(stem) to error points (whiskers).
Following is the code I used in errorbar section.
stemWidth: -1,
whiskerLength: 150
Following is a modified example from HighCharts examples to accomplish my requirement.
http://jsfiddle.net/ry8qw/2/
This is working fine with Chrome. But not working with the FireFox (Version 20.0.1). I'm running the latest available FF version.
Are there any workarounds for this issue ?
Thank You
Indeed it looks like a issue, so I've reported to our developers here:https://github.com/highslide-software/highcharts.com/issues/1833
But you can use small workaround, iterate in each errorbar and change strike width by svg attribute.
http://jsfiddle.net/ry8qw/6/
$.each(chart.series[1].data,function(i,data){
data.stem.attr({
"stroke-width":0
})
});
Related
Hi I have a couple of charts showing up in my app. I am using Angular-Highcharts package and for some reason the colors dont show up properly in my chart.
I inspected using chrome dev tools and it shows that the fill is transparent.
I also have a sunburst chart implemented and it works just fine.
I even tried the demo code form here but its still the same with the demo code.
I kinda get a feel its got to do with the compiler.
Anyone experienced this and fixed this? Please advice.
This is a screenshot of the demo code on my machine.
I did it in Stackblitz and it works fine. The same code is running on my local machine as well as on my server.
I am developing a angular2 application using highcharts, but i have a problem about showing a bar chart. I have applied their sample code of highcharts to my application. It works. But when i added extra series to the chart, the columns becomes unreasonably too thin. my result
I separately tried the sample code on JSfiddle with adding extra series to the code. It works however. ... workable example
I've recently faced a very similar issue and even posted a question about it.
The solution seems to be pretty easy - for me the problem was in outdated highcharts (5.0.8) and highcharts modules(exporting, boost, highcharts-more, heatmap) (v. 5.0.8), so if you cannot reproduce your local behavior in jsfiddle try setting particular version of highcharts libraries like I've done here.
<script src="https://code.highcharts.com/5.0.8/highcharts.js"></script>
However when I updated to highcharts 5.0.14 the problem disappeared.
Hope this helps!
UPDATE
The issue was with a boost.js module, in particular with seriesThreshold property was set to 10 by default (now it is 50). Please find a detailed answer with example here
If you don't mind scrollable high-chart then this issue can be resolved.
Instead of Highchart use HighStock library, it will provide additional "scrollbar" option which you can combine with X-axis max option to show the data properly.
Here is the Updated Link for same code
scrollbar:{
enabled:true
},
xAxis: {
max:0
// rest of the code}
This answer will be good help to go in details.
I have tested with various graphs and this seems like a consistent problem.
I have a highstock graph, if you draw a lot of data and zoom out to the full view of the graph by using the sliders or the range selector, the whole graph draws all messes up.
I found an example fiddle that illustrate the issue.
http://fiddle.jshell.net/highcharts/qgprf/show/
I've used Chrome to get the path that highstock generated and then plotted just the path:
http://jsfiddle.net/MsFhh/
It's obvious that highstock is creating some tomfoolery.
For the sake of stackoverflow, here's some code
alert("I R code"); //Copying the huge svg path in here is kinda insane
Is there something that I can do to fix this?
PS: if I upgrade to the new highstock version, everything in our graphs breaks so updating is not an option :(
This is known bug of Highstock 1.3.0, alread y fixed in 1.3.3+. Reported here. You can modify sources to fix issue, or upgrade to latest version.
If you have issue with upgrading - let us know what kind, and we will try to fix them. Of course working fiddle with that issues is really appreciated.
The bug has been fixed. The fix for version 1.3.5 can be found here:
https://github.com/highslide-software/highcharts.com/issues/1651#issuecomment-25226662
Don't use the patch though. It doesn't fully fix the issue. It seems like 1.3.6 fixes everything that were causing the defect.
The patch can be seen here:
https://github.com/highslide-software/highcharts.com/commit/9607afd512473710b6aeb9bfceaf23549d285ff0
On the nexus 7 when I run a simple Highcharts example, I have the following issue -:
When I touch any area of the chart, the entire chart gets selected (a blue selection color fills the entire chart) shown below.
This issue does not happen when I try it on any other device (such as the Nexus 4).
Also, when I try accessing the highcharts demos from demo , the same issue reappears. This is what leads me to believe it has nothing to do with my source code, but has more to do with the device itself.
Does anyone else face this issue? If so, any advice in fixing this issue would be appreciated.
I tested examples in Nexus 7 device but and all works properly
http://jsfiddle.net/zn6FM/show/
Do you have the newest Chrome or you use other browser? Have you tried to update to Android 4.2.2 ?
I just observed an abnormal behavior in chrome: I use highcharts pie graph and visualize some data. Although each pie slice has different colors, it shows some slices in black. I suspect it is related generated svg graph. Please examine the pictures taken from chrome and firefox *****.
Any help, suggestion, workaround would be appreciated.
(source: i.imm.io)
(source: i.imm.io)
*Using Win 7 64 bit
Chrome version 20.0.1132.47 m
Mozilla version 13.0.1
Alright guys I found the problem which is in my code. But I learnt something: If you assign color attribute to an element, Firefox doesn't check if it has # symbol in the beginning but Chrome checks. Therefore, color:343434 fails in Chrome but not in Firefox.