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.