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/
Related
I have a live graph that updates every x time. Included below is an image using a dummy variable. What I would like is for Highcharts to only label the first, middle, and last. Or anything to where I don't spam my graph label with ticks.
Presently my xAxis looks like so:
xAxis: {
crosshair: true,
type: "categories",
categories: xaxis
},
Nothing out of the ordinary. I have tried adding a tickInterval, however, that does not really solve the issue over the long run. Essentially what I need is the opposite of a tickInterval, where ticks are removed after a certain interval. Not unlike the datetime API that highcharts currently has. The difference here is that this data cannot be generated by myself, but by an API that I am using, which spits out the as-shown x-axis label.
After a while, in case there is too much xAxis labels displayed on a chart, the number of them is automatically reduced (the first example). Although, if you want, you can use couple of solutions. The best way, would be to use tickPositioner to display only the first, the middle and the last labels and format them using Highcharts.dateFormat inside xAxis.labels.formatter (the second example). You could also set bigger step of xAxis.labels (the third example).
API Reference:
http://api.highcharts.com/highcharts/xAxis.tickPositioner
http://api.highcharts.com/highcharts/Highcharts.dateFormat
http://api.highcharts.com/highcharts/xAxis.labels.step
Example:
http://jsfiddle.net/vxjdwer7/ - default behaviour
http://jsfiddle.net/30t45zvq/ - using tickPositioner
http://jsfiddle.net/6g9uvokL/ - using step
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/
This a sample in highcharts for what exactly i need to create. The issue i am facing is the blue color should be in the area chart series, but highchart is applying the color at the top (outside the series). I apologize if i am not able to explain the issue correctly.
This happens when i use reversed: true, in yAxis.
Please help or let me know if you need me to explain the issue in different words.
When you reverse the axis, the data reverses as well, to match.
I would probably do this by using negative values as the axis min/max, and the data points.
Then, in the axis label formatter, return the absolute value (removing the '-').
labels: {
formatter: function() {
return Math.abs(this.value);
}
}
You can use the same formatting method to fix the tool tips, data labels, and anything else that might need it.
Example:
http://jsfiddle.net/jlbriggs/MybCM/27/
I am using highcharts library to draw chart and I need to display Weekdays as labels on x-axis and also to auto reset it like from Monday to M if all weekdays can't fit on screen.
It should be dynamic, which means no flickering should appear when changing label text on x-axis.
Any suggestions?
Thanks in advance.
There is no straight option for that, rather simple workaround:
Disable reflow from Highcharts, use window.resize browser event
In that event add condition to decide showing full name of just shortened, and set this for chart - chart.xAxis[0].dateTimeLabelFormats should be fine
After setting new format, apply new chart dimensions using chart.setSize(w, h)
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.