Hi, we have a requirement to allow users to navigate to/interact with null data points in our spline charts. The null data points should receive a visual focus at the xAxisBase (bottom of chart) with keyboard and pointer navigation, and show the corresponding tooltip for them, however no visual point should be plotted for them initially. Another member on our team previously submitted a ticket to figure out how we could navigate and give focus to these null data points [https://support.highcharts.com/helpdesk/tickets/17000
], however I cannot view the ticket with my login.
All that to say, we figured out a solution at the time that worked for us. To accomplish this, we implemented logic to make the null data points focusable, etc. all within the render event function of the chart options, and finished off the render event function with 'this.redraw = true'. This solved it for us and everything was good for a while. We are now receiving an error "Uncaught TypeError: r.redraw is not a function" when users toggle the legend series items. The chart seems to continue to work as intended but, we can't have these errors in the console. To combat this, I've tried removing the reference to 'this.redraw = true' at the end of the render event logic. However, without the redraw, on subsequent renders of the chart, the null data points logic is not working as intended. After toggling the legend item, the null data points no longer can receive focus and some erroneous lines are visually drawn to the upper right corner of the chart (see attached before & after screenshots). I've figured out how to make sure the null data points maintain their focus-ability with each re-render, but I cannot resolve the issue of the lines being drawn to the upper right corner on re-renders for null data points.
Here is a fiddle that resembles our code as close as I can get it. I'm unable to reproduce the lines issue in this fiddle but, this is almost exactly the same as the code we have in our charts.
Have you seen anything like this before? Is there a way to get the 'this.redraw = true' working again without error? I know that out of the box, Highcharts doesn't support null data point focus and navigation but, any help you can provide to try to address this would be appreciated!
Note: we are using Highcharts for React and so, only React or JS based solutions are preferred. I've attached a few screenshots for reference also. Thanks!