Error navigating to null datapoints with chart.redraw

[randerson]

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.

https://jsfiddle.net/5d8tpxcj/


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!

[dawid.d]

Hello,

Thanks for contacting us with your question!

The chart.redraw is a method that allows you to redraw a chart and is called in various places in the core. The moment you redefine it - like in this case - by replacing its definition with the 'true' value, you will get this error every time core tries to call it.

If you want to call chart.redraw() in the render callback, it is better to call chart.render() to prevent the function from looping. Of course, you can also use a flag.

Unfortunately, I don't know the exact context, because even though we work as one support team, we don't change support channels, so if the thread was run on the helpdesk, I think they would be able to refer to it better there.

​If you have further inquiries, you may reach out to me at any time.
Best regards!

[randerson]

Hi dawid.d,

That makes a lot of sense re: the redraw logic! I've tried changing to use chart.render() or chart.redraw(false) but, that just makes the issue of the errant lines being drawn occur on the first render, rather than just with each subsequent render. So, somehow we ultimately need to stop the issue of lines being drawn to the null data points with our logic. It seems like the code in our logic that indirectly causes the lines to be drawn is in the render callback where we set the null point's isNull value to be false (p.isNull = false;). This allows us to focus the null point and have it behave like the other valid points without having a visual point drawn. However, it also seems to be causing these lines to be drawn. When I comment out this p.isNull = false;, the false lines don't get drawn. However, I cannot then focus, etc. the null points as we need to.

Do you have any ideas for how we can make these null data points behave as we need them but not have the false lines drawn (as seen in my after screenshot)?

[michal.f]

Hi,

Wouldn't it be better to add a linked scatter series with null points for all series that have 'null' points: https://jsfiddle.net/BlackLabel/4d8tboze/?

Let me know if this solution suits your case

[randerson]

Thanks for the reply, michal.f!

This seems to have potential. However, a couple things:

1. I've added the accessibility module to your example (see updated fiddle below) so that we can keyboard navigate the chart. If you notice, the null data points are not navigable inline with the series they are linked to; only after navigating through all of the other series can we then navigate through the null data points. Is there any way to make them navigable in the order they appear within the series they belong to? (i.e., keyboard navigate through each of the 'a' series points in your example, followed by the 'a' null data points, then all the 'b' series points, then the 'b null data points, etc.). Keep in mind that null data points don't always fall at the end/beginning of a series. They can be intermixed within the series data also, and should be navigable as such.

https://jsfiddle.net/sfuv13xk/

2. In your example, the null data points are visible at all times to sighted users, granted in a different color and shape. Can we have the null data points not be visible at all unless focused (like in my original example here) and again not visible after focus is removed from them? Additionally, can each null data point have the same shape and fill color as the series they are linked to, with a more opaque surrounding circle/shape to indicate focus (see attached screenshot from our existing application for example of this - 'Line_chart-Keyboard_Focus_Null_Data_Point.png')?

3. Something to keep in mind, we need to make sure screen readers include the null data points when announcing the chart/series info while navigating. I.e. it should announce line 'a' in your example as: "line 1 of 3, with 4 data points". I have yet to test your solution with a screen reader, but wanted to mention that incase it needs consideration on your end.

Any help with achieving all this is appreciated!

[dawid.d]

I went back to the first solution and after a long attempt, I managed to come up with a rather tricky solution. The problem was probably due to the order in which the methods were executed, null being checked multiple times in multiple places.

Demo: https://jsfiddle.net/BlackLabel/25gptxbd/

I hope it meets the requirements now.
Best regards!

[randerson]

Thanks! Unfortunately, the issue of the errant lines being drawn is still present in this latest solution you provided me (see screenshot). With this solution, the lines are drawn with every render of the chart, regardless if I toggle a legend item or not. Unfortunately, as I mentioned in my first post, I am unable to recreate the lines issue in the online sandbox. Could it be due to the fact that we are using the React version of Highcharts? Could that be playing a role here? Any further ideas to solve this?

[dawid.d]

