vcward
Posts: 7
Joined: Fri Apr 14, 2023 5:23 am

Highstock Angular styledMode Exporting

Hi,

I have a project using the highcharts-angular wrapper, and I am encountering an error exporting highstock charts in styled mode with. To replicate, I ran the wrapper's demo app locally and modified the lazy-loading-chart.component.ts file's chart options to have

Code: Select all

styledMode: true
And trying to export it throws the error "typeerror: Attempted to assign to readonly property." This happens with highcharts v10.3.3 in the latest Safari (16.4) (the exporting works in other browsers). I'm not sure if this is an issue with highcharts, the angular wrapper, or with the way I'm trying to set the chart options.

Code: Select all

import { Component } from '@angular/core';
import * as Highcharts from 'highcharts';
import HC_stock from 'highcharts/modules/stock';
import { AppleDataService } from '../apple-data.service'
import $ from 'jquery';
import { Observable } from 'rxjs';

HC_stock(Highcharts);

interface ExtendedPlotCandlestickDataGroupingOptions extends Highcharts.DataGroupingOptionsObject{
  enabled: boolean
}

@Component({
  selector: 'app-lazy-loading-chart',
  templateUrl: './lazy-loading-chart.component.html',
  styleUrls: ['./lazy-loading-chart.component.css']
})
export class LazyLoadingChartComponent {

  constructor(private appleDataService: AppleDataService) { }

  Highcharts: typeof Highcharts = Highcharts;

  chartRef: Highcharts.Chart;

  chartCallback: Highcharts.ChartCallbackFunction = (chart) => {
    this.chartRef = chart;
  };

  fetchData(): Observable<Object> {
    return this.appleDataService.fetchData();
  }

  fetchSqlData(min: number, max: number): Observable<Object> {
    return this.appleDataService.fetchSqlData(min, max);
  }

  chartLazyLoading: Highcharts.Options = {
    chart: {
      type: 'candlestick',
      styledMode: true,
      events: {
        load: () => {
          const chart = this.chartRef;
          const data = this.fetchData()
            .subscribe((data: Array<[]>) => {
              // Add a null value for the end date
              const chartData = [...data, [Date.UTC(2011, 9, 14, 19, 59), null, null, null, null]];

              chart.addSeries({
                type: 'candlestick',
                data: chartData,
                dataGrouping: {
                  enabled: false
                } as ExtendedPlotCandlestickDataGroupingOptions
              }, false);

              chart.update({
                navigator: {
                  series: {
                    data: chartData
                  }
                }
              });
            });
        }
      }
    },

    exporting: {
      chartOptions: {
        chart: {
          //styledMode: true
        }
      }
    },

    navigator: {
      adaptToUpdatedData: false
    },

    scrollbar: {
      liveRedraw: false
    },

    title: {
      text: 'AAPL history by the minute from 1998 to 2011'
    },

    subtitle: {
      text: 'Displaying 1.7 million data points in Highcharts Stock by async server loading'
    },

    rangeSelector: {
      buttons: [{
        type: 'hour',
        count: 1,
        text: '1h'
      }, {
        type: 'day',
        count: 1,
        text: '1d'
      }, {
        type: 'month',
        count: 1,
        text: '1m'
      }, {
        type: 'year',
        count: 1,
        text: '1y'
      }, {
        type: 'all',
        text: 'All'
      }],
      inputEnabled: false, // it supports only days
      selected: 4 // all
    },

    xAxis: {
      events: {
        afterSetExtremes: (event) => {
          const chart = this.chartRef;

          chart.showLoading('Loading data from server...');

          // Load new data depending on the selected min and max
          this.fetchSqlData(event.min, event.max).subscribe((data: Array<[]>) => {
            chart.series[0].setData(data);
            chart.hideLoading();
          })
        }
      },
      minRange: 3600 * 1000 // one hour
    },

    yAxis: {
      floor: 0
    }
  };

}
User avatar
dawid.d
Posts: 755
Joined: Thu Oct 06, 2022 11:31 am

Re: Highstock Angular styledMode Exporting

Hi,

Welcome to our forum and thanks for contacting us with your question!

I tried to reproduce the issue but to no avail as in my case everything exports without any problems (also tested on Safari). Could you provide more details about this problem?

