I'm building an Angular app where I use higcharts. The issue I have is the size of the exporting dialog box. I have several graphs on the page, but only one graph has this problem, the dialog box is way too large than the boxes on the others graphs. Below some screenshots so you can observe the difference.
Of course the graphs have the same height and width. For exporting the graphs, I'm using:
import * as Highcharts from 'highcharts';
import exporting from 'highcharts/modules/exporting';
import exportingData from 'highcharts/modules/export-data';
exporting(Highcharts);
exportingData(Highcharts);
The configuration of all graphs has the same structure like below:
this.chartOptionsAvg = {
colors: ['#0026ff', '#ff0000', '#000000', '#229e00'],
chart: {
type: "scatter",
zoomType: 'x'
},
title: {
enabled: true,
text: '',
verticalAlign: 'top',
align: 'center'
},
xAxis: {
type: 'datetime',
title: {
text: this.translate.instant('map.time')
},
dateTimeLabelFormats: {
minute: '%H:%M',
hour: '%H:%M',
month: '%d/%m/%Y',
year: '%Y'
}
},
yAxis: {
title: {
text: this.translate.instant('map.graph-measurements-title-yaxis')
},
type: 'logarithmic',
minorTickInterval: 0.1,
},
credits: {
enabled: false
},
tooltip: {
valueSuffix: " V/m",
pointFormat: '<b>{point.x:%d/%m/%Y %H:%M}</b> </br> <b>{point.y}</b>',
dateTimeLabelFormats: {
minute: '%H:%M',
hour: '%H:%M',
month: '%d/%m/%Y',
year: '%Y'
}
},
plotOptions: {
series: {
marker: {
radius: 2
}
},
scatter: {
threshold: this.wb_threshold
}
},
legend: {
symbolHeight: 12,
symbolWidth: 12,
symbolRadius: 6
},
exporting: {
enabled: true,
},
series: [
{
name: '100 KHz - 7 GHz',
data: avg_data1
},
{
name: '925 MHz - 960 MHz',
data: avg_data2
},
{
name: '1805 MHz - 1880 MHz',
data: avg_data3
},
{
name: '2110 MHz - 2170 MHz',
data: avg_data4
}
]
}
Have you any idea what is going wrong? Or, there is any way to style the box so I can change the font size maybe? Thank you.