There is an example here https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/plotoptions/series-point-events-click/ of alerting when a marker on the series is clicked.
Is there any way to alert when any x,y point on the chart is clicked?
plotOptions: {
series: {
cursor: 'pointer',
point: {
events: {
click: function () {
alert('Category: ' + this.category + ', value: ' + this.y);
}
}
}
}
},
You need the click event from the chart object. https://api.highcharts.com/highcharts/chart.events.click
Highcharts.chart('container', {
chart: {
events: {
click: function (event) {
var label = this.renderer.label(
'x: ' + Highcharts.numberFormat(event.xAxis[0].value, 2) + ', y: ' + Highcharts.numberFormat(event.yAxis[0].value, 2),
event.xAxis[0].axis.toPixels(event.xAxis[0].value),
event.yAxis[0].axis.toPixels(event.yAxis[0].value)
)
.attr({
fill: Highcharts.getOptions().colors[0],
padding: 10,
r: 5,
zIndex: 8
})
.css({
color: '#FFFFFF'
})
.add();
setTimeout(function () {
label.fadeOut();
}, 1000);
}
}
},
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]
}]
});
https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/chart/events-click/
Related
Someone had a problem here: Highcharts.js - Event when any point is clicked_
They found a good solution. i have the same problem, but i have multiple y-series underneath. how can i detect which series was the correct one to be clicked?
example here:
// create the chart
Highcharts.chart('container', {
chart: {
type: 'line',
events: {
click: function (event) {
var label = this.renderer.label(
'x: ' + Highcharts.numberFormat(event.xAxis[0].value, 2) + ', y: ' + Highcharts.numberFormat(event.yAxis[0].value, 2),
event.xAxis[0].axis.toPixels(event.xAxis[0].value),
event.yAxis[0].axis.toPixels(event.yAxis[0].value)
)
.attr({
fill: Highcharts.getOptions().colors[0],
padding: 10,
r: 5,
zIndex: 8
})
.css({
color: '#FFFFFF'
})
.add();
setTimeout(function () {
label.fadeOut();
}, 1000);
}
}
},
yAxis: [{ min: 1, max: 3,
height: '40%'},{
height: '60%', top: '40%'}],
series: [{
yAxis: 0,
data: [2,2,2,2,2,2,2,2]
},
{
yAxis: 1,
data: [2.9, 3.5, 106.4, 129.2, 1.0, 4.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}]
});
You can find the proper yAxis by comparing min and max with event values. For example:
chart: {
events: {
click: function(event) {
const yAxis = event.yAxis.find(axis => (
axis.axis.max >= axis.value && axis.axis.min <= axis.value
));
if (!yAxis) {
return;
}
const label = this.renderer.label(
'x: ' + Highcharts.numberFormat(event.xAxis[0].value, 2) + ', y: ' + Highcharts.numberFormat(yAxis.value, 2),
event.xAxis[0].axis.toPixels(event.xAxis[0].value),
yAxis.axis.toPixels(yAxis.value)
)
.attr({
fill: Highcharts.getOptions().colors[0],
padding: 10,
r: 5,
zIndex: 8
})
.css({
color: '#FFFFFF'
})
.add();
setTimeout(function() {
label.fadeOut();
}, 1000);
}
}
}
Live demo: https://jsfiddle.net/BlackLabel/yfq9t2jd/
API Reference: https://api.highcharts.com/highcharts/yAxis
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
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.
I saw a similar question here.
In reply its written that we can have background color by making a rectangle.
My question is how I can get x and Y position of all the ticks on axis. I will need it because I want background color only on alternate dates.
Thanks
Here's a quick example that shades between the 2nd and 4th ticks:
var tickStart = 1;
var tickEnd = 3;
$(function () {
var rect = null;
function drawRect(chart){
if (rect){
rect.element.remove();
}
var xAxis = chart.xAxis[0];
var pixStart = xAxis.toPixels (xAxis.tickPositions[tickStart], false);
var pixEnd = xAxis.toPixels (xAxis.tickPositions[tickEnd], false);
rect = chart.renderer.rect(pixStart, chart.chartHeight - xAxis.bottom, pixEnd - pixStart , 25, 00)
.attr({
'stroke-width': 0,
stroke: '#888888',
fill: '#888888',
zIndex: 3
})
.add();
}
$('#container').highcharts({
chart: {
events: {
load: function() {
drawRect(this);
},
redraw: function(){
drawRect(this);
}
}
},
xAxis: {
},
series: [{
animation: false,
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]
}]
});
});
Fiddle here.
Did you try to use labels.formatter with background and useHTML flag? Something like this: http://jsfiddle.net/AeV7h/
xAxis: {
categories: ['Foo', 'Bar', 'Foobar'],
labels: {
useHTML: true,
formatter: function() {
return '<span class="hc-label">' + this.value + '</span>';
}
}
},
And CSS:
.hc-label {
background-color: red;
padding: 0px 5px;
color: yellow;
}
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);
},