Demo: https://stackblitz.com/edit/highcharts- ... mponent.ts

I'm waiting for your reply
Kind regards!
Dawid Draguła
Highcharts Developer
vcward
Posts: 7
Joined: Fri Apr 14, 2023 5:23 am

Re: Highstock Angular styledMode Exporting

Thank you for your response!

I do see that your stackblitz demo is working for me as well in Sarafi. I have tried to match up dependency versions, tsconfig settings, angular.json settings, etc; however, I am still getting an error while running the app on localhost. I will continue to try to see if I can replicate the error on stackblitz.

In the meantime, I have attached is a screen shot of the beginning part of the stack trace that I get in the console.
Screenshot 2023-04-14 at 2.49.39 PM.png
Screenshot 2023-04-14 at 2.49.39 PM.png (165.09 KiB) Viewed 778 times
User avatar
dawid.d
Posts: 755
Joined: Thu Oct 06, 2022 11:31 am

Re: Highstock Angular styledMode Exporting

It's hard for me to tell what's wrong. I'd appreciate if you could reproduce this issue in Stackblitz if possible so I can debug it. We've never encountered anything like this before. I think the screen after loading the src could also be useful.
Dawid Draguła
Highcharts Developer
vcward
Posts: 7
Joined: Fri Apr 14, 2023 5:23 am

Re: Highstock Angular styledMode Exporting

Apologies for the delay; however, I still have not been able to reproduce the error in stackblitz.
I have tried generating a new angular based stackblitz with the latest highcharts and highcharts-angular dependencies, and, like the one you created earlier, the exporting works fine in Safari (v 16.4).

I then tried creating a brand new angular project (with angular-cli v. 15.2.6) (a copy is at this github repo) locally with the same set up (highcharts v10.3.3 and highcharts-angular v.3.1.2) with the same Highstock chart as defined in the app.component.ts file in the stackblitz, and I get the error in Safari when trying to export an image.

I'm not sure what you mean by the screen after loading the src? I hope to reproduce the error or provide more useful info, but I'm hitting a wall.
jakub.j
Posts: 1084
Joined: Tue Jan 24, 2023 11:14 am

Re: Highstock Angular styledMode Exporting

Hey,

I cloned your repo, ran it locally on macOS and tried to reproduce this error on safari, but unfortunately in my case everything is working fine and the chart is exporting without the error you mentioned.

If you think it's a bug, you can report it on our Angular Wrapper GH.
If you do it, please mention the exact macOS and hardware that you use when the issue occurs in the ticket on GH.

Have a good day!
Best regards
Jakub
Jakub
Highcharts Developer
abaluta
Posts: 2
Joined: Mon Aug 07, 2023 1:52 pm

Re: Highstock Angular styledMode Exporting

The same error happens in your example as well: https://jsfiddle.net/gh/get/library/pur ... lor-scheme

If you try to export something (for example jpeg) - we get an error "TypeError: Attempted to assign to readonly property."
jakub.j
Posts: 1084
Joined: Tue Jan 24, 2023 11:14 am

Re: Highstock Angular styledMode Exporting

Welcome to our forum and thanks for contacting us with your question!

I've tested this demo on macOS and Windows and no error came up when exporting the chart to JPEG or any other.

Could you please provide me an exact OS and browser with their versions where you can observe that error on the demo?

Best regards
Jakub
Jakub
Highcharts Developer
abaluta
Posts: 2
Joined: Mon Aug 07, 2023 1:52 pm

Re: Highstock Angular styledMode Exporting

Looked in more detail. The problem manifests itself in safari (Version 16.6 (18615.3.12.11.2)) but does not manifest itself in firefox (102.14.0esr (64-bit) on the same PC computer (MacOS ventura 13.5 (22G74)). I turned dark mode on and off on the system: no change. But as soon as I comment " //styledMode: true" - everything starts working.
jakub.j
Posts: 1084
Joined: Tue Jan 24, 2023 11:14 am

Re: Highstock Angular styledMode Exporting

Hey!

Now I also get the error on Safari. It seems that it is a bug.

You can report it on our GH: https://github.com/highcharts/highcharts
There you will be able to watch this issue and track any information and workarounds for it.

Let me know if you have any further questions!
Best regards
Jakub
Jakub
Highcharts Developer

Return to “Highcharts Stock”