Higchahrts click entire column to trigger point click event - highcharts

Here is an example: http://jsfiddle.net/sxm38nsj/4/
When the xAxis is a string, I can get the index of click point.
But when the xAxis is datetime, how can I get the index? Or how can I trigger the point's click events?
eg:http://jsfiddle.net/sxm38nsj/5/
$(function () {
$('#container').highcharts({
chart: {
type: 'column',
events: {
click:function(e){
var column = Math.abs(Math.round(e.xAxis[0].value));
alert('bland:',column);
this.series[0].data[column].firePointEvent('click', event);
}
}
},
xAxis: {
type: 'datetime'
},
plotOptions: {
column: {
//pointPadding: 0.2,
//borderWidth: 0
point:{
events:{
click: function(){
alert(this.x);
console.log(this);
}
}
}
}
},
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],
pointStart: Date.UTC(2010, 0, 1),
pointInterval: 24 * 3600 * 1000 // one day
}]
});
});

You can use built-in method series.searchPoint() to find closest point to the mouse (or rather event) position, for example: http://jsfiddle.net/sxm38nsj/6/
chart: {
type: 'column',
events: {
click: function(e) {
var chart = this;
point = chart.series[0].searchPoint(chart.pointer.normalize(e));
if (point) {
point.firePointEvent('click', event);
}
}
}
},
Another solution is to find closest point to your column value. You can search series.xData array, to get index of the closest point to the mouse event.

Related

How can we remove x axis labels post drilldown in highcharts?

I want to have x axis labelled before drilling down but as soon as a user drills down the x axis labels should not be visible anymore. How can I implement?
Is it safe to assume that you have an afterSetExtremes event, like so?
xAxis:{
labels: {
enabled: true
},
events:{
afterSetExtremes:afterSetExtremes
},
.....
If so, inside of that function you could do the following:
function afterSetExtremes(){
$('#container').highcharts().xAxis[0].update({
labels:{
enabled: false
}
});
}
Here you can run my example. Hope it helps!
Highcharts.chart('container', {
chart:{
zoomType: 'x'
},
title: {
text: 'Zoom in on chart to hide xAxis labels'
},
xAxis: {
labels: {
enabled: true
},
events:{
afterSetExtremes:afterSetExtremes
}
},
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 afterSetExtremes(){
$('#container').highcharts().xAxis[0].update({
labels:{
enabled: false
}
});
}
#container {
height: 400px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container"></div>
Use drilldown and drillup events:
const setLabelsVisibility = (chart, isVisible) => {
chart.xAxis[0].update({
labels: {
enabled: isVisible
}
}, false);
};
// Create the chart
Highcharts.chart('container', {
chart: {
type: 'column',
events: {
drilldown: function() {
setLabelsVisibility(this, false)
},
drillup: function() {
setLabelsVisibility(this, true)
}
}
},
...
});
Live demo: https://jsfiddle.net/BlackLabel/vpxhum80/
API Reference: https://api.highcharts.com/highcharts/chart.events

How can I trigger the click function on the chart, when I click on a point?

Is there a way to trigger the chart click event, when I click on a point?
I am trying to have a consistent behavior, so I wonder if I can click on a point and in the click function of the point, call the chart click event.
Even better, if I can just disable altogether the click on the point; altho I use tooltip, so I guess that it won't work without points then.
Instaed of triggering, you can prepare a global functions and then call it in click point event.
$('#container').highcharts({
chart: {
events: {
click: function (event) {
chartClick();
}
}
},
plotOptions: {
series: {
point: {
events: {
click: function () {
alert('point click');
chartClick();
}
}
}
}
},
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 chartClick() {
alert('chartClick');
}
Example: http://jsfiddle.net/sbochan/233x5698/

Impossible to have plotband through current date in Highcharts

I'm using highstock/highcharts, and plotting a stacked (and grouped) column, based on the last 5 minutes.
I want to highlight the last minute (and have been using a plotband for that).
My problem is that the plotband will not cover the whole time range, as you can see in http://jsfiddle.net/duuuE/1/
What I want the plotband to cover is the last minute (up until the current timestamp), but using stacked/grouped columns makes it weird, because the columns are not drawn at the corresponding x-axis tick that corresponds to the timestamp.
Code is this:
$(function () {
Highcharts.setOptions({
global: {
useUTC: false
}
});
var now = new Date().getTime();
var last10min = now - (10 * 60 * 1000);
var lastMin = now - (60 * 1000);
$('#container').highcharts({
chart: {
type: 'column'
},
xAxis: {
type: 'datetime',
minTickInterval: 60 * 1000,
tickMarkPlacement: 'on',
plotBands: [{ // highlight last minute
color: '#FCFFC5',
from: lastMin,
to: now
}],
},
plotOptions: {
series: {
pointStart: last10min,
pointInterval: 60 * 1000 // one minute
},
column: {
stacking: 'normal',
pointPlacement: 'between'
}
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1]
}, {
data: [144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 29.9, 71.5]
}]
});
});
I think you need to remove pointPlacement from your options, see: http://jsfiddle.net/Fusher/duuuE/2/
Reported issue to bug tracker.
Possible workaround: http://jsfiddle.net/duuuE/7/

How to get the path element of hovered scatter point

When I hover an scatter point in a scatter chart, the mouseOver callback receive a event object, but I cant find the current point nor clientX/clientY in that object.
How can I get it?
Im using version v2.3.5 of highcharts
chart = new Highcharts.Chart({
[...]
plotOptions: {
scatter: {
[...]
events: {
click: function(ev) {
[...]
scatterClick(ev);
},
mouseOver: function(ev) {
[...]
scatterHover(ev);
},
You are handling the wrong event. If you want the point information, set the the callback on the point mouseOver event.
Fiddle here.
series: [{
type: 'scatter',
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],
point: {
events: {
mouseOver: function() {
x = this;
alert ('x: '+ this.x +', y: '+ this.y);
}
}
}
}]
In the mouseOver event on the series.data callback, 'this' refers to the point, so you hold be able to use
this.x;
this.y;
E.g
chart = new Highcharts.Chart({
[...]
series: {
data: {
[...]
events: {
click: function(ev) {
alert (this.y);
},
mouseOver: function(ev) {
alert(this.x);
},

Ability to apply a colored area for a plotted date period

In this example JFiddle Link. I want to apply a colored area for a plotted/selected date period. For example, if I select points 1 to 10, the background of these points should be highlighted.
var $report = $('#report');
// create the chart
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
events: {
selection: function(event) {
if (event.xAxis) {
var min = Math.ceil( event.xAxis[0].min ),
max = Math.ceil( event.xAxis[0].max ),
data = this.series[0].data,
list = [];
$('#report').empty();
for(i=min; i<max; i++)
list.push('<li>x: '+data[i].x+', y: '+data[i].y+'</li>');
$('#report').append( list.join('') );
}
return false;
}
},
zoomType: 'x'
},
xAxis: {
},
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]
}]
});
All you need to do is to add the PlotBand in your selection event.
chart.xAxis[0].removePlotBand('plot-band-1');
chart.xAxis[0].addPlotBand({
from: min,
to: max,
color: '#FCFFC5',
id: 'plot-band-1'
});
Example here. API for your reference.
Hope this helps.

Resources