I have an angular project that uses highcharts and the highcharts-angular wrapper, and I have been running into an error when exporting an image with chart options that contain styledMode: true. When I try to export an image, no download occurs and the browser console shows TypeError: Attempted to assign to readonly property. This error happens only in Safari (I am running v.16.4 of Safari); I do not have this error in other browsers (Chrome, Firefox, Edge).
I have tried running the highcharts-angular wrapper’s demo app locally; making the changes to one of the chart options to enable styledMode and get the same error there as well. So I opened a thread on Highchart’s support forums about this issue. A mod responded, with a stackblitz with the same sample chart, and exporting the image works fine there for me, even in Safari. I have not been able to reproduce the error in stackblitz.
I have since tried starting a new angular project (with angular-cli v. 15.2.6, node v.18.16.0) [github link] with the following dependencies and versions:
@angular-devkit/build-angular@15.2.6
├── @angular/animations@15.2.7
├── @angular/cli@15.2.6
├── @angular/common@15.2.7
├── @angular/compiler-cli@15.2.7
├── @angular/compiler@15.2.7
├── @angular/core@15.2.7
├── @angular/forms@15.2.7
├── @angular/platform-browser-dynamic@15.2.7
├── @angular/platform-browser@15.2.7
├── @angular/router@15.2.7
├── @types/jasmine@4.3.1
├── highcharts-angular@3.1.2
├── highcharts@10.3.3
├── jasmine-core@4.5.0
├── karma-chrome-launcher@3.1.1
├── karma-coverage@2.2.0
├── karma-jasmine-html-reporter@2.0.0
├── karma-jasmine@5.1.0
├── karma@6.4.1
├── rxjs@7.8.0
├── tslib@2.5.0
├── typescript@4.9.5
└── zone.js@0.12.0
When trying to export the chart image, I do still get the TypeError: Attempted to assign to readonly property error in Safari when running the project locally. I am not sure if this is an issue with highcharts, or if I have a setting wrong somewhere in the angular project itself.