asked on March 24, 2022
We are trying to use highchart and flexmonster on the same page(View) but we are facing some issue were at a time only one is getting populated. we have done functionality in such way that on click of highchart. we are showing flexmonster grid for that given highchart. Please lets know how this can be resolved.
⋅ March 25, 2022
Hello, Nagaraj!
Thank you for raising a ticket.
We suggest using the styles below, to achieve the described functionality:
#pivot-container {
z-index: 2;
}
#pivot-container-2 {
position: absolute !important;
top: 0px;
z-index: 1;
}
The position: absolute and top: 0px properties are needed to place the second pivot at the same position as the first one. Next you can use the z-index property to place one pivot another.
Then you can use an approach similar to the code below to show the corresponding pivot by clicking on the chart:
document.getElementById('highcharts-container').addEventListener('click', () => {
document.getElementById('pivot-container').style["z-index"] = 1;
document.getElementById('pivot-container-2').style["z-index"] = 2;
});
Please check this example containing the implementation of this logic: https://jsfiddle.net/flexmonster/k8uftx5o/.
Please let us know if such an approach would work for your case.
Best Regards,
Maksym