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
Related
I want to make last point blinking in high-stock. But there is no feature for that.
Can I do it by java-script?
One way you could achieve this is to assign a custom class to your last point, and do some CSS for that point to make it blink.
Assigning a custom class to a point can be done like this
series: [{
data: [29.9, 71.5, {y: 54.4, className: 'customClass'}],
}]
Here, the last point as been assigned to with the class customClass. Then we use some CSS magic taken from this answer. And we get a blinking last point:
Highcharts.chart('container', {
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, {y: 54.4, className: 'customClass'}],
marker: {
radius: 10
}
}]
});
.customClass {
animation: blinker 1s linear infinite;
}
#keyframes blinker {
50% {
opacity: 0;
}
}
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 250px"></div>
JSFiddle example: https://jsfiddle.net/ewolden/jr2x64t8/9/
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
How to on or off credits with a button click in highcharts?
Can some 1 explain with example
You can enable/disable by show/hide functions, related with SVG object.
http://jsfiddle.net/N6b6H/1/
$('#showhide').toggle(function () {
chart.credits.hide();
},function(){
chart.credits.show();
});
Here i created a jsfiddle in which bydefault the credit enable is false but onclick credit enables becomes true.
Try this:
[http://jsfiddle.net/jvaibhav/N6b6H/]
HTML is Like :
<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 400px">
</div>
<button id="showhide"> Click Me </button>
Script is Like:
$(function () {
$('#showhide').click(function(){
$('#container').highcharts({
chart: {
},
credits: {
enabled: true
},
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]
}]
});
});
$('#container').highcharts({
chart: {
},
credits: {
enabled: false
},
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]
}]
});
});
I upgraded to HighCharts version 3.0.0 today and am having some issues with animation. The web application I am working on is built for IE 9. I am getting no animation in IE but when running chrome the animation still renders for my application. I can however view highcharts demos in IE 9 on the official site with full animation.
chartVar = document.createElement('div');
chartVar.setAttribute('id', 'container');
chartVar.style.width = '400px';
chartVar.style.height = '200px';
document.getElementById('quad0').appendChild(chartVar);
$(function () {
$('#container').highcharts({
chart: {
},
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]
}]
});
});
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.