Is there a function to highlight another stat/point/column while hovering element on Highcharts?

Multi tool use
I'm setting up highcharts and want to highlight both two columns/serie/point when I'm hovering in one.
JS Fiddle: http://jsfiddle.net/dybtupjc/6/
Researched the web and found that I can use mouseOver & out to handle the element, but I can only handle one, not all of the stats of the series (which is what I need: hover one, and also the other on the other corner)
Tried this, but didn't work..
this.chartConfig.series = [{type: 'column',name: 'Dh',data: dataPoll,point: {
//events of highcharts
events: {
// on mouse over
mouseOver: function () {
var number;
// loop through all the values that the chart has
for(var i = 0; dataPoll.length > i; i++){
// this.y is the value formatted on the charted and provide in the mouseOver function
if(dataPoll[i] == this.y) {
console.log("Match", dataPoll[i])
console.log("Number", i)
// And since there are 12 categories (columns), I add 6 to the hover (which is for testing the first numbers, higher numbers will definitely not work), so it can highlight the upper column
var number = i + 6;
console.log("Sum", number)
$scope.setColorSeries(number);
}
}
// This is actual valid code, it updates the color of the column under the cursor. Maybe there is a function to call like: this.data[6].update(....)
this.update({
color: '#000',
colorThis: this.color,
numberExtrem: number + 6
});
},
mouseOut: function () {
console.log("out mouse!", this)
this.update({
color: this.colorThis
});
}
}
}}];
Now, what I want is this:
It should work like this:
But the actual output is that I'm hovering the column under the cursor, and I need to highlight both cursor and other column (which it will be its counterpart)
This is the fiddle I uploaded.
The column under the arrow needs to be black as well.
And I have a question, how could as well add and arrow between both two columns?
Thanks in advance.
javascript web charts highcharts hover
add a comment |
I'm setting up highcharts and want to highlight both two columns/serie/point when I'm hovering in one.
JS Fiddle: http://jsfiddle.net/dybtupjc/6/
Researched the web and found that I can use mouseOver & out to handle the element, but I can only handle one, not all of the stats of the series (which is what I need: hover one, and also the other on the other corner)
Tried this, but didn't work..
this.chartConfig.series = [{type: 'column',name: 'Dh',data: dataPoll,point: {
//events of highcharts
events: {
// on mouse over
mouseOver: function () {
var number;
// loop through all the values that the chart has
for(var i = 0; dataPoll.length > i; i++){
// this.y is the value formatted on the charted and provide in the mouseOver function
if(dataPoll[i] == this.y) {
console.log("Match", dataPoll[i])
console.log("Number", i)
// And since there are 12 categories (columns), I add 6 to the hover (which is for testing the first numbers, higher numbers will definitely not work), so it can highlight the upper column
var number = i + 6;
console.log("Sum", number)
$scope.setColorSeries(number);
}
}
// This is actual valid code, it updates the color of the column under the cursor. Maybe there is a function to call like: this.data[6].update(....)
this.update({
color: '#000',
colorThis: this.color,
numberExtrem: number + 6
});
},
mouseOut: function () {
console.log("out mouse!", this)
this.update({
color: this.colorThis
});
}
}
}}];
Now, what I want is this:
It should work like this:
But the actual output is that I'm hovering the column under the cursor, and I need to highlight both cursor and other column (which it will be its counterpart)
This is the fiddle I uploaded.
The column under the arrow needs to be black as well.
And I have a question, how could as well add and arrow between both two columns?
Thanks in advance.
javascript web charts highcharts hover
add a comment |
I'm setting up highcharts and want to highlight both two columns/serie/point when I'm hovering in one.
JS Fiddle: http://jsfiddle.net/dybtupjc/6/
Researched the web and found that I can use mouseOver & out to handle the element, but I can only handle one, not all of the stats of the series (which is what I need: hover one, and also the other on the other corner)
Tried this, but didn't work..
this.chartConfig.series = [{type: 'column',name: 'Dh',data: dataPoll,point: {
//events of highcharts
events: {
// on mouse over
mouseOver: function () {
var number;
// loop through all the values that the chart has
for(var i = 0; dataPoll.length > i; i++){
// this.y is the value formatted on the charted and provide in the mouseOver function
if(dataPoll[i] == this.y) {
console.log("Match", dataPoll[i])
console.log("Number", i)
// And since there are 12 categories (columns), I add 6 to the hover (which is for testing the first numbers, higher numbers will definitely not work), so it can highlight the upper column
var number = i + 6;
console.log("Sum", number)
$scope.setColorSeries(number);
}
}
// This is actual valid code, it updates the color of the column under the cursor. Maybe there is a function to call like: this.data[6].update(....)
this.update({
color: '#000',
colorThis: this.color,
numberExtrem: number + 6
});
},
mouseOut: function () {
console.log("out mouse!", this)
this.update({
color: this.colorThis
});
}
}
}}];
Now, what I want is this:
It should work like this:
But the actual output is that I'm hovering the column under the cursor, and I need to highlight both cursor and other column (which it will be its counterpart)
This is the fiddle I uploaded.
The column under the arrow needs to be black as well.
And I have a question, how could as well add and arrow between both two columns?
Thanks in advance.
javascript web charts highcharts hover
I'm setting up highcharts and want to highlight both two columns/serie/point when I'm hovering in one.
JS Fiddle: http://jsfiddle.net/dybtupjc/6/
Researched the web and found that I can use mouseOver & out to handle the element, but I can only handle one, not all of the stats of the series (which is what I need: hover one, and also the other on the other corner)
Tried this, but didn't work..
this.chartConfig.series = [{type: 'column',name: 'Dh',data: dataPoll,point: {
//events of highcharts
events: {
// on mouse over
mouseOver: function () {
var number;
// loop through all the values that the chart has
for(var i = 0; dataPoll.length > i; i++){
// this.y is the value formatted on the charted and provide in the mouseOver function
if(dataPoll[i] == this.y) {
console.log("Match", dataPoll[i])
console.log("Number", i)
// And since there are 12 categories (columns), I add 6 to the hover (which is for testing the first numbers, higher numbers will definitely not work), so it can highlight the upper column
var number = i + 6;
console.log("Sum", number)
$scope.setColorSeries(number);
}
}
// This is actual valid code, it updates the color of the column under the cursor. Maybe there is a function to call like: this.data[6].update(....)
this.update({
color: '#000',
colorThis: this.color,
numberExtrem: number + 6
});
},
mouseOut: function () {
console.log("out mouse!", this)
this.update({
color: this.colorThis
});
}
}
}}];
Now, what I want is this:
It should work like this:
But the actual output is that I'm hovering the column under the cursor, and I need to highlight both cursor and other column (which it will be its counterpart)
This is the fiddle I uploaded.
The column under the arrow needs to be black as well.
And I have a question, how could as well add and arrow between both two columns?
Thanks in advance.
javascript web charts highcharts hover
javascript web charts highcharts hover
edited Dec 29 '18 at 8:14


