Dynamically hiding points doesnt work for areaspline

[m3lis]

Hello,

Im trying to hide chart points dynamically using point.update. My code is as follows:

Code: Select all

          
          events: {
            legendItemClick: function (e: any) {
              if (e.target.chart.series.length) {
                e.target.chart.series[0].data.forEach((point: any) => {
                  if (point.x > localDate) {
                    point.update({ visible: !e.target.visible }, false, false);
                  }
                });
              }
            },
          },
          

For the column chart it works, for the areaspline it partially works. How to fix this?

See the issue in this video:

https://streamable.com/r7h49n

[jakub.s]

Hi @m3lis,

Thanks for the question!

From the short code snippet that you've shared, this approach seems correct. I've created a JSFiddle to test this, but everything seems to be working as expected.

You can use the point.update method to update the visibility of a point, or you can use point.remove to remove it completely.

Both of these approaches work here: https://jsfiddle.net/6aL39csp/

API:
- https://api.highcharts.com/class-refere ... s#addPoint
- https://api.highcharts.com/class-refere ... int#remove
- https://api.highcharts.com/class-refere ... int#update

In case that's still an issue, please create a minimal reproducible example - only then will I be able to investigate this problem further.

Best regards!

[m3lis]

Thank you for the response and fiddle.

If you change it into an areaspline and hide the last point you can reproduce my issue:

Screenshot 2024-09-18 113852.png (34.83 KiB) Viewed 887 times

Here is the edited fiddle: https://jsfiddle.net/yk2td4jc/

[jakub.s]

Hi,

Oh yes, you're right! This is because the axis extremes are not automatically updated when hiding the point with visible: false.

The solution to that is straightforward, you can update the extremes whenever you're updating the first/last point of your areaspline series.

Here's a demo: https://jsfiddle.net/BlackLabel/8z9nf0a4/

Let me know if you have any more questions about this.

Best regards!

[m3lis]

Unfortunately, that is not an applicable solution for my case since I always want to show a fixed extremes window.

For example, I want to show a full day (24 hours) but toggle the visibility of some points within that day.

So I really want the series to behave exactly like the case a 'spline' would do, but with 'areaspline'.

[jakub.s]

Hi,

Okay, thanks for clarifying your use case.

In that case, you could:

1. Set constant extremes on x and y axes (min, max)
2. Remove the point instead of hiding it
3. When you want to show the point back, just add it with Series.addPoint (https://api.highcharts.com/class-refere ... s#addPoint)

Here's a demo: https://jsfiddle.net/BlackLabel/9gp1vn8f/

Let me know if that helps.

Best regards!