React highchart: Shared tooltip in same and different chart
up vote
0
down vote
favorite
I am using react-highchart for a project. And displaying two charts:
1) Line Chart with 2 series data, it will render two lines on same chart.
2) Bar or Column Chart.
Now when I hover over a point it should enable tooltip on both lines in 1st chart and in column chart as well. X-axis is datetime.
It should active point on both lines like this:
In react-highchart, I have used shared: true attribute, but it is not making both lines active.
tooltip:
enabled: true,
useHTML: true,
shared: true,
backgroundColor: 'rgba(255,255,255,1)',
borderRadius: 3,
shape: 'rectangle'
And is there a way to make another chart's tooltip active as well?
javascript reactjs charts highcharts react-highcharts
asked yesterday
Rahul Sagore
6961028
add a comment |
up vote
0
down vote
favorite
I am using react-highchart for a project. And displaying two charts:
1) Line Chart with 2 series data, it will render two lines on same chart.
2) Bar or Column Chart.
Now when I hover over a point it should enable tooltip on both lines in 1st chart and in column chart as well. X-axis is datetime.
It should active point on both lines like this:
In react-highchart, I have used shared: true attribute, but it is not making both lines active.
tooltip:
enabled: true,
useHTML: true,
shared: true,
backgroundColor: 'rgba(255,255,255,1)',
borderRadius: 3,
shape: 'rectangle'
And is there a way to make another chart's tooltip active as well?
javascript reactjs charts highcharts react-highcharts
asked yesterday
Rahul Sagore
6961028
It requires synchronized charts, check this example highcharts.com/demo/synchronized-charts.
– Wojciech Chmiel
yesterday
add a comment |
up vote
0
down vote
favorite
up vote
0
down vote
favorite
I am using react-highchart for a project. And displaying two charts:
1) Line Chart with 2 series data, it will render two lines on same chart.
2) Bar or Column Chart.
Now when I hover over a point it should enable tooltip on both lines in 1st chart and in column chart as well. X-axis is datetime.
It should active point on both lines like this:
In react-highchart, I have used shared: true attribute, but it is not making both lines active.
tooltip:
enabled: true,
useHTML: true,
shared: true,
backgroundColor: 'rgba(255,255,255,1)',
borderRadius: 3,
shape: 'rectangle'
And is there a way to make another chart's tooltip active as well?
javascript reactjs charts highcharts react-highcharts
asked yesterday
Rahul Sagore
6961028
I am using react-highchart for a project. And displaying two charts:
1) Line Chart with 2 series data, it will render two lines on same chart.
2) Bar or Column Chart.
Now when I hover over a point it should enable tooltip on both lines in 1st chart and in column chart as well. X-axis is datetime.
It should active point on both lines like this:
In react-highchart, I have used shared: true attribute, but it is not making both lines active.
tooltip:
enabled: true,
useHTML: true,
shared: true,
backgroundColor: 'rgba(255,255,255,1)',
borderRadius: 3,
shape: 'rectangle'
And is there a way to make another chart's tooltip active as well?
javascript reactjs charts highcharts react-highcharts
javascript reactjs charts highcharts react-highcharts
asked yesterday
Rahul Sagore
6961028
asked yesterday
Rahul Sagore
6961028
asked yesterday
Rahul Sagore
6961028
asked yesterday
Rahul Sagore
6961028
asked yesterday
Rahul Sagore
6961028
6961028
It requires synchronized charts, check this example highcharts.com/demo/synchronized-charts.
– Wojciech Chmiel
yesterday
add a comment |
It requires synchronized charts, check this example highcharts.com/demo/synchronized-charts.
– Wojciech Chmiel
yesterday
It requires synchronized charts, check this example highcharts.com/demo/synchronized-charts.
– Wojciech Chmiel
yesterday
It requires synchronized charts, check this example highcharts.com/demo/synchronized-charts.
– Wojciech Chmiel
yesterday
add a comment |
active
oldest
votes
active
oldest
votes
active
oldest
votes
active
oldest
votes
active
oldest
votes
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
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53205211%2freact-highchart-shared-tooltip-in-same-and-different-chart%23new-answer', 'question_page');
);
Post as a guest
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
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
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
It requires synchronized charts, check this example highcharts.com/demo/synchronized-charts.
– Wojciech Chmiel
yesterday