I have a scatter plot in Highcharts and I would like to connect points with a line when hovering over a point.
Is this possible?
You can use scatter serie with lineWidth set as 2, then hide a SVG path (line) and catch mouseOver / mouseOut events to manipulate graphic.
Example:
http://jsfiddle.net/sbochan/t96cds7o/3/
plotOptions: {
series: {
point: {
events: {
mouseOver: function () {
this.series.graph.show();
}
}
},
events: {
mouseOut: function () {
this.graph.hide();
}
}
}
},
// callback
setTimeout(function(){
chart.series[0].graph.hide();
},1);
Related
If you hover on Short Term Fuel Trim, the other plot lines are faded. How can I apply the same effect to yAxis which will fade other yAxis except Short Term Fuel Trim
You can use the yAxis.update method in the series mouseOver and mouseOut events to change title and labels color.
function updateYAxes(chart, exception, color) {
chart.yAxis.forEach(function(axis) {
if (axis !== exception) {
axis.update({
labels: {
style: {
color
}
},
title: {
style: {
color
}
}
}, false);
}
}, this);
chart.redraw();
}
Highcharts.chart('container', {
...,
plotOptions: {
series: {
events: {
mouseOver: function() {
updateYAxes(this.chart, this.yAxis, '#ededed');
},
mouseOut: function() {
updateYAxes(this.chart, this.yAxis, 'black');
}
}
}
}
});
Live demo: http://jsfiddle.net/BlackLabel/ju9g05xe/
API Reference:
https://api.highcharts.com/highcharts/plotOptions.series.events.mouseOver
https://api.highcharts.com/highcharts/plotOptions.series.events.mouseOut
I am working on an app where I need to show drilldown chart. I am using highcharts for this, I want to fire the click event when user clicks on the bars of second chart (drilled one).
I am using code but this is firing the event on the first chart also. Is there a way to fire it on the second chart only? or check if event is raised from which chart?
plotOptions: {
series: {
events:{
click: function (event) {
console.log(event);
alert("testing" + event.point.name)
}
}
}
}
Sample is here - https://highcharts-angular-drilldown-zqmyd9.stackblitz.io/
Try to define your chart as a global variable and add the condition to check if the chart.drilldownUpButton exists into your click callback.
Demo: https://jsfiddle.net/BlackLabel/uhbored9/
plotOptions: {
series: {
events: {
click: function(event) {
if (chart.drillUpButton) {
alert("testing" + event.point.name)
}
}
}
}
},
I'd like the cursor to be a crosshair when it is over the chart area of a highcharts graph, to indicate to users that they can zoom in. However, I don't want the cursor to be a crosshair when it's over other areas such as the legend or axes.
Is this possible?
You can use built-in method chart.isInsidePlot(plotX, plotY). Example: http://jsfiddle.net/2eje4xxb/1/
Code example:
container.on("mousemove", function (event) {
var chart = container.highcharts();
if (chart.isInsidePlot(event.pageX - chart.plotLeft, event.pageY - chart.plotTop)) {
$("body").css({
cursor: "crosshair"
});
} else {
$("body").css({
cursor: "default"
});
}
});
Another idea is to utilize chart.plotBackgroundColor option, which creates rect, which can obtain CSS styles:
chart: {
zoomType: 'x',
plotBackgroundColor: "rgba(10,0,0,0)", // dummy color, to create an element
events: {
load: function(){
if(this.plotBackground) {
this.plotBackground.toFront().css({ // move on top to get all events
cursor: "crosshair"
});
}
}
}
},
And demo: http://jsfiddle.net/2eje4xxb/2/
Yes it is possible. You can write code to set the cursor style in the mouse events.
Please find the jsfiddle here - http://jsfiddle.net/3Lu7bzmn/5/
CSS
.cursorCrossHair{
cursor : crosshair
}
.cursorDefault{
cursor : default
}
JS - Shown only specific piece of code which is required to change the cursor. The id of the div used to render the highcharts is called "container". Please refer the jsfiddle to see the full working example.
$('#container').highcharts({
chart: {
plotOptions: {
series: {
point: {
events: {
mouseOver: function () {
$("#container").removeClass("cursorDefault").addClass("cursorCrossHair");
},
mouseOut: function () {
$("#container").removeClass("cursorCrossHair").addClass("cursorDefault");
}
}
}
}
},
});
});
How to determine the coordinates of the point where the CLICK was made. If the CLICK was made exactly on the line of the graphic (not on the point of the graphic).
chart: {
events: {
click: function(event) {}
}
},
Not work
I think you should use plotOptions.series.events.click, not chart.events.click. Then simply set tooltip.snap = 1 to get clicks only when cursor is really close to the line/point. To get coordinates use event.chartX and event.chartY:
tooltip: {
snap: 1
},
plotOptions: {
series: {
events: {
click: function (e) {
console.log(e.chartX, e.chartY);
}
},
}
},
Demo: http://jsfiddle.net/dxj7wemh/
I have a pie chart here. On click event it drills down and on mouseover it does the slice animation. The slice animation is copied from an answer here from Pawel Fus
The events I have on pie chart point are as below,
mouseOut: function () {
setTranslation(this, false);
},
mouseOver: function() {
setTranslation(this, true);
},
click: function() {
var drilldown = this.drilldown;
if (drilldown) { // drill down
setChart(drilldown.name, drilldown.categories, drilldown.data, drilldown.color);
} else { // restore
setChart(name, categories, data);
}
}
and the functions used in them are
function setChart(name, categories, data, color) {
chart.xAxis[0].setCategories(categories);
chart.series[0].remove();
chart.addSeries({
name: name,
data: data,
pointPadding: -0.3,
borderWidth: 0,
pointWidth: 15,
shadow: false,
color: color || 'white'
});
}
function setTranslation(p, slice){
p.sliced = slice;
if(p.sliced){
p.graphic.animate(p.slicedTranslation);
} else {
p.graphic.animate({
translateX: 0,
translateY: 0
});
}
}
The problem I have is it throws following exception:
Uncaught TypeError: Property 'select' of object #<Object> is not a function highcharts.src.js:12364
It breaks the chart when clicking on it for drilldown.
I am not sure what I am doing wrong but I guess the mouseover event is getting messed up on drilldown.
It would be great if I can get both these features working together.
The problem is with actual running animation. I advice to not use setting translation to a pie chart until all animations for a slice are don, see: http://jsfiddle.net/5H675/5/
function setTranslation(p, slice) {
p.sliced = slice;
if (!$(p.graphic).is(':animated')) {
if (p.sliced) {
p.graphic.animate(p.slicedTranslation);
} else {
p.graphic.animate({
translateX: 0,
translateY: 0
});
}
}
}