I am working on a simple chart with Highcharts on ExtJS 3.* version. I am using this simple example on jsfiddle. I don't want to render this chart to a div element. I want to put this in a Ext.Panel but when I tried it gives error. How can I do without chart's renderToproperty.
As #Sebastian Bochan stated highcharts.com/download solved my problem.
Related
I have a series of highcharts graphs in an app. Newest graph we add was a scatter type chart.
Unfortunately its markers are not matching up with legend symbols. Please find an attachment showing the issue.
I am unable to reproduce this in a separate file as it works fine when I do that. I have example of how it behaves within the application.
We are using highcharts 9.0.1 version
any help is really appreciated.
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 have a highcharts chart on jsfiddle here: http://jsfiddle.net/hohenheim/j8cTE/15/
The graph does not render when the page loads but when I hover over the area where the chart should be, some bars render.
Here is what it looks like on my screen: http://i.imgur.com/uJ5AtVE.png Is there a way to make the highcharts render on load and to render properly?
Note if you want to see if the data, you can uncomment the alert line.
//alert(JSON.stringify(data2));
Answering my own question: this is a known bug in 4.0.1 of highcharts as per Pawel's comment. Solution is to change up the highcharts references to working versions.
I have a working pie chart that uses data from a HTML table. I trying to get the corresponding label to show on the chart. Current it shows "slice" on all slices. Here is a jsFiddle link www.jsfiddle.net/codedecks/YJsSg/. Thanks in advance.
Did some more searching and found a couple of sample that was was able to use. In case any one else is looking for the same thing here is the link to the jsFiddle www.jsfiddle.net/codedecks/KB6Zy/.
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.