diff --git a/plugins/plugin-chart-echarts/src/Gauge/controlPanel.tsx b/plugins/plugin-chart-echarts/src/Gauge/controlPanel.tsx
index 6c4b6cca02..a1fef26291 100644
--- a/plugins/plugin-chart-echarts/src/Gauge/controlPanel.tsx
+++ b/plugins/plugin-chart-echarts/src/Gauge/controlPanel.tsx
@@ -17,7 +17,7 @@
  * under the License.
  */
 import React from 'react';
-import { t, validateNonEmpty, validateInteger } from '@superset-ui/core';
+import { t } from '@superset-ui/core';
 import {
   sharedControls,
   ControlPanelConfig,
diff --git a/plugins/plugin-chart-echarts/src/Gauge/transformProps.ts b/plugins/plugin-chart-echarts/src/Gauge/transformProps.ts
index 30a40cda88..f58a0a155b 100644
--- a/plugins/plugin-chart-echarts/src/Gauge/transformProps.ts
+++ b/plugins/plugin-chart-echarts/src/Gauge/transformProps.ts
@@ -28,6 +28,7 @@ import {
 import { EChartsOption, GaugeSeriesOption } from 'echarts';
 import { GaugeDataItemOption } from 'echarts/types/src/chart/gauge/GaugeSeries';
 import range from 'lodash/range';
+import { CallbackDataParams } from 'echarts/types/src/util/types';
 import { parseNumbersList } from '../utils/controls';
 import {
   DEFAULT_FORM_DATA as DEFAULT_GAUGE_FORM_DATA,
@@ -71,13 +72,11 @@ const setIntervalBoundsAndColors = (
 const calculateAxisLineWidth = (data: DataRecord[], fontSize: number, overlap: boolean): number =>
   overlap ? fontSize : data.length * fontSize;
 
-const calculateMin = (data: GaugeDataItemOption[]) => {
-  return 2 * Math.min(...data.map(d => d.value).concat([0]));
-};
+const calculateMin = (data: GaugeDataItemOption[]) =>
+  2 * Math.min(...data.map(d => d.value as number).concat([0]));
 
-const calculateMax = (data: GaugeDataItemOption[]) => {
-  return 2 * Math.max(...data.map(d => d.value).concat([0]));
-};
+const calculateMax = (data: GaugeDataItemOption[]) =>
+  2 * Math.max(...data.map(d => d.value as number).concat([0]));
 
 export default function transformProps(chartProps: ChartProps) {
   const { width, height, formData, queriesData } = chartProps;
@@ -106,23 +105,12 @@ export default function transformProps(chartProps: ChartProps) {
   const data = (queriesData[0]?.data || []) as DataRecord[];
   const numberFormatter = getNumberFormatter(numberFormat);
   const colorFn = CategoricalColorNamespace.getScale(colorScheme as string);
-  const normalizer = maxVal;
   const axisLineWidth = calculateAxisLineWidth(data, fontSize, overlap);
-  const axisLabels = range(minVal, maxVal, (maxVal - minVal) / splitNumber);
-  const axisLabelLength = Math.max(
-    ...axisLabels.map(label => numberFormatter(label).length).concat([1]),
-  );
   const formatValue = (value: number) => valueFormatter.replace('{value}', numberFormatter(value));
   const axisTickLength = FONT_SIZE_MULTIPLIERS.axisTickLength * fontSize;
   const splitLineLength = FONT_SIZE_MULTIPLIERS.splitLineLength * fontSize;
   const titleOffsetFromTitle = FONT_SIZE_MULTIPLIERS.titleOffsetFromTitle * fontSize;
   const detailOffsetFromTitle = FONT_SIZE_MULTIPLIERS.detailOffsetFromTitle * fontSize;
-  const intervalBoundsAndColors = setIntervalBoundsAndColors(
-    intervals,
-    intervalColorIndices,
-    colorFn,
-    normalizer,
-  );
   const transformedData: GaugeDataItemOption[] = data.map((data_point, index) => ({
     value: data_point[getMetricLabel(metric as QueryFormMetric)] as number,
     name: groupby.map(column => `${column} = ${data_point[column]}`).join(', '),
@@ -141,6 +129,19 @@ export default function transformProps(chartProps: ChartProps) {
       fontSize: FONT_SIZE_MULTIPLIERS.detailFontSize * fontSize,
     },
   }));
+  const min = minVal ?? calculateMin(transformedData);
+  const max = maxVal ?? calculateMax(transformedData);
+  const axisLabels = range(min, max, (max - min) / splitNumber);
+  const axisLabelLength = Math.max(
+    ...axisLabels.map(label => numberFormatter(label).length).concat([1]),
+  );
+  const normalizer = max;
+  const intervalBoundsAndColors = setIntervalBoundsAndColors(
+    intervals,
+    intervalColorIndices,
+    colorFn,
+    normalizer,
+  );
 
   const progress = {
     show: showProgress,
@@ -190,9 +191,9 @@ export default function transformProps(chartProps: ChartProps) {
     color: DEFAULT_GAUGE_SERIES_OPTION.detail?.color,
   };
   const tooltip = {
-    formatter: params => {
+    formatter: (params: CallbackDataParams) => {
       const { name, value } = params;
-      return `${name} : ${formatValue(value)}`;
+      return `${name} : ${formatValue(value as number)}`;
     },
   };
   let pointer;
@@ -211,8 +212,6 @@ export default function transformProps(chartProps: ChartProps) {
       show: showPointer,
     };
   }
-  const min = minVal ? minVal : calculateMin(transformedData);
-  const max = maxVal ? maxVal : calculateMax(transformedData);
 
   const series: GaugeSeriesOption[] = [
     {
diff --git a/plugins/plugin-chart-echarts/src/Gauge/types.ts b/plugins/plugin-chart-echarts/src/Gauge/types.ts
index 39b0ade486..15ccd68736 100644
--- a/plugins/plugin-chart-echarts/src/Gauge/types.ts
+++ b/plugins/plugin-chart-echarts/src/Gauge/types.ts
@@ -28,8 +28,8 @@ export type EchartsGaugeFormData = {
   groupby: string[];
   metric?: object;
   rowLimit: number;
-  minVal: number;
-  maxVal: number;
+  minVal: number | null;
+  maxVal: number | null;
   fontSize: number;
   numberFormat: string;
   animation: boolean;
diff --git a/plugins/plugin-chart-echarts/test/Gauge/transformProps.test.ts b/plugins/plugin-chart-echarts/test/Gauge/transformProps.test.ts
index 210ba3be80..6e36defd22 100644
--- a/plugins/plugin-chart-echarts/test/Gauge/transformProps.test.ts
+++ b/plugins/plugin-chart-echarts/test/Gauge/transformProps.test.ts
@@ -133,7 +133,7 @@ describe('Echarts Gauge transformProps', () => {
               data: [
                 {
                   value: 15,
-                  name: 'year: 1988',
+                  name: 'year = 1988',
                   itemStyle: {
                     color: '#1f77b4',
                   },
@@ -148,7 +148,7 @@ describe('Echarts Gauge transformProps', () => {
                 },
                 {
                   value: 219,
-                  name: 'year: 1995',
+                  name: 'year = 1995',
                   itemStyle: {
                     color: '#ff7f0e',
                   },
@@ -207,7 +207,7 @@ describe('Echarts Gauge transformProps', () => {
               data: [
                 {
                   value: 140,
-                  name: 'year: 2011, platform: PC',
+                  name: 'year = 2011, platform = PC',
                   itemStyle: {
                     color: '#1f77b4',
                   },
@@ -222,7 +222,7 @@ describe('Echarts Gauge transformProps', () => {
                 },
                 {
                   value: 76,
-                  name: 'year: 2008, platform: PC',
+                  name: 'year = 2008, platform = PC',
                   itemStyle: {
                     color: '#ff7f0e',
                   },
@@ -296,7 +296,7 @@ describe('Echarts Gauge transformProps', () => {
               data: [
                 {
                   value: 140,
-                  name: 'year: 2011, platform: PC',
+                  name: 'year = 2011, platform = PC',
                   itemStyle: {
                     color: '#1f77b4',
                   },
@@ -311,7 +311,7 @@ describe('Echarts Gauge transformProps', () => {
                 },
                 {
                   value: 76,
-                  name: 'year: 2008, platform: PC',
+                  name: 'year = 2008, platform = PC',
                   itemStyle: {
                     color: '#ff7f0e',
                   },