fix(Highcharts): fix resetZoomButton styles (#137)

gravity-ui · Mar 14, 2023 · 07f610e · 07f610e
1 parent 51bb39c
commit 07f610e
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 2 deletions.
diff --git a/src/plugins/highcharts/renderer/helpers/config/config.js b/src/plugins/highcharts/renderer/helpers/config/config.js
@@ -1753,6 +1753,20 @@ export function prepareConfig(data, options, isMobile, holidays) {
                     return Highcharts.Axis.prototype.defaultLabelFormatter.call(this);
                 },
             },
+            events: {
+                setExtremes: function () {
+                    // There is no better way to align zoom button text
+                    // Callback setExtremes used because of it obligatory invocation on every zoom event
+                    // setTimeout used because of absence resetZoomButton node in dom on first zoom event
+                    setTimeout(() => {
+                        const text = this.chart.resetZoomButton?.text;
+
+                        if (text) {
+                            text.translate(0, -6);
+                        }
+                    }, 0);
+                },
+            },
         },
         yAxis: {
             crosshair: options.splitTooltip

diff --git a/src/plugins/highcharts/renderer/helpers/highcharts/highcharts.js b/src/plugins/highcharts/renderer/helpers/highcharts/highcharts.js
@@ -48,11 +48,15 @@ Highcharts.setOptions({
         resetZoomButton: {
             relativeTo: 'chart',
             theme: {
-                width: 16,
-                height: 16,
+                r: 6,
+                width: 12,
+                height: 12,
                 'text-align': 'center',
                 opacity: '0.8',
                 cursor: 'pointer',
+                style: {
+                    fontSize: '20px',
+                },
             },
             position: {
                 y: 30,