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.
Related
I exactly follow the steps of tutorials from https://learnforge.autodesk.io/#/tutorials/dashboard and the lab lecture from the autodesk https://www.autodesk.com/autodesk-university/class/Learning-Lab-Your-first-Forge-Dashboard-2019#video. And the dashboard successfully showed for the first time. After I refreshed the pages for several times, the pie chart and bar chart disappeared, leaving the blank area. I repeated the same procesures again and still shows no dashboard.the layup
Can somebody please tell the reason? Thank you.
Assuming that you haven't modified the source code in any way, there are many different reasons why the sample could break, for example, the server we download the charting library from could be temporarily down. Also, if you changed the size of the window, the charts could be below the viewer.
As Augusto mentioned in his comment, if you can still reproduce the issue with the sample code without any modifications, please check the browser console to see if there are any errors.
I tried some examples of c3.js Followed this link. And i got success in that. But i have one problem when i'm trying to load graph first time in any browser, it doesn't show me the graph.
And if i reload page once or twice it shows graph but data is loaded.
I'm using latest version 0.6.1 library in my project, even though chart not shown.
I googled quite a lot but i couldn't found any correct solution.
If anything is there to fix this issue suggest me. Thanks in advance.
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
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
})
});