Error exporting Highstock / Highcharts charts on Android


#1

I built a chart using Highstock and Ionic 3, it works normally in Chrome. I can export the chart normally generated in Chrome.But when I test on Android the ‘chart export’ doesn’t work. The chart is not exported as in Chrome. With the application installed on Android the chart works normally. When I try to export the chart on Android, nothing happens. Using the remote debugging in Chrome for Android and clicking the export button displays the following error:

[Intervention] Ignored attempt to cancel a touchstart event with cancelable=false, for example because scrolling is in progress and cannot be interrupted.

How can I solve this problem?

Already tested on Android Highcharts library, it also didn’t work. I made the export settings as shown in this video: https://www.youtube.com/watch?v=feoZdOYBiF0

I use Ionic 3 and Angular 5, this is my code:

App.module.ts

import { ChartModule, HIGHCHARTS_MODULES} from 'angular-highcharts';
import exporting from 'highcharts/modules/exporting.src.js';
import * as Highcharts from 'highcharts';
import highcharts from 'angular-highcharts/highcharts';
import stock from 'highcharts/modules/stock.src';
import more from 'highcharts/highcharts-more.src';

export function highchartsModules(){
  return [exporting, stock, more ];

}

Highcharts.setOptions({
        global: {
                useUTC: false               
        },
        lang: { 
            months: [
                'Janeiro', 'Fevereiro', 'Março', 'Abril',
                'Maio', 'Junho', 'Julho', 'Agosto',
                'Setembro', 'Outubro', 'Novembro', 'Dezembro'
            ],
            weekdays: [
                'Domingo', 'Segunda-Feira', 'Terça-Feira', 'Quarta-Feira',
                'Quinta-Feira', 'Sexta-Feira', 'Sábado'
            ],
            shortMonths: [ "Jan" , "Fev" , "Mar" , "Abr" , 
        "Mai" , "Jun" , "Jul" , "Aug" , "Set" , "Out" , 
        "Nov" , "Dez"]
    }

});

@NgModule({
    declarations: [ ... ],
    imports: [ ChartModule ],
    bootstrap: [IonicApp],
    entryComponents: [...],
    providers: [
    {provide: HIGHCHARTS_MODULES, useFactory: highchartsModules},
    ]
})

Page.html

<ion-content>
    <div [chart]="stock" style="height: 510px; min-width: 310px"></div>
<ion-content>

Page.ts

import { Chart } from 'angular-highcharts';
import * as Highcharts from "highcharts/highstock";
import { StockChart } from 'angular-highcharts';

@IonicPage()
@Component({
    selector: 'page-about',
    templateUrl: 'about.html'
})
export class AboutPage {


 stock: StockChart;


@ViewChild('content') content: ElementRef;


 constructor(...) {

    ...

        this.humorList$.subscribe(items => {
            this.stock = new StockChart({
                rangeSelector: {
                    selected : 1,
                    enabled:true                    
                },

                chart: {
                    type: 'spline',
                },
                exporting: {
                    dateFormat:"%d-%m-%Y",
                    chartOptions: {
                        plotOptions: {
                            series: {
                                dataLabels: {
                                    enabled: true
                                }
                            }
                        }
                    },
                    fallbackToExportServer: false
                },
                credits: {
                    enabled: false
                },
                title: {
                    text: undefined
                },
                plotOptions: {
                    series: {
                        color: '#009c58',                   
                    },
                    spline: {
                        marker: {
                            enabled: true,
                            fillColor: '#FFFFFF',
                            lineWidth: 2,
                            lineColor: null 
                        }
                    }
                },
                xAxis: {
                    type: 'datetime',
                    labels: { 
                        overflow: 'justify'
                    },
                    scrollbar: {
                        enabled: false
                    }
                },
                yAxis: {
                    opposite: true,
                    min: 0,
                    max: 9,
                    type: "category",
                    categories: [...],
                    labels: {
                        reserveSpace: false, 
                        style: {
                            fontSize: '10px',
                            opacity: 0.55
                        }
                    },
                    title: {
                        text: undefined
                    },
                    minorGridLineWidth: null,
                    alternateGridColor: '#dff9ce',
                    gridLineColor: '#a0d87c',
                    gridLineWidth: 0.5
                },
                series: [{
                    name: 'Humor',
                    data: [...]
                }],

            });
        });

Could someone please help me? If possible, I’d like to see a code example.


#2

Did you got to solve it?


#4

I haven’t solved this problem yet. In the last months I haven’t worked on my project, so don’t test more solutions. I opened the same topic in the Forum Highcharts, there is an answer there that I haven’t yet tested. Please let me know if you find any solution.