0

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.

  1. Noramal size: normal-size-export-box
  2. The large one: large-size-export-box

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.

  • Hi, the `angular2-highcharts` is a community wrapper and is not officially supported. I don't see such behaviour in the official wrapper and I would recommend switching out to the Official Highcharts wrapper for Angular `highcharts-angular`(https://github.com/highcharts/highcharts-angular). If the issue will still occur, feel free to reach out to me! – magdalena Sep 08 '22 at 13:49

0 Answers0