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/
Related
I am using HighCharts and when I type the xAxis categories with long name the text get mixed up as the 2 words mixed with each other as you see in the link:-
https://jsfiddle.net/Abdelrahmanlifestyle/zjubcLgx/8/
and the shown is
فواتيراء الكهرب
instead of
فواتير الكهرباء
It's not a High Charts bug, it's a Chrome bug. It works fine in Fire Fox. It's an old bug where it calculates the positions of <tspan>s of RTL text wrongly. As a workaround you can use HTML for labels on axis.
labels: {
useHTML: true
}
https://jsfiddle.net/zjubcLgx/15/
I've created a scatter highchart in Jaspersoft Server 6.2 (called ad hoc reports in the product) but encountered a strange problem where I cannot get normal color related properties to take effect. I normally just the property: colors ["#999999"] to other types of charts in Jaspersoft Server but for some reason this does not work in a scatter chart, I also tried using rgba values in the property.
I have searched extensively for a solution and everything that seems to apply to normal highcharts doesn't appear to work in Jaspersoft Server. I've tried adding the following properties:
series.color
series.data.color
series.marker.color
plotOptions.scatter.color
With hex and rgba values defined but the data points either remain black or disappear altogether. It's something that's very easy to manipulate in other chart types but scatter chart tye seems quite restrictive in Jaspersoft so perhaps not. Is there something simple I'm missing here?
I am using Highcharts, however for security reason I have to render chart in server and display the output (SVG) directly in browser as an image. Everything is working fine except tooltip. Is there anyway tooltip can be initialized later in Highcharts for pre-rendered chart?
I am using Highstock 1.2.5.
These are the options I have with my chart.
I am adding colors to yAxis using axis.addPlotBand based on certain conditions.
Also, I am using axis.addPlotLine to draw line some plot values.
Both, these options are set after chart is drawn. As, I have dynamic values.
This works fine no problem. Lately, I have enabled Export options.
Now, The exported pdf is not showing above mentioned changes. How do I do that ?
Second, I have enabled Legend. Is it possible to not to include Legend while exporting chart.
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.