How to get the axis value with respect to the cross hair in highcharts
I'm working with x-range type of highcharts for a timeline, is there any way to get the axis value where the cross hair / mouse is hovered.
in this pic the cross hair is between a particular time duration 
but the tooltip is showing the points, is there any way to show the current hovered axis point on the tooltip ?
i have added code link is on the comment, thanks in advance
javascript highcharts gantt-chart
edited Nov 28 '18 at 8:19
Sven Hohenstein
66.4k12100132
asked Nov 28 '18 at 6:47
VickeyVickey
168214
add a comment |
I'm working with x-range type of highcharts for a timeline, is there any way to get the axis value where the cross hair / mouse is hovered.
in this pic the cross hair is between a particular time duration but the tooltip is showing the points, is there any way to show the current hovered axis point on the tooltip ?
i have added code link is on the comment, thanks in advance
javascript highcharts gantt-chart
edited Nov 28 '18 at 8:19
Sven Hohenstein
66.4k12100132
asked Nov 28 '18 at 6:47
VickeyVickey
168214
jsfiddle.net/F4e2Y/189 code link
– Vickey
Nov 28 '18 at 6:47
add a comment |
I'm working with x-range type of highcharts for a timeline, is there any way to get the axis value where the cross hair / mouse is hovered.
in this pic the cross hair is between a particular time duration but the tooltip is showing the points, is there any way to show the current hovered axis point on the tooltip ?
i have added code link is on the comment, thanks in advance
javascript highcharts gantt-chart
edited Nov 28 '18 at 8:19
Sven Hohenstein
66.4k12100132
asked Nov 28 '18 at 6:47
VickeyVickey
168214
I'm working with x-range type of highcharts for a timeline, is there any way to get the axis value where the cross hair / mouse is hovered.
in this pic the cross hair is between a particular time duration but the tooltip is showing the points, is there any way to show the current hovered axis point on the tooltip ?
i have added code link is on the comment, thanks in advance
javascript highcharts gantt-chart
javascript highcharts gantt-chart
edited Nov 28 '18 at 8:19
Sven Hohenstein
66.4k12100132
asked Nov 28 '18 at 6:47
VickeyVickey
168214
edited Nov 28 '18 at 8:19
Sven Hohenstein
66.4k12100132
asked Nov 28 '18 at 6:47
VickeyVickey
168214
edited Nov 28 '18 at 8:19
Sven Hohenstein
66.4k12100132
edited Nov 28 '18 at 8:19
Sven Hohenstein
66.4k12100132
edited Nov 28 '18 at 8:19
Sven Hohenstein
66.4k12100132
66.4k12100132
asked Nov 28 '18 at 6:47
VickeyVickey
168214
asked Nov 28 '18 at 6:47
VickeyVickey
168214
asked Nov 28 '18 at 6:47
VickeyVickey
168214
168214
jsfiddle.net/F4e2Y/189 code link
– Vickey
Nov 28 '18 at 6:47
add a comment |
jsfiddle.net/F4e2Y/189 code link
– Vickey
Nov 28 '18 at 6:47
jsfiddle.net/F4e2Y/189 code link
– Vickey
Nov 28 '18 at 6:47
jsfiddle.net/F4e2Y/189 code link
– Vickey
Nov 28 '18 at 6:47
add a comment |
2 Answers
2
active
oldest
votes
Highcharts tooltip is based on series points and changing the way it works would require a lot of customization. To workaround, you can add transparent dummy line series and dispable enableMouseTracking option in xrange series. Please look at the example below:
events: {
load: function() {
var newSeries = this.series[1],
min = this.xAxis[0].min,
max = this.xAxis[0].max,
data = ,
i,
time = 60 * 1000;
for (i = min; i < max; i += time) {
data.push({
x: i,
y: 0
})
}
newSeries.setData(data);
}
}
Live demo: http://jsfiddle.net/BlackLabel/aekvnf4d/
answered Nov 29 '18 at 15:45
ppotaczekppotaczek
6,4261211
thank you @ppotaczek , but is there any way to access this.series[0].data,{ x: 1539001765000, x2: 1539003025000, y: 0, }when i console 'this' i can't find these values, i'm seeing only the values which you marked on the line type graph
– Vickey
Nov 30 '18 at 7:53
Hi Vigneshwaran N, you can access to the first series data by:this.series.chart.series[0].points, example: jsfiddle.net/BlackLabel/t8kmxzj3
– ppotaczek
Nov 30 '18 at 9:30
hi @ppotaczek , yeah but it's display the entire points, consider if a click is made on the blue bar ,is there any way to get that x,x2 alone where the user clicked jsfiddle.net/karnan796/t8kmxzj3/1 i'm also looking for some ways to get that, if you have any ideas please suggest me, thank you so much !
– Vickey
Dec 1 '18 at 3:48
is there any way to add hover effect on that blue bar if you hover a particular time in line , both the line & x-range are intersect can't apply click event for that xrange, can anyone have any idea?
– Vickey
Dec 3 '18 at 9:30
Hi Vigneshwaran N, There is a problem (probably a bug) withhoverstate inxrangeseries type. As a workaround I used asynchronous code, please check this example: jsfiddle.net/BlackLabel/5rwat9z2
– ppotaczek
Dec 3 '18 at 13:31
|
show 1 more comment
Finally found how to find the exact position , need to use highstock for that , thanks for @ppotaczek because of his answer which helped me to find some exact solution for this is in comment ,( sorry dunno how to link the jsfiddle link, shows error for indent spacing when submitting the answer)
answered Dec 8 '18 at 20:38
VickeyVickey
168214
updated link: jsfiddle.net/karnan796/vo1t4g2z/1
– Vickey
Dec 8 '18 at 20:38
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%2f53513648%2fhow-to-get-the-axis-value-with-respect-to-the-cross-hair-in-highcharts%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
Highcharts tooltip is based on series points and changing the way it works would require a lot of customization. To workaround, you can add transparent dummy line series and dispable enableMouseTracking option in xrange series. Please look at the example below:
events: {
load: function() {
var newSeries = this.series[1],
min = this.xAxis[0].min,
max = this.xAxis[0].max,
data = ,
i,
time = 60 * 1000;
for (i = min; i < max; i += time) {
data.push({
x: i,
y: 0
})
}
newSeries.setData(data);
}
}
Live demo: http://jsfiddle.net/BlackLabel/aekvnf4d/
answered Nov 29 '18 at 15:45
ppotaczekppotaczek
6,4261211
thank you @ppotaczek , but is there any way to access this.series[0].data,{ x: 1539001765000, x2: 1539003025000, y: 0, }when i console 'this' i can't find these values, i'm seeing only the values which you marked on the line type graph
– Vickey
Nov 30 '18 at 7:53
Hi Vigneshwaran N, you can access to the first series data by:this.series.chart.series[0].points, example: jsfiddle.net/BlackLabel/t8kmxzj3
– ppotaczek
Nov 30 '18 at 9:30
hi @ppotaczek , yeah but it's display the entire points, consider if a click is made on the blue bar ,is there any way to get that x,x2 alone where the user clicked jsfiddle.net/karnan796/t8kmxzj3/1 i'm also looking for some ways to get that, if you have any ideas please suggest me, thank you so much !
– Vickey
Dec 1 '18 at 3:48
is there any way to add hover effect on that blue bar if you hover a particular time in line , both the line & x-range are intersect can't apply click event for that xrange, can anyone have any idea?
– Vickey
Dec 3 '18 at 9:30
Hi Vigneshwaran N, There is a problem (probably a bug) withhoverstate inxrangeseries type. As a workaround I used asynchronous code, please check this example: jsfiddle.net/BlackLabel/5rwat9z2
– ppotaczek
Dec 3 '18 at 13:31
|
show 1 more comment
Highcharts tooltip is based on series points and changing the way it works would require a lot of customization. To workaround, you can add transparent dummy line series and dispable enableMouseTracking option in xrange series. Please look at the example below:
events: {
load: function() {
var newSeries = this.series[1],
min = this.xAxis[0].min,
max = this.xAxis[0].max,
data = ,
i,
time = 60 * 1000;
for (i = min; i < max; i += time) {
data.push({
x: i,
y: 0
})
}
newSeries.setData(data);
}
}
Live demo: http://jsfiddle.net/BlackLabel/aekvnf4d/
answered Nov 29 '18 at 15:45
ppotaczekppotaczek
6,4261211
thank you @ppotaczek , but is there any way to access this.series[0].data,{ x: 1539001765000, x2: 1539003025000, y: 0, }when i console 'this' i can't find these values, i'm seeing only the values which you marked on the line type graph
– Vickey
Nov 30 '18 at 7:53
Hi Vigneshwaran N, you can access to the first series data by:this.series.chart.series[0].points, example: jsfiddle.net/BlackLabel/t8kmxzj3
– ppotaczek
Nov 30 '18 at 9:30
hi @ppotaczek , yeah but it's display the entire points, consider if a click is made on the blue bar ,is there any way to get that x,x2 alone where the user clicked jsfiddle.net/karnan796/t8kmxzj3/1 i'm also looking for some ways to get that, if you have any ideas please suggest me, thank you so much !
– Vickey
Dec 1 '18 at 3:48
is there any way to add hover effect on that blue bar if you hover a particular time in line , both the line & x-range are intersect can't apply click event for that xrange, can anyone have any idea?
– Vickey
Dec 3 '18 at 9:30
Hi Vigneshwaran N, There is a problem (probably a bug) withhoverstate inxrangeseries type. As a workaround I used asynchronous code, please check this example: jsfiddle.net/BlackLabel/5rwat9z2
– ppotaczek
Dec 3 '18 at 13:31
|
show 1 more comment
Highcharts tooltip is based on series points and changing the way it works would require a lot of customization. To workaround, you can add transparent dummy line series and dispable enableMouseTracking option in xrange series. Please look at the example below:
events: {
load: function() {
var newSeries = this.series[1],
min = this.xAxis[0].min,
max = this.xAxis[0].max,
data = ,
i,
time = 60 * 1000;
for (i = min; i < max; i += time) {
data.push({
x: i,
y: 0
})
}
newSeries.setData(data);
}
}
Live demo: http://jsfiddle.net/BlackLabel/aekvnf4d/
answered Nov 29 '18 at 15:45
ppotaczekppotaczek
6,4261211
Highcharts tooltip is based on series points and changing the way it works would require a lot of customization. To workaround, you can add transparent dummy line series and dispable enableMouseTracking option in xrange series. Please look at the example below:
events: {
load: function() {
var newSeries = this.series[1],
min = this.xAxis[0].min,
max = this.xAxis[0].max,
data = ,
i,
time = 60 * 1000;
for (i = min; i < max; i += time) {
data.push({
x: i,
y: 0
})
}
newSeries.setData(data);
}
}
Live demo: http://jsfiddle.net/BlackLabel/aekvnf4d/
answered Nov 29 '18 at 15:45
ppotaczekppotaczek
6,4261211
answered Nov 29 '18 at 15:45
ppotaczekppotaczek
6,4261211
answered Nov 29 '18 at 15:45
ppotaczekppotaczek
6,4261211
answered Nov 29 '18 at 15:45
ppotaczekppotaczek
6,4261211
6,4261211
thank you @ppotaczek , but is there any way to access this.series[0].data,{ x: 1539001765000, x2: 1539003025000, y: 0, }when i console 'this' i can't find these values, i'm seeing only the values which you marked on the line type graph
– Vickey
Nov 30 '18 at 7:53
Hi Vigneshwaran N, you can access to the first series data by:this.series.chart.series[0].points, example: jsfiddle.net/BlackLabel/t8kmxzj3
– ppotaczek
Nov 30 '18 at 9:30
hi @ppotaczek , yeah but it's display the entire points, consider if a click is made on the blue bar ,is there any way to get that x,x2 alone where the user clicked jsfiddle.net/karnan796/t8kmxzj3/1 i'm also looking for some ways to get that, if you have any ideas please suggest me, thank you so much !
– Vickey
Dec 1 '18 at 3:48
is there any way to add hover effect on that blue bar if you hover a particular time in line , both the line & x-range are intersect can't apply click event for that xrange, can anyone have any idea?
– Vickey
Dec 3 '18 at 9:30
Hi Vigneshwaran N, There is a problem (probably a bug) withhoverstate inxrangeseries type. As a workaround I used asynchronous code, please check this example: jsfiddle.net/BlackLabel/5rwat9z2
– ppotaczek
Dec 3 '18 at 13:31
|
show 1 more comment
thank you @ppotaczek , but is there any way to access this.series[0].data,{ x: 1539001765000, x2: 1539003025000, y: 0, }when i console 'this' i can't find these values, i'm seeing only the values which you marked on the line type graph
– Vickey
Nov 30 '18 at 7:53
Hi Vigneshwaran N, you can access to the first series data by:this.series.chart.series[0].points, example: jsfiddle.net/BlackLabel/t8kmxzj3
– ppotaczek
Nov 30 '18 at 9:30
hi @ppotaczek , yeah but it's display the entire points, consider if a click is made on the blue bar ,is there any way to get that x,x2 alone where the user clicked jsfiddle.net/karnan796/t8kmxzj3/1 i'm also looking for some ways to get that, if you have any ideas please suggest me, thank you so much !
– Vickey
Dec 1 '18 at 3:48
is there any way to add hover effect on that blue bar if you hover a particular time in line , both the line & x-range are intersect can't apply click event for that xrange, can anyone have any idea?
– Vickey
Dec 3 '18 at 9:30
Hi Vigneshwaran N, There is a problem (probably a bug) withhoverstate inxrangeseries type. As a workaround I used asynchronous code, please check this example: jsfiddle.net/BlackLabel/5rwat9z2
– ppotaczek
Dec 3 '18 at 13:31
thank you @ppotaczek , but is there any way to access this.series[0].data,
{ x: 1539001765000, x2: 1539003025000, y: 0, } when i console 'this' i can't find these values, i'm seeing only the values which you marked on the line type graph– Vickey
Nov 30 '18 at 7:53
thank you @ppotaczek , but is there any way to access this.series[0].data,
{ x: 1539001765000, x2: 1539003025000, y: 0, } when i console 'this' i can't find these values, i'm seeing only the values which you marked on the line type graph– Vickey
Nov 30 '18 at 7:53
Hi Vigneshwaran N, you can access to the first series data by:
this.series.chart.series[0].points, example: jsfiddle.net/BlackLabel/t8kmxzj3– ppotaczek
Nov 30 '18 at 9:30
Hi Vigneshwaran N, you can access to the first series data by:
this.series.chart.series[0].points, example: jsfiddle.net/BlackLabel/t8kmxzj3– ppotaczek
Nov 30 '18 at 9:30
hi @ppotaczek , yeah but it's display the entire points, consider if a click is made on the blue bar ,is there any way to get that x,x2 alone where the user clicked jsfiddle.net/karnan796/t8kmxzj3/1 i'm also looking for some ways to get that, if you have any ideas please suggest me, thank you so much !
– Vickey
Dec 1 '18 at 3:48
hi @ppotaczek , yeah but it's display the entire points, consider if a click is made on the blue bar ,is there any way to get that x,x2 alone where the user clicked jsfiddle.net/karnan796/t8kmxzj3/1 i'm also looking for some ways to get that, if you have any ideas please suggest me, thank you so much !
– Vickey
Dec 1 '18 at 3:48
is there any way to add hover effect on that blue bar if you hover a particular time in line , both the line & x-range are intersect can't apply click event for that xrange, can anyone have any idea?
– Vickey
Dec 3 '18 at 9:30
is there any way to add hover effect on that blue bar if you hover a particular time in line , both the line & x-range are intersect can't apply click event for that xrange, can anyone have any idea?
– Vickey
Dec 3 '18 at 9:30
Hi Vigneshwaran N, There is a problem (probably a bug) with
hover state in xrange series type. As a workaround I used asynchronous code, please check this example: jsfiddle.net/BlackLabel/5rwat9z2– ppotaczek
Dec 3 '18 at 13:31
Hi Vigneshwaran N, There is a problem (probably a bug) with
hover state in xrange series type. As a workaround I used asynchronous code, please check this example: jsfiddle.net/BlackLabel/5rwat9z2– ppotaczek
Dec 3 '18 at 13:31
|
show 1 more comment
Finally found how to find the exact position , need to use highstock for that , thanks for @ppotaczek because of his answer which helped me to find some exact solution for this is in comment ,( sorry dunno how to link the jsfiddle link, shows error for indent spacing when submitting the answer)
answered Dec 8 '18 at 20:38
VickeyVickey
168214
updated link: jsfiddle.net/karnan796/vo1t4g2z/1
– Vickey
Dec 8 '18 at 20:38
add a comment |
Finally found how to find the exact position , need to use highstock for that , thanks for @ppotaczek because of his answer which helped me to find some exact solution for this is in comment ,( sorry dunno how to link the jsfiddle link, shows error for indent spacing when submitting the answer)
answered Dec 8 '18 at 20:38
VickeyVickey
168214
updated link: jsfiddle.net/karnan796/vo1t4g2z/1
– Vickey
Dec 8 '18 at 20:38
add a comment |
Finally found how to find the exact position , need to use highstock for that , thanks for @ppotaczek because of his answer which helped me to find some exact solution for this is in comment ,( sorry dunno how to link the jsfiddle link, shows error for indent spacing when submitting the answer)
answered Dec 8 '18 at 20:38
VickeyVickey
168214
Finally found how to find the exact position , need to use highstock for that , thanks for @ppotaczek because of his answer which helped me to find some exact solution for this is in comment ,( sorry dunno how to link the jsfiddle link, shows error for indent spacing when submitting the answer)
answered Dec 8 '18 at 20:38
VickeyVickey
168214
answered Dec 8 '18 at 20:38
VickeyVickey
168214
answered Dec 8 '18 at 20:38
VickeyVickey
168214
answered Dec 8 '18 at 20:38
VickeyVickey
168214
168214
updated link: jsfiddle.net/karnan796/vo1t4g2z/1
– Vickey
Dec 8 '18 at 20:38
add a comment |
updated link: jsfiddle.net/karnan796/vo1t4g2z/1
– Vickey
Dec 8 '18 at 20:38
updated link: jsfiddle.net/karnan796/vo1t4g2z/1
– Vickey
Dec 8 '18 at 20:38
updated link: jsfiddle.net/karnan796/vo1t4g2z/1
– Vickey
Dec 8 '18 at 20:38
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%2f53513648%2fhow-to-get-the-axis-value-with-respect-to-the-cross-hair-in-highcharts%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
jsfiddle.net/F4e2Y/189 code link
– Vickey
Nov 28 '18 at 6:47