I’m trying to synchronize a columnrange chart (stacked & inverted) and a line chart using Highcharts. But I faced several problems.
-
Since columnrange is displayed by specifying low and high, when hovering, the entire range is considered hovered for that item, and thus the x-value of the hovered position within the range cannot be obtained. This seems to prevent sharing information about other projects for the same x-value (date). Is there a way to fetch information about other projects for the same date when hovering within the range area?
-
Since horizontal column range requires applying inverted, it seems difficult to synchronize with a line chart. Can someone help me to make the synchronization work properly? When applying the handleMouseMove function, the hover effect on columnrange chart is not applied correctly.
-
The setting for synchronizing zoom using afterSetExtremes is also not working. This also seems to be because proper consideration for inverted wasn’t made.
Unlike the line chart, which has data for each tick on the x-axis, the columnrange chart is inverted and holds data for ‘low’ and ‘high’ values. This makes it challenging to specify hover interactions precisely at the midpoint between ‘low’ and ‘high’. Please advise on how to resolve this.
This is my code: https://stackblitz.com/edit/react-jrdac6?file=src%2FTotalPrjCapacity.js,data%2Fdummy.js,data%2FchartInitialOptions.js
강예진 is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.