Vickey
56111
56111
asked Dec 28 '18 at 21:30
Matías ForkMatías Fork
52
52
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
You can use point events like mouseOver
and mouseOut
to get the actual hovering point and based on its category (in a polar chart it is column angle) calculate an opposite point category which allows you to get this point object and set hover state on it. When mouseOut
events occur set normal (empty string) state again using the same approach:
JS:
point: {
events: {
mouseOver: function() {
setNextPointState(this, 'hover');
},
mouseOut: function() {
setNextPointState(this, '');
}
}
}
function setNextPointState(point, state) {
var series = point.series,
category = point.category,
nextPointCategory = category - 180,
index,
nextPoint;
nextPointCategory = (nextPointCategory < 0) ? 360 + nextPointCategory : nextPointCategory;
nextPointCategory = (nextPointCategory > 360) ? nextPointCategory - 360 : nextPointCategory;
index = series.xData.indexOf(nextPointCategory);
if (index !== -1) {
nextPoint = series.data[index];
nextPoint.setState(state);
}
}
API reference:
https://api.highcharts.com/class-reference/Highcharts.Point#setState
Demo:
https://jsfiddle.net/BlackLabel/bn5wc80p/
And I have a question, how could as well add an arrow between both
two columns?
You can use vector series type. If you want to highlight arrows as well use the same approach as with columns. Check the demo and code posted below.
CSS:
.highcharts-vector-series {
pointer-events: none;
}
JS:
series: [{
type: 'column',
name: 'Column',
data: [8, 7, 3, 4, 9, 4, 7, 3],
pointPlacement: 'between',
point: {
events: {
mouseOver: function() {
setNextPointState(this, 'hover');
setArrowsState(this, 'green');
},
mouseOut: function() {
setNextPointState(this, '');
setArrowsState(this, 'rgba(255, 255, 255, 0.3)');
}
}
}
}, {
type: 'vector',
color: 'rgba(255, 255, 255, 0.3)',
rotationOrigin: 'start',
vectorLength: 50,
lineWidth: 4,
data: [
[0, 0, 10, 205],
[0, 0, 10, 250],
[0, 0, 10, 295],
[0, 0, 10, 340],
[0, 0, 10, 25],
[0, 0, 10, 70],
[0, 0, 10, 115],
[0, 0, 10, 160]
]
}]
function setNextPointState(point, state) {
var series = point.series,
category = point.category,
nextPointCategory = category - 180,
index,
nextPoint;
nextPointCategory = (nextPointCategory < 0) ? 360 + nextPointCategory : nextPointCategory;
nextPointCategory = (nextPointCategory > 360) ? nextPointCategory - 360 : nextPointCategory;
index = series.xData.indexOf(nextPointCategory);
if (index !== -1) {
nextPoint = series.data[index];
nextPoint.setState(state);
}
}
function setArrowsState(point, color) {
var series = point.series,
arrowSeries = series.chart.series[1],
category = point.category,
arrowDir = category + 180 + 25,
nextArrowDir = arrowDir + 180,
index,
nextIndex,
arrow,
nextArrow;
arrowDir = (arrowDir > 360) ? arrowDir - 360 : arrowDir;
nextArrowDir = (nextArrowDir > 360) ? nextArrowDir - 360 : nextArrowDir;
index = arrowSeries.directionData.indexOf(arrowDir);
nextIndex = arrowSeries.directionData.indexOf(nextArrowDir);
if (index !== -1 && nextIndex !== -1) {
arrow = arrowSeries.data[index];
nextArrow = arrowSeries.data[nextIndex];
arrow.update({
color: color
});
nextArrow.update({
color: color
});
}
}
API reference:
https://api.highcharts.com/highcharts/series.vector
https://api.highcharts.com/class-reference/Highcharts.Point#update
Demo:
https://jsfiddle.net/BlackLabel/Lgkd01q8/
Really impressive answer., Wojciech. Many thanks for your time; the answer solves the problem.
– Matías Fork
Dec 29 '18 at 19:56
How do you make the arrows work so neat with no 8, but 12 columns? I'm trying and it gets messy in the hover. Tried to set the degrees but no luck, jsfiddle.net/c28yhLd5
– Matías Fork
Dec 29 '18 at 20:38
i.imgur.com/AhlwUJU.png see the arrows? the hover also doesn't work. except one. strange..
– Matías Fork
Dec 29 '18 at 20:46
To make it works with 12 arrows you have to change degrees of each vector and modify thesetArrowsState
function to calculate arrows direction properly. I modified the function and now you can pass an arrow deviation as the third parameter (deviation is equal to 15 degrees for 12 columns). Demo: jsfiddle.net/fse3k84n.
– Wojciech Chmiel
Jan 3 at 7:18
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53964478%2fis-there-a-function-to-highlight-another-stat-point-column-while-hovering-elemen%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
You can use point events like mouseOver
and mouseOut
to get the actual hovering point and based on its category (in a polar chart it is column angle) calculate an opposite point category which allows you to get this point object and set hover state on it. When mouseOut
events occur set normal (empty string) state again using the same approach:
JS:
point: {
events: {
mouseOver: function() {
setNextPointState(this, 'hover');
},
mouseOut: function() {
setNextPointState(this, '');
}
}
}
function setNextPointState(point, state) {
var series = point.series,
category = point.category,
nextPointCategory = category - 180,
index,
nextPoint;
nextPointCategory = (nextPointCategory < 0) ? 360 + nextPointCategory : nextPointCategory;
nextPointCategory = (nextPointCategory > 360) ? nextPointCategory - 360 : nextPointCategory;
index = series.xData.indexOf(nextPointCategory);
if (index !== -1) {
nextPoint = series.data[index];
nextPoint.setState(state);
}
}
API reference:
https://api.highcharts.com/class-reference/Highcharts.Point#setState
Demo:
https://jsfiddle.net/BlackLabel/bn5wc80p/
And I have a question, how could as well add an arrow between both
two columns?
You can use vector series type. If you want to highlight arrows as well use the same approach as with columns. Check the demo and code posted below.
CSS:
.highcharts-vector-series {
pointer-events: none;
}
JS:
series: [{
type: 'column',
name: 'Column',
data: [8, 7, 3, 4, 9, 4, 7, 3],
pointPlacement: 'between',
point: {
events: {
mouseOver: function() {
setNextPointState(this, 'hover');
setArrowsState(this, 'green');
},
mouseOut: function() {
setNextPointState(this, '');
setArrowsState(this, 'rgba(255, 255, 255, 0.3)');
}
}
}
}, {
type: 'vector',
color: 'rgba(255, 255, 255, 0.3)',
rotationOrigin: 'start',
vectorLength: 50,
lineWidth: 4,
data: [
[0, 0, 10, 205],
[0, 0, 10, 250],
[0, 0, 10, 295],
[0, 0, 10, 340],
[0, 0, 10, 25],
[0, 0, 10, 70],
[0, 0, 10, 115],
[0, 0, 10, 160]
]
}]
function setNextPointState(point, state) {
var series = point.series,
category = point.category,
nextPointCategory = category - 180,
index,
nextPoint;
nextPointCategory = (nextPointCategory < 0) ? 360 + nextPointCategory : nextPointCategory;
nextPointCategory = (nextPointCategory > 360) ? nextPointCategory - 360 : nextPointCategory;
index = series.xData.indexOf(nextPointCategory);
if (index !== -1) {
nextPoint = series.data[index];
nextPoint.setState(state);
}
}
function setArrowsState(point, color) {
var series = point.series,
arrowSeries = series.chart.series[1],
category = point.category,
arrowDir = category + 180 + 25,
nextArrowDir = arrowDir + 180,
index,
nextIndex,
arrow,
nextArrow;
arrowDir = (arrowDir > 360) ? arrowDir - 360 : arrowDir;
nextArrowDir = (nextArrowDir > 360) ? nextArrowDir - 360 : nextArrowDir;
index = arrowSeries.directionData.indexOf(arrowDir);
nextIndex = arrowSeries.directionData.indexOf(nextArrowDir);
if (index !== -1 && nextIndex !== -1) {
arrow = arrowSeries.data[index];
nextArrow = arrowSeries.data[nextIndex];
arrow.update({
color: color
});
nextArrow.update({
color: color
});
}
}
API reference:
https://api.highcharts.com/highcharts/series.vector
https://api.highcharts.com/class-reference/Highcharts.Point#update
Demo:
https://jsfiddle.net/BlackLabel/Lgkd01q8/
Really impressive answer., Wojciech. Many thanks for your time; the answer solves the problem.
– Matías Fork
Dec 29 '18 at 19:56
How do you make the arrows work so neat with no 8, but 12 columns? I'm trying and it gets messy in the hover. Tried to set the degrees but no luck, jsfiddle.net/c28yhLd5
– Matías Fork
Dec 29 '18 at 20:38
i.imgur.com/AhlwUJU.png see the arrows? the hover also doesn't work. except one. strange..
– Matías Fork
Dec 29 '18 at 20:46
To make it works with 12 arrows you have to change degrees of each vector and modify thesetArrowsState
function to calculate arrows direction properly. I modified the function and now you can pass an arrow deviation as the third parameter (deviation is equal to 15 degrees for 12 columns). Demo: jsfiddle.net/fse3k84n.
– Wojciech Chmiel
Jan 3 at 7:18
add a comment |
You can use point events like mouseOver
and mouseOut
to get the actual hovering point and based on its category (in a polar chart it is column angle) calculate an opposite point category which allows you to get this point object and set hover state on it. When mouseOut
events occur set normal (empty string) state again using the same approach:
JS:
point: {
events: {
mouseOver: function() {
setNextPointState(this, 'hover');
},
mouseOut: function() {
setNextPointState(this, '');
}
}
}
function setNextPointState(point, state) {
var series = point.series,
category = point.category,
nextPointCategory = category - 180,
index,
nextPoint;
nextPointCategory = (nextPointCategory < 0) ? 360 + nextPointCategory : nextPointCategory;
nextPointCategory = (nextPointCategory > 360) ? nextPointCategory - 360 : nextPointCategory;
index = series.xData.indexOf(nextPointCategory);
if (index !== -1) {
nextPoint = series.data[index];
nextPoint.setState(state);
}
}
API reference:
https://api.highcharts.com/class-reference/Highcharts.Point#setState
Demo:
https://jsfiddle.net/BlackLabel/bn5wc80p/
And I have a question, how could as well add an arrow between both
two columns?
You can use vector series type. If you want to highlight arrows as well use the same approach as with columns. Check the demo and code posted below.
CSS:
.highcharts-vector-series {
pointer-events: none;
}
JS:
series: [{
type: 'column',
name: 'Column',
data: [8, 7, 3, 4, 9, 4, 7, 3],
pointPlacement: 'between',
point: {
events: {
mouseOver: function() {
setNextPointState(this, 'hover');
setArrowsState(this, 'green');
},
mouseOut: function() {
setNextPointState(this, '');
setArrowsState(this, 'rgba(255, 255, 255, 0.3)');
}
}
}
}, {
type: 'vector',
color: 'rgba(255, 255, 255, 0.3)',
rotationOrigin: 'start',
vectorLength: 50,
lineWidth: 4,
data: [
[0, 0, 10, 205],
[0, 0, 10, 250],
[0, 0, 10, 295],
[0, 0, 10, 340],
[0, 0, 10, 25],
[0, 0, 10, 70],
[0, 0, 10, 115],
[0, 0, 10, 160]
]
}]
function setNextPointState(point, state) {
var series = point.series,
category = point.category,
nextPointCategory = category - 180,
index,
nextPoint;
nextPointCategory = (nextPointCategory < 0) ? 360 + nextPointCategory : nextPointCategory;
nextPointCategory = (nextPointCategory > 360) ? nextPointCategory - 360 : nextPointCategory;
index = series.xData.indexOf(nextPointCategory);
if (index !== -1) {
nextPoint = series.data[index];
nextPoint.setState(state);
}
}
function setArrowsState(point, color) {
var series = point.series,
arrowSeries = series.chart.series[1],
category = point.category,
arrowDir = category + 180 + 25,
nextArrowDir = arrowDir + 180,
index,
nextIndex,
arrow,
nextArrow;
arrowDir = (arrowDir > 360) ? arrowDir - 360 : arrowDir;
nextArrowDir = (nextArrowDir > 360) ? nextArrowDir - 360 : nextArrowDir;
index = arrowSeries.directionData.indexOf(arrowDir);
nextIndex = arrowSeries.directionData.indexOf(nextArrowDir);
if (index !== -1 && nextIndex !== -1) {
arrow = arrowSeries.data[index];
nextArrow = arrowSeries.data[nextIndex];
arrow.update({
color: color
});
nextArrow.update({
color: color
});
}
}
API reference:
https://api.highcharts.com/highcharts/series.vector
https://api.highcharts.com/class-reference/Highcharts.Point#update
Demo:
https://jsfiddle.net/BlackLabel/Lgkd01q8/
Really impressive answer., Wojciech. Many thanks for your time; the answer solves the problem.
– Matías Fork
Dec 29 '18 at 19:56
How do you make the arrows work so neat with no 8, but 12 columns? I'm trying and it gets messy in the hover. Tried to set the degrees but no luck, jsfiddle.net/c28yhLd5
– Matías Fork
Dec 29 '18 at 20:38
i.imgur.com/AhlwUJU.png see the arrows? the hover also doesn't work. except one. strange..
– Matías Fork
Dec 29 '18 at 20:46
To make it works with 12 arrows you have to change degrees of each vector and modify thesetArrowsState
function to calculate arrows direction properly. I modified the function and now you can pass an arrow deviation as the third parameter (deviation is equal to 15 degrees for 12 columns). Demo: jsfiddle.net/fse3k84n.
– Wojciech Chmiel
Jan 3 at 7:18
add a comment |
You can use point events like mouseOver
and mouseOut
to get the actual hovering point and based on its category (in a polar chart it is column angle) calculate an opposite point category which allows you to get this point object and set hover state on it. When mouseOut
events occur set normal (empty string) state again using the same approach:
JS:
point: {
events: {
mouseOver: function() {
setNextPointState(this, 'hover');
},
mouseOut: function() {
setNextPointState(this, '');
}
}
}
function setNextPointState(point, state) {
var series = point.series,
category = point.category,
nextPointCategory = category - 180,
index,
nextPoint;
nextPointCategory = (nextPointCategory < 0) ? 360 + nextPointCategory : nextPointCategory;
nextPointCategory = (nextPointCategory > 360) ? nextPointCategory - 360 : nextPointCategory;
index = series.xData.indexOf(nextPointCategory);
if (index !== -1) {
nextPoint = series.data[index];
nextPoint.setState(state);
}
}
API reference:
https://api.highcharts.com/class-reference/Highcharts.Point#setState
Demo:
https://jsfiddle.net/BlackLabel/bn5wc80p/
And I have a question, how could as well add an arrow between both
two columns?
You can use vector series type. If you want to highlight arrows as well use the same approach as with columns. Check the demo and code posted below.
CSS:
.highcharts-vector-series {
pointer-events: none;
}
JS:
series: [{
type: 'column',
name: 'Column',
data: [8, 7, 3, 4, 9, 4, 7, 3],
pointPlacement: 'between',
point: {
events: {
mouseOver: function() {
setNextPointState(this, 'hover');
setArrowsState(this, 'green');
},
mouseOut: function() {
setNextPointState(this, '');
setArrowsState(this, 'rgba(255, 255, 255, 0.3)');
}
}
}
}, {
type: 'vector',
color: 'rgba(255, 255, 255, 0.3)',
rotationOrigin: 'start',
vectorLength: 50,
lineWidth: 4,
data: [
[0, 0, 10, 205],
[0, 0, 10, 250],
[0, 0, 10, 295],
[0, 0, 10, 340],
[0, 0, 10, 25],
[0, 0, 10, 70],
[0, 0, 10, 115],
[0, 0, 10, 160]
]
}]
function setNextPointState(point, state) {
var series = point.series,
category = point.category,
nextPointCategory = category - 180,
index,
nextPoint;
nextPointCategory = (nextPointCategory < 0) ? 360 + nextPointCategory : nextPointCategory;
nextPointCategory = (nextPointCategory > 360) ? nextPointCategory - 360 : nextPointCategory;
index = series.xData.indexOf(nextPointCategory);
if (index !== -1) {
nextPoint = series.data[index];
nextPoint.setState(state);
}
}
function setArrowsState(point, color) {
var series = point.series,
arrowSeries = series.chart.series[1],
category = point.category,
arrowDir = category + 180 + 25,
nextArrowDir = arrowDir + 180,
index,
nextIndex,
arrow,
nextArrow;
arrowDir = (arrowDir > 360) ? arrowDir - 360 : arrowDir;
nextArrowDir = (nextArrowDir > 360) ? nextArrowDir - 360 : nextArrowDir;
index = arrowSeries.directionData.indexOf(arrowDir);
nextIndex = arrowSeries.directionData.indexOf(nextArrowDir);
if (index !== -1 && nextIndex !== -1) {
arrow = arrowSeries.data[index];
nextArrow = arrowSeries.data[nextIndex];
arrow.update({
color: color
});
nextArrow.update({
color: color
});
}
}
API reference:
https://api.highcharts.com/highcharts/series.vector
https://api.highcharts.com/class-reference/Highcharts.Point#update
Demo:
https://jsfiddle.net/BlackLabel/Lgkd01q8/
You can use point events like mouseOver
and mouseOut
to get the actual hovering point and based on its category (in a polar chart it is column angle) calculate an opposite point category which allows you to get this point object and set hover state on it. When mouseOut
events occur set normal (empty string) state again using the same approach:
JS:
point: {
events: {
mouseOver: function() {
setNextPointState(this, 'hover');
},
mouseOut: function() {
setNextPointState(this, '');
}
}
}
function setNextPointState(point, state) {
var series = point.series,
category = point.category,
nextPointCategory = category - 180,
index,
nextPoint;
nextPointCategory = (nextPointCategory < 0) ? 360 + nextPointCategory : nextPointCategory;
nextPointCategory = (nextPointCategory > 360) ? nextPointCategory - 360 : nextPointCategory;
index = series.xData.indexOf(nextPointCategory);
if (index !== -1) {
nextPoint = series.data[index];
nextPoint.setState(state);
}
}
API reference:
https://api.highcharts.com/class-reference/Highcharts.Point#setState
Demo:
https://jsfiddle.net/BlackLabel/bn5wc80p/
And I have a question, how could as well add an arrow between both
two columns?
You can use vector series type. If you want to highlight arrows as well use the same approach as with columns. Check the demo and code posted below.
CSS:
.highcharts-vector-series {
pointer-events: none;
}
JS:
series: [{
type: 'column',
name: 'Column',
data: [8, 7, 3, 4, 9, 4, 7, 3],
pointPlacement: 'between',
point: {
events: {
mouseOver: function() {
setNextPointState(this, 'hover');
setArrowsState(this, 'green');
},
mouseOut: function() {
setNextPointState(this, '');
setArrowsState(this, 'rgba(255, 255, 255, 0.3)');
}
}
}
}, {
type: 'vector',
color: 'rgba(255, 255, 255, 0.3)',
rotationOrigin: 'start',
vectorLength: 50,
lineWidth: 4,
data: [
[0, 0, 10, 205],
[0, 0, 10, 250],
[0, 0, 10, 295],
[0, 0, 10, 340],
[0, 0, 10, 25],
[0, 0, 10, 70],
[0, 0, 10, 115],
[0, 0, 10, 160]
]
}]
function setNextPointState(point, state) {
var series = point.series,
category = point.category,
nextPointCategory = category - 180,
index,
nextPoint;
nextPointCategory = (nextPointCategory < 0) ? 360 + nextPointCategory : nextPointCategory;
nextPointCategory = (nextPointCategory > 360) ? nextPointCategory - 360 : nextPointCategory;
index = series.xData.indexOf(nextPointCategory);
if (index !== -1) {
nextPoint = series.data[index];
nextPoint.setState(state);
}
}
function setArrowsState(point, color) {
var series = point.series,
arrowSeries = series.chart.series[1],
category = point.category,
arrowDir = category + 180 + 25,
nextArrowDir = arrowDir + 180,
index,
nextIndex,
arrow,
nextArrow;
arrowDir = (arrowDir > 360) ? arrowDir - 360 : arrowDir;
nextArrowDir = (nextArrowDir > 360) ? nextArrowDir - 360 : nextArrowDir;
index = arrowSeries.directionData.indexOf(arrowDir);
nextIndex = arrowSeries.directionData.indexOf(nextArrowDir);
if (index !== -1 && nextIndex !== -1) {
arrow = arrowSeries.data[index];
nextArrow = arrowSeries.data[nextIndex];
arrow.update({
color: color
});
nextArrow.update({
color: color
});
}
}
API reference:
https://api.highcharts.com/highcharts/series.vector
https://api.highcharts.com/class-reference/Highcharts.Point#update
Demo:
https://jsfiddle.net/BlackLabel/Lgkd01q8/
answered Dec 29 '18 at 9:12


