For some reason, the scrollbar option for Highcharts is not working on my Rails 3.2.1 application. What is odd is that everything looks exactly the same as this: http://jsfiddle.net/highcharts/fj6d2/
... except that the scrollbar is missing. I have the exact same code as that shown in the jsfiddle above, the graph appears on my local application, but the scrollbar is missing.
This is the code in my local app, the same as in the jsfiddle:
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
min: 6
},
legend: {
verticalAlign: 'top',
y: 100,
align: 'right'
},
scrollbar: {
enabled: true
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}]
});
Again, the graph shows, but only the scrollbar doesn't. Why isn't the scrollbar showing? Has anybody had success using a scrollbar in their highcharts graphs? I would love to get a fix for this, I really am stumped as to why its not working.
I figured out what was wrong. In my local app, I was loading the highcharts.js file, whereas in the jsfiddle it was loading highstock.js. Adding this:
<script type="text/javascript" src="http://www.highcharts.com/js/highstock.js"></script>
fixed the problem.
Related
I was adding some padding to my chart because I want to control the space between the actual chart and the container, and I encountered a problem.
Look at mi first fiddle, all seems legal but the padding isn't being applied:
https://jsfiddle.net/9r2Lqmpj/
Highcharts.chart('container', {
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
minPadding: 0.4,
maxPadding: 0.4
},
yAxis: {
startOnTick: false,
minPadding: 0.2
},
series: [{
data: [129.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}]
});
But if I duplicate the "xAxis" key, this time without the categories array, which seems highly wrong, for no reason it works:
https://jsfiddle.net/v0rj1xkg/
Highcharts.chart('container', {
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
minPadding: 0.4,
maxPadding: 0.4
},
xAxis: {
minPadding: 0.4,
maxPadding: 0.4
},
yAxis: {
startOnTick: false,
minPadding: 0.2
},
series: [{
data: [129.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}]
});
I wasn't expecting at all that this worked, in fact, I discovered it by mistake. Why is it working only when I repeat the xAxis key definition?
Properties minPadding and maxPadding don't work with category axis type. Use min and max options instead.
Highcharts.chart('container', {
xAxis: {...},
...
}, function() {
var xAxis = this.xAxis[0];
this.update({
xAxis: [{
min: xAxis.min + 0.2,
max: xAxis.max - 0.2
}]
}, true, true, false);
});
Live demo: https://jsfiddle.net/BlackLabel/96s30khd/
Well Agustin, not much of a discovery rather than a common logic there in your second scenario. I am not really sure what you're trying to achieve, but having xAxis defined twice is not necessary. Just remove the first one to get the same result, so it looks like your second one is overwriting the first one. Have a look at your fiddle here https://jsfiddle.net/xcmq869s/ which looks the same to me. Also it might be the case that the padding doesn't work with categorical data, so it works fine when no categories are specified. U can certainly alter the padding with removed categories.
On the other note, if you want to keep your x-axis labels and add only outer spacing, try using the chart.spacing config option as in the fiddle here https://jsfiddle.net/xcmq869s/1/.
I want to show cross hair by default in high chart not any event but it should always be there. How to show crosshair at every x-axis point in highchart?
Using highcharts api
The mouse course will change to crosshair when over a point on the chart
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 400px"></div>
Highcharts.chart('container', {
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
plotOptions: {
series: {
cursor: 'crosshair',
events: {
click: function () {
alert('You just clicked the graph');
}
}
}
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}]
});
using api jsfiddle
Using jquery
This will make the mouse cursor be a cross hair whenever its on the graph.
$("#container").css( 'cursor', 'crosshair' );
using jquery jsfiddle
I'm trying to translate a graphs language from English to Arabic, I'm using ruby on rails with haml, I also have chartkick gem, and highcharts, here is what I did:
on the view i have a div with an Id 'con'
#con
and for the JavaScript I have this:
var chart = new Highcharts.Chart({
chart: {
renderTo: 'con'
},
title: {
text: 'أضغط لعرضها فى المقدمة'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}]
});
my problem is when I run this on Firefox everything works perfectly
and it gives me the correct title
أضغط لعرضها فى المقدمة
but when I run it on chrome it gives me the reversed latter and they are not connected to each others something like this:
ف ي ةم د ق م ل ا.....
I have solved this, just in case someone else needed the answer: you should add useHTML: true
var chart = new Highcharts.Chart({
chart: {
renderTo: 'con'
},
title: {
text: 'أضغط لعرضها فى المقدمة',
useHTML: true
},
.....
With the last version of Highcharts (3.0.2), there is an issue when trying to prevent zooming on the mobile device. After prevent, the series disappear from the chart.
In the below code can be seen that at the selection event of the chart it is prevented the zoom action:
$('#container').highcharts({
chart: {
zoomType:'x',
events: {
**selection: function(event) {
event.preventDefault();
}**
},
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
plotOptions: {
series: {
marker: {
enabled:false,
states: {
hover: {
enabled: true
},
select:{
enabled:true
}
}
}
}
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}]
},function(chart){
chart.series[0].data[1].select();
});
The link for this test is http://jsfiddle.net/mihaelaCiocoiu/YAe9f/
and the link for load on the mobile is http://jsfiddle.net/m/pvb/
Please test on the Android mobile device in order to see this issue, by zooming in this example.
Thank you!
Indeed it looks like a bug, so I reported to the developers https://github.com/highslide-software/highcharts.com/issues/1963
Is there a way in highstock for panning to work in yAxis. I have set max in yAxis so that the user cannot see data above the max yAxis value by default. However I want to give user the ability to pan and see the data beyond the max yAxis value.
Example in the jsfiddle where max yAxis is set to 200.
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
panning: true
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yAxis: {
max: 200
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}]
});
Thanks.