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.
Related
vuejs
apexcharts
Hi, I have an issue and not sure if it was a bug or I have missed for some configuration. Currently I'm flowing the Timeline Charts here. I have to enable for the label, and you can see when the time of a task have passed, or not met (by dragging the chart), but the label of hide item is still visible and be stacked with visible label
Issue example 1
Issue example 1
Any body got the same issues yet and how to resolve it? I don't think it's a bug because obiviously no one expected this behavior, right?
I have tried for most of the configuration in the dataLabels but nothing kind related to this. Feel free to drag the chart to see the issue clearly. The code is basically a demo from Apexchart demo, not modify much. You could easily download the original code here: https://apexcharts.com/vue-chart-demos/
Demo for the issue: jsfiddle.net/xhieu2206/quvzaxk9
P/s: after checking for a jsfiddle of the same usecase in React, it work normally without any configuration, so seem like it's a bug from Vue Apexchart team, please correct me if I was wrong (hopefully ...) ...
Demo in react: jsfiddle.net/xhieu2206/3fzb60ar/2/
Editted: the issue happened with react too:
demo: jsfiddle.net/xhieu2206/3fzb60ar/2
enter image description here
I am currently using Highcharts JS v4.0.4 (2014-09-02) [yes, we need to upgrade] and I noticed that sometimes our charts do not load all the way. For instance, on loading a page, I see something like this:
But then I hover over the chart, and additional sections appear:
Is this a know issue with this version of Highcharts? I am curious to know if this is something that can be fixed in this version or if it is a known issue only fixed with an upgrade. I previously tried to upgrade to the latest version and it broke some of our charts, so we opted to wait, since we didn't need to upgrade, but now we have this issue.
I have a highcharts synchronization example working fine on JS Fiddle:
http://jsfiddle.net/profnimrod/5vcc6z40/18/
However, when I integrate this into a larger app I'm seeing something weird. When I do some debugging on the JS Fiddle version I see that in each point in the:
chart.series[0].points
array has the following fields:
However, when I view the same array in my larger app I see the following:
I am, as far as I can tell, utilizing the current (6.0.3) version of Highcharts in both cases. What's going on?
The difference in my chart options was that in my larger app I had the 'boost' option enabled. This is used to handle charts containing many 1000s of points. It seems that it uses a different 'point' class when in boost mode which explains the issue I observed above.
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
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
})
});