Wojciech ChmielWojciech Chmiel
1,285129
1,285129
Really impressive answer., Wojciech. Many thanks for your time; the answer solves the problem.
– Matías Fork
Dec 29 '18 at 19:56
How do you make the arrows work so neat with no 8, but 12 columns? I'm trying and it gets messy in the hover. Tried to set the degrees but no luck, jsfiddle.net/c28yhLd5
– Matías Fork
Dec 29 '18 at 20:38
i.imgur.com/AhlwUJU.png see the arrows? the hover also doesn't work. except one. strange..
– Matías Fork
Dec 29 '18 at 20:46
To make it works with 12 arrows you have to change degrees of each vector and modify thesetArrowsState
function to calculate arrows direction properly. I modified the function and now you can pass an arrow deviation as the third parameter (deviation is equal to 15 degrees for 12 columns). Demo: jsfiddle.net/fse3k84n.
– Wojciech Chmiel
Jan 3 at 7:18
add a comment |
Really impressive answer., Wojciech. Many thanks for your time; the answer solves the problem.
– Matías Fork
Dec 29 '18 at 19:56
How do you make the arrows work so neat with no 8, but 12 columns? I'm trying and it gets messy in the hover. Tried to set the degrees but no luck, jsfiddle.net/c28yhLd5
– Matías Fork
Dec 29 '18 at 20:38
i.imgur.com/AhlwUJU.png see the arrows? the hover also doesn't work. except one. strange..
– Matías Fork
Dec 29 '18 at 20:46
To make it works with 12 arrows you have to change degrees of each vector and modify thesetArrowsState
function to calculate arrows direction properly. I modified the function and now you can pass an arrow deviation as the third parameter (deviation is equal to 15 degrees for 12 columns). Demo: jsfiddle.net/fse3k84n.
– Wojciech Chmiel
Jan 3 at 7:18
Really impressive answer., Wojciech. Many thanks for your time; the answer solves the problem.
– Matías Fork
Dec 29 '18 at 19:56
Really impressive answer., Wojciech. Many thanks for your time; the answer solves the problem.
– Matías Fork
Dec 29 '18 at 19:56
How do you make the arrows work so neat with no 8, but 12 columns? I'm trying and it gets messy in the hover. Tried to set the degrees but no luck, jsfiddle.net/c28yhLd5
– Matías Fork
Dec 29 '18 at 20:38
How do you make the arrows work so neat with no 8, but 12 columns? I'm trying and it gets messy in the hover. Tried to set the degrees but no luck, jsfiddle.net/c28yhLd5
– Matías Fork
Dec 29 '18 at 20:38
i.imgur.com/AhlwUJU.png see the arrows? the hover also doesn't work. except one. strange..
– Matías Fork
Dec 29 '18 at 20:46
i.imgur.com/AhlwUJU.png see the arrows? the hover also doesn't work. except one. strange..
– Matías Fork
Dec 29 '18 at 20:46
To make it works with 12 arrows you have to change degrees of each vector and modify the
setArrowsState
function to calculate arrows direction properly. I modified the function and now you can pass an arrow deviation as the third parameter (deviation is equal to 15 degrees for 12 columns). Demo: jsfiddle.net/fse3k84n.– Wojciech Chmiel
Jan 3 at 7:18
To make it works with 12 arrows you have to change degrees of each vector and modify the
setArrowsState
function to calculate arrows direction properly. I modified the function and now you can pass an arrow deviation as the third parameter (deviation is equal to 15 degrees for 12 columns). Demo: jsfiddle.net/fse3k84n.– Wojciech Chmiel
Jan 3 at 7:18
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53964478%2fis-there-a-function-to-highlight-another-stat-point-column-while-hovering-elemen%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
MLRwuoqf6DT1eLpdoPJooFAvSl