Gantt Series remove() error

[aislingv]

Hello

I am using Angular 15.2.0, highcharts 11.0.1, highcharts-angular 3.1.2 and highcharts-regression 2.2.0

I can create a Gantt chart but when I want to remove the current series to display a new series in the same chart, I get this error:

Code: Select all

main.js:36789 Caught Gantt removeSeries chart error:  TypeError: Cannot read properties of undefined (reading 'label')
    at V.B (vendor.js:26960:30)
    at vendor.js:12177:23
    at Array.forEach (<anonymous>)
    at d (vendor.js:12176:11)
    at V.render (vendor.js:16726:9)
    at V.redraw (vendor.js:16729:31)
    at vendor.js:20925:25
    at Array.forEach (<anonymous>)
    at B.redraw (vendor.js:20919:11)
    at x.d (vendor.js:20497:25)

Code is:

Code: Select all

public removeSeries() {
        if (this.theChart) {            
            for (var i = this.theChart.series.length - 1; i > -1; i--) {                
                this.theChart.series[i].remove();
            }
        }
    }

What is the best approach to create one chart instance and then change it's data as the user selection is changed?

Thanks
Aisling

[jakub.j]

Thanks for contacting us with your question!

If you want to update data just for sinble series, the best way is to use series.setData, however if you want to update a couple of series, you can use chart.update, see:

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

If this doesn't help you, please reproduce your problem in a live demo so that I will be able to help you.
You can base on this angular demo: https://stackblitz.com/edit/highcharts- ... mponent.ts

Feel free to ask any further questions!
Kind regards
Jakub

[aislingv]

Thanks for your reply Jakub. Sorry for my late response.

I used chart.update() with the new series and I can display new series data in the chart which is great.

The only thing that is not work is the resizing of the chart to handle larger amount of data (at the moment going from say 200 to 1200 events).
Can you suggest what styling I should use for the chart and any resizing that needs to be done in order to reuse the same chart with new series?

Chart with new larger series.

Redrawn with larger series.png (242.6 KiB) Viewed 1045 times

[jakub.j]

Hey, I'm glad it helped!

To handle that amount of data, use chart.scrollablePlotArea, see:

Demo: https://jsfiddle.net/BlackLabel/1obqhjp4/

If that doesn't help you, please send me a demo so that I'll be able to help.

Kind regards
Jakub

[aislingv]

Thanks for your assistance.

Here is a very simplified version of my current code:
https://stackblitz.com/edit/highcharts- ... ponent.css

First issue: the y scrolling is not enabled - not sure why but I usually set it after the chart is created in Angular and then its enabled.

Second issue: the Expand button usually make the chart grow so it fits all its current data. Here its not expanding but just adding all the data in the current available space. Why is the chart not growing in size?

Third issue: Update Series button: When I want to change the series to display new data, it keeps the old data and appends the new data to it and its all too large to see all the data.

Thanks again.

[jakub.j]

Hey!

Regarding your questions:

#1: The scrollbar was not displaying because of an old angular wrapper version. When I bumped the version up, the scrollbar is displayed and works perfectly.

#2: Now, when the scrollbar is working, there is no need to resize the chart on the expand button click so I removed chart.setSize. Also, when you set yAxis extremes, I changed the max value from dataCount to dataCount - 1, because the min starts from 0, not from 1. Now the extremes are set properly and there is no misalignment.

#3: There was a problem when parsing the date, you used getDate() js method instead of getTime() and the timestamp for the series was set wrongly, what caused it to be empty and no points were displayed. Now, they are all correctly displayed, and I made them 5 months long for better visibility.

Demo: https://stackblitz.com/edit/highcharts- ... ponent.css

Feel free to ask any further questions!
Kind regards
Jakub

[aislingv]

Thank you very much Jakub.

1. What version of which wrapper did you change please? I would like to do the same locally.
2. Great. That looks good.
3. Doh, thanks

Why when setting the new series is the old series data still visible? How do I get rid of it please?

[jakub.j]

Hey!

I bumped the version up to the latest 3.1.2

When updating the data, if you want to get rid of the old one, you can either remove the previous series and than add a new one or use series.setData which I recommend. This will allow you to update the data in the current series and preserve all the options set.

Demo: https://stackblitz.com/edit/highcharts- ... ponent.css

Feel free to ask any further questions!
Kind regards
Jakub

[aislingv]

That is looking great. Thanks very much for the help Jakub.

The expand chart functionality is just there to show all the data at once for printing or saving an image. The build in export functionality only seems to show what is currently visible in the scroll area. I don't know if its possible to generate an image for all the data?

Thanks again.

[jakub.j]

Hey!

In the exporting settings, you can set exporting.sourceHeight to a calculated height based on your data and exporting.chartOptions where you can change yAxis.max to the amount of points that you want to display, see:

Demo: https://stackblitz.com/edit/highcharts- ... ponent.css

Let me know if you have any further questions!
Kind regards
Jakub

[aislingv]

Thanks so much for your help with all this questions, Jakub. Much appreciated.

It would be great to have more examples Angular to look at so these things are more obvious to casual chart users.

Thanks again.

[jakub.j]

You're welcome!

You can find all the demos available here on our Highcharts Demo Page: https://www.highcharts.com/demo.
If it comes to Highcharts options, there are no differences between angular / react or vanilla JS, so you can simply use this demos or our API: https://api.highcharts.com/highcharts/

Sometimes, if it's non-Highcharts logic, there are some differences, but it's usually custom functionalities.
As far as I know, there are plans for the near future to have the demos available not only for vanilla JS but also for the frameworks.

Do not hesitate to contact us in the future
Best regards
Jakub