Oh, right. I have checked all main versions of Highcharts and reproduced the demo on React, but I am unable to see this problem on my side. It seems to me that this problem is caused by something in your code that you haven't shared.

React Demo: https://codesandbox.io/s/highcharts-rea ... =/demo.jsx

Is there anything else you could show to better identify the source of the problem?

[randerson]

Hi dawid.d,

I was able to reproduce the issue using your react sandbox just by including the accessibility module and setting the dependencies to match the versions we are using:

https://codesandbox.io/s/highcharts-rea ... =/demo.jsx

Additionally, our implementation is using functional components with hooks in react, so I've also put together a version of your react sandbox using functional components, in case that influences the solution you can provide:

https://codesandbox.io/s/highcharts-rea ... =/demo.jsx




Notice when you toggle the legend items, the lines are drawn to the upper right corner for series that have null data points. My suspicion here is that something in the dependencies may be an issue.

[randerson]

I notice in the sandbox that if I update Highcharts dependency to latest (11.1.0), the invalid lines issue goes away. However, you can notice that the valid lines still get curved as though the lines are getting drawn to the next points but, the lines themselves aren't drawn at least. Is there a way to not make these lines get curved after toggling legend item?

[dawid.d]

Okay, there is a third way - deep intervention in the core and changing behavior when null points occur. I have prepared a demo in jsfiddle that implements something like this. I tried to mark in the comments places that are particularly important. Please let me know if something like this is closer to your expectations.

Demo: https://jsfiddle.net/BlackLabel/9w32emns/

[randerson]

Thanks, dawid.d!

Would this change be able to be applied on specific individual charts in our application? Or would this cause a change in behavior for all our charts? Our application is rather large with many different teams working on different areas of it, so a global change may not be ok by some other teams, unless there is an easy way to enable/disable it.

[dawid.d]

Hi,

You can add a custom option for a chart, which is disabled by default, and turning it on applies this functionality. For example:

Code: Select all

Highcharts.chart('container', {
    chart: {
        custom: {
            showNullPoints: true
        }
    },
    ...
};

Demo: https://jsfiddle.net/BlackLabel/uq4gcxf2/

But you must remember that overwriting entire core methods for a long time can be unstable, because if they are changed in new versions of Highcharts, they may become outdated. This will require possible manual updates to these methods. To make it work stably, you can ask to add this functionality as a feature on our official GitHub, here: https://github.com/highcharts/highchart ... new/choose

Best regards!

[randerson]

Thanks, dawid.d!

With that in mind, we are not comfortable with the likely need for manual updates whenever new versions cause the overwritten core methods to become outdated. So, we are attempting to move forward solely with updating our Highcharts version to 11.1.0 and will live with the curved lines for the time being. I'll also put in a feature request as you have suggested.

However, in the meantime I have noticed an issue with just updating to 11.1.0. It seems now that, while the null data points will be keyboard accessible and the errant lines will no longer be drawn for the null data points, the null data points are not being announced by the screen reader. Notice in my updated demo below and the attached screenshot, when navigating in the data points of the chart while using NVDA, nothing is announced for the null points. In our previous implementations (using Highcharts version 10.3.3 and older), the null points would announce in the same fashion as the valid points. Do you have any suggestion for getting these null points to announce?

Note: We set the point description for screen readers with 'accessibility.point.descriptionFormatter'. I've tried including the 'accessibility.point.describeNull = true' property but, no luck with that either. I'm not sure what has changed between version 10.3.3 and 11.1.0 but, the null points are no longer being announced.


https://codesandbox.io/s/highcharts-rea ... =/demo.jsx

[dawid.d]

Hello,

Sorry for the delay, but I had a strange problem with the functioning of the forum, which I think has already been solved.

Your issue is problematic mainly due to the need to ensure proper accessibility in the case of this very custom change. For this reason, I would stick to the solution of overwriting parts of the functions in core. I don't know if I can do anything more on my part. The solutions we propose on the forum are more of a guide and presentation of possibilities, and custom, stable solutions can be achieved through a feature request (if the development team decides on such an implementation). But if you need a version stable custom implementation, you can contact our partner Black Label to help you with it.

Best regards!