diff --git a/packages/charts/src/chart_types/xy_chart/annotations/line/dimensions.ts b/packages/charts/src/chart_types/xy_chart/annotations/line/dimensions.ts
index 5795c9eee9..71a999fef6 100644
--- a/packages/charts/src/chart_types/xy_chart/annotations/line/dimensions.ts
+++ b/packages/charts/src/chart_types/xy_chart/annotations/line/dimensions.ts
@@ -22,7 +22,7 @@ import { AnnotationLineProps } from './types';
 
 function computeYDomainLineAnnotationDimensions(
   annotationSpec: LineAnnotationSpec,
-  yScale: Scale,
+  yScale: Scale<number>,
   { vertical, horizontal }: SmallMultipleScales,
   chartRotation: Rotation,
   axisPosition?: Position,
@@ -118,7 +118,7 @@ function computeYDomainLineAnnotationDimensions(
 
 function computeXDomainLineAnnotationDimensions(
   annotationSpec: LineAnnotationSpec,
-  xScale: Scale,
+  xScale: Scale<number | string>,
   { vertical, horizontal }: SmallMultipleScales,
   chartRotation: Rotation,
   isHistogramMode: boolean,
@@ -233,8 +233,8 @@ function computeXDomainLineAnnotationDimensions(
 export function computeLineAnnotationDimensions(
   annotationSpec: LineAnnotationSpec,
   chartRotation: Rotation,
-  yScales: Map<GroupId, Scale>,
-  xScale: Scale,
+  yScales: Map<GroupId, Scale<number>>,
+  xScale: Scale<number | string>,
   smallMultipleScales: SmallMultipleScales,
   isHistogramMode: boolean,
   axisPosition?: Position,
diff --git a/packages/charts/src/chart_types/xy_chart/annotations/rect/dimensions.ts b/packages/charts/src/chart_types/xy_chart/annotations/rect/dimensions.ts
index f87d0a3fd6..f0730f6401 100644
--- a/packages/charts/src/chart_types/xy_chart/annotations/rect/dimensions.ts
+++ b/packages/charts/src/chart_types/xy_chart/annotations/rect/dimensions.ts
@@ -32,8 +32,8 @@ export function isWithinRectBounds({ x, y }: Point, { startX, endX, startY, endY
 /** @internal */
 export function computeRectAnnotationDimensions(
   annotationSpec: RectAnnotationSpec,
-  yScales: Map<GroupId, Scale>,
-  xScale: Scale,
+  yScales: Map<GroupId, Scale<number>>,
+  xScale: Scale<number>,
   axesSpecs: AxisSpec[],
   smallMultiplesScales: SmallMultipleScales,
   chartRotation: Rotation,
@@ -162,7 +162,7 @@ export function computeRectAnnotationDimensions(
 }
 
 function scaleXonBandScale(
-  xScale: ScaleBand,
+  xScale: ScaleBand<number | string>,
   x0: PrimitiveValue,
   x1: PrimitiveValue,
 ): { x: number; width: number } | null {
@@ -223,7 +223,7 @@ function scaleXonContinuousScale(
  * @param isHistogram
  */
 function limitValueToDomainRange(
-  scale: Scale,
+  scale: Scale<number>,
   minValue?: PrimitiveValue,
   maxValue?: PrimitiveValue,
   isHistogram = false,
diff --git a/packages/charts/src/chart_types/xy_chart/annotations/utils.ts b/packages/charts/src/chart_types/xy_chart/annotations/utils.ts
index ce4aeaf2d2..a3913b19b2 100644
--- a/packages/charts/src/chart_types/xy_chart/annotations/utils.ts
+++ b/packages/charts/src/chart_types/xy_chart/annotations/utils.ts
@@ -118,8 +118,8 @@ export function invertTransformedCursor(
 export function computeAnnotationDimensions(
   annotations: AnnotationSpec[],
   chartRotation: Rotation,
-  yScales: Map<GroupId, Scale>,
-  xScale: Scale,
+  yScales: Map<GroupId, Scale<number>>,
+  xScale: Scale<number | string>,
   axesSpecs: AxisSpec[],
   isHistogramModeEnabled: boolean,
   smallMultipleScales: SmallMultipleScales,
@@ -145,22 +145,22 @@ export function computeAnnotationDimensions(
         annotationDimensions.set(id, dimensions);
       }
       return annotationDimensions;
-    }
-
-    const dimensions = computeRectAnnotationDimensions(
-      annotationSpec,
-      yScales,
-      xScale,
-      axesSpecs,
-      smallMultipleScales,
-      chartRotation,
-      getAxisStyle,
-      isHistogramModeEnabled,
-    );
+    } else {
+      const dimensions = computeRectAnnotationDimensions(
+        annotationSpec,
+        yScales,
+        xScale as Scale<number>,
+        axesSpecs,
+        smallMultipleScales,
+        chartRotation,
+        getAxisStyle,
+        isHistogramModeEnabled,
+      );
 
-    if (dimensions) {
-      annotationDimensions.set(id, dimensions);
+      if (dimensions) {
+        annotationDimensions.set(id, dimensions);
+      }
+      return annotationDimensions;
     }
-    return annotationDimensions;
   }, new Map());
 }
diff --git a/packages/charts/src/chart_types/xy_chart/crosshair/crosshair_utils.ts b/packages/charts/src/chart_types/xy_chart/crosshair/crosshair_utils.ts
index 9a2bfacc55..f5c1ccc6b7 100644
--- a/packages/charts/src/chart_types/xy_chart/crosshair/crosshair_utils.ts
+++ b/packages/charts/src/chart_types/xy_chart/crosshair/crosshair_utils.ts
@@ -22,7 +22,7 @@ export const DEFAULT_SNAP_POSITION_BAND = 1;
 /** @internal */
 export function getSnapPosition(
   value: string | number,
-  scale: Scale,
+  scale: Scale<number | string>,
   totalBarsInCluster = 1,
 ): { band: number; position: number } | undefined {
   const position = scale.scale(value);
@@ -86,7 +86,7 @@ export function getCursorBandPosition(
     withinBandwidth: boolean;
   },
   snapEnabled: boolean,
-  xScale: Scale,
+  xScale: Scale<number | string>,
   totalBarsInCluster?: number,
 ): Rect | undefined {
   const { top, left, width, height } = panel;
diff --git a/packages/charts/src/chart_types/xy_chart/rendering/area.ts b/packages/charts/src/chart_types/xy_chart/rendering/area.ts
index 8cecfffb09..626470485b 100644
--- a/packages/charts/src/chart_types/xy_chart/rendering/area.ts
+++ b/packages/charts/src/chart_types/xy_chart/rendering/area.ts
@@ -31,8 +31,8 @@ import {
 export function renderArea(
   shift: number,
   dataSeries: DataSeries,
-  xScale: Scale,
-  yScale: Scale,
+  xScale: Scale<number | string>,
+  yScale: Scale<number>,
   panel: Dimensions,
   color: Color,
   curve: CurveType,
diff --git a/packages/charts/src/chart_types/xy_chart/rendering/bars.ts b/packages/charts/src/chart_types/xy_chart/rendering/bars.ts
index 7e975256a1..4f3165f5ce 100644
--- a/packages/charts/src/chart_types/xy_chart/rendering/bars.ts
+++ b/packages/charts/src/chart_types/xy_chart/rendering/bars.ts
@@ -29,8 +29,8 @@ type BarTuple = {
 export function renderBars(
   orderIndex: number,
   dataSeries: DataSeries,
-  xScale: Scale,
-  yScale: Scale,
+  xScale: Scale<number | string>,
+  yScale: Scale<number>,
   panel: Dimensions,
   chartRotation: number,
   minBarHeight: number,
diff --git a/packages/charts/src/chart_types/xy_chart/rendering/bubble.ts b/packages/charts/src/chart_types/xy_chart/rendering/bubble.ts
index 7141a3bd19..d85f5f375e 100644
--- a/packages/charts/src/chart_types/xy_chart/rendering/bubble.ts
+++ b/packages/charts/src/chart_types/xy_chart/rendering/bubble.ts
@@ -21,8 +21,8 @@ import { MarkSizeOptions } from './utils';
 export function renderBubble(
   shift: number,
   dataSeries: DataSeries,
-  xScale: Scale,
-  yScale: Scale,
+  xScale: Scale<number | string>,
+  yScale: Scale<number>,
   color: Color,
   panel: Dimensions,
   hasY0Accessors: boolean,
diff --git a/packages/charts/src/chart_types/xy_chart/rendering/line.ts b/packages/charts/src/chart_types/xy_chart/rendering/line.ts
index ce669e1bb6..c78b208958 100644
--- a/packages/charts/src/chart_types/xy_chart/rendering/line.ts
+++ b/packages/charts/src/chart_types/xy_chart/rendering/line.ts
@@ -30,8 +30,8 @@ import {
 export function renderLine(
   shift: number,
   dataSeries: DataSeries,
-  xScale: Scale,
-  yScale: Scale,
+  xScale: Scale<number | string>,
+  yScale: Scale<number>,
   panel: Dimensions,
   color: Color,
   curve: CurveType,
diff --git a/packages/charts/src/chart_types/xy_chart/rendering/points.ts b/packages/charts/src/chart_types/xy_chart/rendering/points.ts
index 78784f8591..77c95dc430 100644
--- a/packages/charts/src/chart_types/xy_chart/rendering/points.ts
+++ b/packages/charts/src/chart_types/xy_chart/rendering/points.ts
@@ -29,8 +29,8 @@ import {
 export function renderPoints(
   shift: number,
   dataSeries: DataSeries,
-  xScale: Scale,
-  yScale: Scale,
+  xScale: Scale<number | string>,
+  yScale: Scale<number>,
   panel: Dimensions,
   color: Color,
   pointStyle: PointStyle,
diff --git a/packages/charts/src/chart_types/xy_chart/rendering/utils.ts b/packages/charts/src/chart_types/xy_chart/rendering/utils.ts
index 679c3b1976..9944eb7f65 100644
--- a/packages/charts/src/chart_types/xy_chart/rendering/utils.ts
+++ b/packages/charts/src/chart_types/xy_chart/rendering/utils.ts
@@ -54,7 +54,11 @@ export function isDatumFilled({ filled, initialY1 }: DataSeriesDatum) {
  * @param xScaleOffset
  * @internal
  */
-export function getClippedRanges(dataset: DataSeriesDatum[], xScale: Scale, xScaleOffset: number): ClippedRanges {
+export function getClippedRanges(
+  dataset: DataSeriesDatum[],
+  xScale: Scale<number | string>,
+  xScaleOffset: number,
+): ClippedRanges {
   let firstNonNullX: number | null = null;
   let hasNull = false;
 
@@ -153,7 +157,7 @@ export function isPointOnGeometry(
   return yCoordinate >= y && yCoordinate <= y + height && xCoordinate >= x && xCoordinate <= x + width;
 }
 
-const getScaleTypeValueValidator = (yScale: Scale): ((n: number) => boolean) => {
+const getScaleTypeValueValidator = (yScale: Scale<number>): ((n: number) => boolean) => {
   if (!isLogarithmicScale(yScale)) return () => true;
 
   const domainPolarity = getDomainPolarity(yScale.domain);
@@ -174,7 +178,7 @@ export type YDefinedFn = (
 ) => boolean;
 
 /** @internal */
-export function isYValueDefinedFn(yScale: Scale, xScale: Scale): YDefinedFn {
+export function isYValueDefinedFn(yScale: Scale<number>, xScale: Scale<number | string>): YDefinedFn {
   const validator = getScaleTypeValueValidator(yScale);
   return (datum, getValueAccessor) => {
     const yValue = getValueAccessor(datum);
@@ -184,6 +188,7 @@ export function isYValueDefinedFn(yScale: Scale, xScale: Scale): YDefinedFn {
 
 /** @internal */
 export const CHROME_PINCH_BUG_EPSILON = 0.5;
+
 /**
  * Temporary fix for Chromium bug
  * Shift a small pixel value when pixel diff is <= 0.5px
@@ -196,7 +201,7 @@ function chromeRenderBugBuffer(y1: number, y0: number): number {
 }
 
 /** @internal */
-export function getY1ScaledValueOrThrowFn(yScale: Scale): (datum: DataSeriesDatum) => number {
+export function getY1ScaledValueOrThrowFn(yScale: Scale<number>): (datum: DataSeriesDatum) => number {
   const datumAccessor = getYDatumValueFn();
   const scaleY0Value = getY0ScaledValueOrThrowFn(yScale);
   return (datum) => {
@@ -207,7 +212,7 @@ export function getY1ScaledValueOrThrowFn(yScale: Scale): (datum: DataSeriesDatu
 }
 
 /** @internal */
-export function getY0ScaledValueOrThrowFn(yScale: Scale): (datum: DataSeriesDatum) => number {
+export function getY0ScaledValueOrThrowFn(yScale: Scale<number>): (datum: DataSeriesDatum) => number {
   const isLogScale = isLogarithmicScale(yScale);
   const domainPolarity = getDomainPolarity(yScale.domain);
   const logBaseline = domainPolarity >= 0 ? Math.min(...yScale.domain) : Math.max(...yScale.domain);
diff --git a/packages/charts/src/chart_types/xy_chart/state/selectors/compute_annotations.ts b/packages/charts/src/chart_types/xy_chart/state/selectors/compute_annotations.ts
index 6725bd0b66..c534e0bffa 100644
--- a/packages/charts/src/chart_types/xy_chart/state/selectors/compute_annotations.ts
+++ b/packages/charts/src/chart_types/xy_chart/state/selectors/compute_annotations.ts
@@ -6,10 +6,11 @@
  * Side Public License, v 1.
  */
 
+import { Scale } from '../../../../scales';
 import { createCustomCachedSelector } from '../../../../state/create_selector';
 import { getChartThemeSelector } from '../../../../state/selectors/get_chart_theme';
 import { getSettingsSpecSelector } from '../../../../state/selectors/get_settings_specs';
-import { AnnotationId, AxisId } from '../../../../utils/ids';
+import { AnnotationId, AxisId, GroupId } from '../../../../utils/ids';
 import { AnnotationDimensions } from '../../annotations/types';
 import { computeAnnotationDimensions } from '../../annotations/utils';
 import { computeSeriesGeometriesSelector } from './compute_series_geometries';
@@ -44,7 +45,7 @@ export const computeAnnotationDimensionsSelector = createCustomCachedSelector(
     return computeAnnotationDimensions(
       annotationSpecs,
       settingsSpec.rotation,
-      yScales,
+      yScales as Map<GroupId, Scale<number>>,
       xScale,
       axesSpecs,
       isHistogramMode,
diff --git a/packages/charts/src/chart_types/xy_chart/state/selectors/compute_small_multiple_scales.ts b/packages/charts/src/chart_types/xy_chart/state/selectors/compute_small_multiple_scales.ts
index a98e8d20cb..a439de61f1 100644
--- a/packages/charts/src/chart_types/xy_chart/state/selectors/compute_small_multiple_scales.ts
+++ b/packages/charts/src/chart_types/xy_chart/state/selectors/compute_small_multiple_scales.ts
@@ -16,8 +16,8 @@ import { computeSeriesDomainsSelector } from './compute_series_domains';
 
 /** @internal */
 export interface SmallMultipleScales {
-  horizontal: ScaleBand;
-  vertical: ScaleBand;
+  horizontal: ScaleBand<number | string>;
+  vertical: ScaleBand<number | string>;
 }
 
 /**
@@ -43,6 +43,10 @@ export function getScale(
   padding: RelativeBandsPadding = DEFAULT_SM_PANEL_PADDING,
 ) {
   const singlePanelSmallMultiple = domain.length <= 1;
-  const defaultDomain = domain.length === 0 ? [undefined] : domain;
-  return new ScaleBand(defaultDomain, [0, maxRange], undefined, singlePanelSmallMultiple ? 0 : padding);
+  return new ScaleBand(
+    domain.length > 0 ? domain : [(undefined as unknown) as number],
+    [0, maxRange],
+    undefined,
+    singlePanelSmallMultiple ? 0 : padding,
+  );
 }
diff --git a/packages/charts/src/chart_types/xy_chart/state/selectors/get_cursor_band.ts b/packages/charts/src/chart_types/xy_chart/state/selectors/get_cursor_band.ts
index 3739c6226c..396bc9c56f 100644
--- a/packages/charts/src/chart_types/xy_chart/state/selectors/get_cursor_band.ts
+++ b/packages/charts/src/chart_types/xy_chart/state/selectors/get_cursor_band.ts
@@ -74,7 +74,7 @@ function getCursorBand(
   externalPointerEvent: PointerEvent | null,
   chartDimensions: Dimensions,
   settingsSpec: SettingsSpec,
-  xScale: Scale | undefined,
+  xScale: Scale<number | string> | undefined,
   seriesSpecs: BasicSeriesSpec[],
   totalBarsInCluster: number,
   isTooltipSnapEnabled: boolean,
diff --git a/packages/charts/src/chart_types/xy_chart/state/selectors/get_projected_pointer_position.ts b/packages/charts/src/chart_types/xy_chart/state/selectors/get_projected_pointer_position.ts
index eed6513da3..c2ad5bf306 100644
--- a/packages/charts/src/chart_types/xy_chart/state/selectors/get_projected_pointer_position.ts
+++ b/packages/charts/src/chart_types/xy_chart/state/selectors/get_projected_pointer_position.ts
@@ -64,7 +64,10 @@ function getProjectedPointerPosition(
   };
 }
 
-function getPosRelativeToPanel(panelScale: ScaleBand, pos: number): { pos: number; value: PrimitiveValue } {
+function getPosRelativeToPanel(
+  panelScale: ScaleBand<number | string>,
+  pos: number,
+): { pos: number; value: PrimitiveValue } {
   const outerPadding = panelScale.outerPadding * panelScale.step;
   const innerPadding = panelScale.innerPadding * panelScale.step;
   const numOfDomainSteps = panelScale.domain.length;
diff --git a/packages/charts/src/chart_types/xy_chart/state/selectors/is_tooltip_snap_enabled.ts b/packages/charts/src/chart_types/xy_chart/state/selectors/is_tooltip_snap_enabled.ts
index b24093159c..22894ff56c 100644
--- a/packages/charts/src/chart_types/xy_chart/state/selectors/is_tooltip_snap_enabled.ts
+++ b/packages/charts/src/chart_types/xy_chart/state/selectors/is_tooltip_snap_enabled.ts
@@ -17,6 +17,6 @@ export const isTooltipSnapEnableSelector = createCustomCachedSelector(
   (seriesGeometries, snap) => isTooltipSnapEnabled(seriesGeometries.scales.xScale, snap),
 );
 
-function isTooltipSnapEnabled(xScale: Scale, snap: boolean) {
+function isTooltipSnapEnabled(xScale: Scale<number | string>, snap: boolean) {
   return (xScale && xScale.bandwidth > 0) || snap;
 }
diff --git a/packages/charts/src/chart_types/xy_chart/state/selectors/on_brush_end_caller.ts b/packages/charts/src/chart_types/xy_chart/state/selectors/on_brush_end_caller.ts
index ac0b7dfe2e..2cb63c4dd1 100644
--- a/packages/charts/src/chart_types/xy_chart/state/selectors/on_brush_end_caller.ts
+++ b/packages/charts/src/chart_types/xy_chart/state/selectors/on_brush_end_caller.ts
@@ -83,7 +83,7 @@ export function createOnBrushEndCaller(): (state: GlobalChartState) => void {
                 lastDrag,
                 rotation,
                 histogramMode,
-                xScale,
+                xScale as Scale<number>,
                 smallMultipleScales,
                 minBrushDelta,
                 roundHistogramBrushValues,
@@ -134,7 +134,7 @@ function getXBrushExtent(
   lastDrag: DragState,
   rotation: Rotation,
   histogramMode: boolean,
-  xScale: Scale,
+  xScale: Scale<number>,
   smallMultipleScales: SmallMultipleScales,
   minBrushDelta?: number,
   roundHistogramBrushValues?: boolean,
@@ -190,7 +190,7 @@ function getYBrushExtents(
   chartDimensions: Dimensions,
   lastDrag: DragState,
   rotation: Rotation,
-  yScales: Map<GroupId, Scale>,
+  yScales: Map<GroupId, Scale<number | string>>,
   smallMultipleScales: SmallMultipleScales,
   minBrushDelta?: number,
 ): GroupBrushExtent[] | undefined {
@@ -212,8 +212,8 @@ function getYBrushExtents(
 
     const minPosScaled = yScale.invert(minPos);
     const maxPosScaled = yScale.invert(maxPos);
-    const minValue = clamp(minPosScaled, yScale.domain[0], maxPosScaled);
-    const maxValue = clamp(minPosScaled, maxPosScaled, yScale.domain[1]);
+    const minValue = clamp(minPosScaled, (yScale as Scale<number>).domain[0], maxPosScaled);
+    const maxValue = clamp(minPosScaled, maxPosScaled, (yScale as Scale<number>).domain[1]);
     yValues.push({ extent: [minValue, maxValue], groupId });
   });
   return yValues.length === 0 ? undefined : yValues;
diff --git a/packages/charts/src/chart_types/xy_chart/state/utils/types.ts b/packages/charts/src/chart_types/xy_chart/state/utils/types.ts
index 80896cc132..559668a7c8 100644
--- a/packages/charts/src/chart_types/xy_chart/state/utils/types.ts
+++ b/packages/charts/src/chart_types/xy_chart/state/utils/types.ts
@@ -42,8 +42,8 @@ export interface GeometriesCounts {
 
 /** @internal */
 export interface ComputedScales {
-  xScale: Scale;
-  yScales: Map<GroupId, Scale>;
+  xScale: Scale<number | string>;
+  yScales: Map<GroupId, Scale<number | string>>;
 }
 
 /** @internal */
diff --git a/packages/charts/src/chart_types/xy_chart/state/utils/utils.ts b/packages/charts/src/chart_types/xy_chart/state/utils/utils.ts
index 8446af591f..3ad34dc4dd 100644
--- a/packages/charts/src/chart_types/xy_chart/state/utils/utils.ts
+++ b/packages/charts/src/chart_types/xy_chart/state/utils/utils.ts
@@ -251,7 +251,7 @@ export function isHistogramModeEnabled(seriesSpecs: BasicSeriesSpec[]): boolean
 
 /** @internal */
 export function computeXScaleOffset(
-  xScale: Scale,
+  xScale: Scale<number | string>,
   enableHistogramMode: boolean,
   histogramModeAlignment: HistogramModeAlignment = HistogramModeAlignments.Start,
 ): number {
@@ -278,9 +278,9 @@ export function computeXScaleOffset(
 function renderGeometries(
   dataSeries: DataSeries[],
   xDomain: XDomain,
-  yScales: Map<GroupId, Scale>,
-  smVScale: Scale,
-  smHScale: Scale,
+  yScales: Map<GroupId, Scale<number | string>>,
+  smVScale: Scale<number | string>,
+  smHScale: Scale<number | string>,
   barIndexOrderPerPanel: Record<string, string[]>,
   seriesSpecs: BasicSeriesSpec[],
   seriesColorsMap: Map<SeriesKey, Color>,
@@ -379,7 +379,7 @@ function renderGeometries(
         shift,
         ds,
         xScale,
-        yScale,
+        yScale as Scale<number>,
         panel,
         chartRotation,
         spec.minBarHeight ?? 0,
@@ -405,7 +405,7 @@ function renderGeometries(
         (xScale.bandwidth * bubbleShift) / 2,
         ds,
         xScale,
-        yScale,
+        yScale as Scale<number>,
         color,
         panel,
         isBandedSpec(spec.y0Accessors),
@@ -438,7 +438,7 @@ function renderGeometries(
         (xScale.bandwidth * lineShift) / 2,
         ds,
         xScale,
-        yScale,
+        yScale as Scale<number>,
         panel,
         color,
         spec.curve || CurveType.LINEAR,
@@ -471,7 +471,7 @@ function renderGeometries(
         (xScale.bandwidth * areaShift) / 2,
         ds,
         xScale,
-        yScale,
+        yScale as Scale<number>,
         panel,
         color,
         spec.curve || CurveType.LINEAR,
diff --git a/packages/charts/src/chart_types/xy_chart/utils/axis_utils.test.ts b/packages/charts/src/chart_types/xy_chart/utils/axis_utils.test.ts
index fa607e25b3..929d7e40ba 100644
--- a/packages/charts/src/chart_types/xy_chart/utils/axis_utils.test.ts
+++ b/packages/charts/src/chart_types/xy_chart/utils/axis_utils.test.ts
@@ -253,7 +253,7 @@ describe('Axis computational utils', () => {
         { rotation: 0 },
         0,
       )(verticalAxisSpec, [100, 0]);
-      const axisPositions = getAvailableTicks(verticalAxisSpec, scale!, 0, false, (v) => `${v}`, 0);
+      const axisPositions = getAvailableTicks(verticalAxisSpec, scale as Scale<number>, 0, false, (v) => `${v}`, 0);
       const expectedAxisPositions = [
         { label: '0', axisTickLabel: '0', position: 100, value: 0 },
         { label: '0.1', axisTickLabel: '0.1', position: 90, value: 0.1 },
@@ -277,7 +277,14 @@ describe('Axis computational utils', () => {
         { rotation: 0 },
         0,
       )(verticalAxisSpec, [100, 0]);
-      const axisPositions = getAvailableTicks(verticalAxisSpec, scale!, 0, false, (v) => `${v}`, rotationalOffset);
+      const axisPositions = getAvailableTicks(
+        verticalAxisSpec,
+        scale as Scale<number>,
+        0,
+        false,
+        (v) => `${v}`,
+        rotationalOffset,
+      );
       const expectedAxisPositions = [
         { label: '0', axisTickLabel: '0', position: 100 + rotationalOffset, value: 0 },
         { label: '0.1', axisTickLabel: '0.1', position: 90 + rotationalOffset, value: 0.1 },
@@ -308,7 +315,7 @@ describe('Axis computational utils', () => {
       )(horizontalAxisSpec, [100, 0]);
       const histogramAxisPositions = getAvailableTicks(
         horizontalAxisSpec,
-        xScale!,
+        xScale as Scale<number>,
         1,
         enableHistogramMode,
         (v) => `${v}`,
@@ -332,7 +339,7 @@ describe('Axis computational utils', () => {
       )(horizontalAxisSpec, [100, 0]);
       const histogramAxisPositions = getAvailableTicks(
         horizontalAxisSpec,
-        xScale!,
+        xScale as Scale<number>,
         1,
         enableHistogramMode,
         (v) => `${v}`,
@@ -373,7 +380,7 @@ describe('Axis computational utils', () => {
       )(horizontalAxisSpec, [100, 0]);
       const histogramAxisPositions = getAvailableTicks(
         horizontalAxisSpec,
-        xScale!,
+        xScale as Scale<number>,
         1,
         enableHistogramMode,
         (v) => `${v}`,
@@ -1281,10 +1288,14 @@ describe('Axis computational utils', () => {
       domain: [1547190000000, 1547622000000],
       minInterval: 86400000,
     });
-    const scale: Scale = computeXScale({ xDomain: xDomainTime, totalBarsInCluster: 0, range: [0, 603.5] });
+    const scale: Scale<number | string> = computeXScale({
+      xDomain: xDomainTime,
+      totalBarsInCluster: 0,
+      range: [0, 603.5],
+    });
     const offset = 0;
     const tickFormatOption = { timeZone: 'utc+1' };
-    expect(enableDuplicatedTicks(axisSpec, scale, offset, (v) => `${v}`, tickFormatOption)).toEqual([
+    expect(enableDuplicatedTicks(axisSpec, scale as Scale<number>, offset, (v) => `${v}`, tickFormatOption)).toEqual([
       { value: 1547208000000, label: '2019-01-11', axisTickLabel: '2019-01-11', position: 25.145833333333332 },
       { value: 1547251200000, label: '2019-01-12', axisTickLabel: '2019-01-12', position: 85.49583333333334 },
       { value: 1547337600000, label: '2019-01-13', axisTickLabel: '2019-01-13', position: 206.19583333333333 },
@@ -1314,10 +1325,14 @@ describe('Axis computational utils', () => {
       domain: [1547190000000, 1547622000000],
       minInterval: 86400000,
     });
-    const scale: Scale = computeXScale({ xDomain: xDomainTime, totalBarsInCluster: 0, range: [0, 603.5] });
+    const scale: Scale<number | string> = computeXScale({
+      xDomain: xDomainTime,
+      totalBarsInCluster: 0,
+      range: [0, 603.5],
+    });
     const offset = 0;
     const tickFormatOption = { timeZone: xDomainTime.timeZone };
-    const ticks = enableDuplicatedTicks(axisSpec, scale, offset, (v) => `${v}`, tickFormatOption);
+    const ticks = enableDuplicatedTicks(axisSpec, scale as Scale<number>, offset, (v) => `${v}`, tickFormatOption);
     const tickLabels = ticks.map(({ label }) => ({ label }));
     expect(tickLabels).toEqual([
       { label: '12:00' },
@@ -1354,10 +1369,14 @@ describe('Axis computational utils', () => {
       domain: [1547190000000, 1547622000000],
       minInterval: 86400000,
     });
-    const scale: Scale = computeXScale({ xDomain: xDomainTime, totalBarsInCluster: 0, range: [0, 603.5] });
+    const scale: Scale<number | string> = computeXScale({
+      xDomain: xDomainTime,
+      totalBarsInCluster: 0,
+      range: [0, 603.5],
+    });
     const offset = 0;
     const tickFormatOption = { timeZone: 'utc+1' };
-    expect(enableDuplicatedTicks(axisSpec, scale, offset, (v) => `${v}`, tickFormatOption)).toEqual([
+    expect(enableDuplicatedTicks(axisSpec, scale as Scale<number>, offset, (v) => `${v}`, tickFormatOption)).toEqual([
       { value: 1547208000000, label: '2019-01-11', axisTickLabel: '2019-01-11', position: 25.145833333333332 },
       { value: 1547251200000, label: '2019-01-12', axisTickLabel: '2019-01-12', position: 85.49583333333334 },
       { value: 1547294400000, label: '2019-01-12', axisTickLabel: '2019-01-12', position: 145.84583333333333 },
@@ -1392,10 +1411,10 @@ describe('Axis computational utils', () => {
       domain: [1547190000000, 1547622000000],
       minInterval: 86400000,
     });
-    const scale: Scale = computeXScale({ xDomain: xDomainTime, totalBarsInCluster: 0, range: [0, 603.5] });
+    const scale = computeXScale({ xDomain: xDomainTime, totalBarsInCluster: 0, range: [0, 603.5] });
     const offset = 0;
     const tickFormatOption = { timeZone: 'utc+1' };
-    expect(enableDuplicatedTicks(axisSpec, scale, offset, (v) => `${v}`, tickFormatOption)).toEqual([
+    expect(enableDuplicatedTicks(axisSpec, scale as Scale<number>, offset, (v) => `${v}`, tickFormatOption)).toEqual([
       { value: 1547208000000, label: '2019-01-11', axisTickLabel: '2019-01-11', position: 25.145833333333332 },
       { value: 1547251200000, label: '2019-01-12', axisTickLabel: '2019-01-12', position: 85.49583333333334 },
       { value: 1547294400000, label: '2019-01-12', axisTickLabel: '2019-01-12', position: 145.84583333333333 },
diff --git a/packages/charts/src/chart_types/xy_chart/utils/axis_utils.ts b/packages/charts/src/chart_types/xy_chart/utils/axis_utils.ts
index 967d3b7258..c65fe3c77b 100644
--- a/packages/charts/src/chart_types/xy_chart/utils/axis_utils.ts
+++ b/packages/charts/src/chart_types/xy_chart/utils/axis_utils.ts
@@ -86,7 +86,10 @@ export function getScaleForAxisSpec(
   barsPadding?: number,
   enableHistogramMode?: boolean,
 ) {
-  return ({ groupId, integersOnly, position }: Pick<AxisSpec, 'groupId' | 'integersOnly' | 'position'>, range: Range) =>
+  return (
+    { groupId, integersOnly, position }: Pick<AxisSpec, 'groupId' | 'integersOnly' | 'position'>,
+    range: Range,
+  ): Scale<number | string> | null =>
     isXDomain(position, chartRotation)
       ? computeXScale({ xDomain, totalBarsInCluster, range, barsPadding, enableHistogramMode, integersOnly })
       : computeYScales({ yDomains, range, integersOnly }).get(groupId) ?? null;
@@ -249,7 +252,7 @@ function axisMinMax(axisPosition: Position, chartRotation: Rotation, { width, he
 /** @internal */
 export function getAvailableTicks(
   axisSpec: AxisSpec,
-  scale: Scale,
+  scale: Scale<number>,
   totalBarsInCluster: number,
   enableHistogramMode: boolean,
   fallBackTickFormatter: TickFormatter,
@@ -308,7 +311,7 @@ export function getAvailableTicks(
 /** @internal */
 export function enableDuplicatedTicks(
   axisSpec: AxisSpec,
-  scale: Scale,
+  scale: Scale<number>,
   offset: number,
   fallBackTickFormatter: TickFormatter,
   tickFormatOptions?: TickFormatterOptions,
@@ -446,7 +449,7 @@ export function getAxesGeometries(
         const vertical = isVerticalAxis(axisSpec.position);
         const allTicks = getAvailableTicks(
           axisSpec,
-          scale,
+          scale as Scale<number>,
           totalGroupsCount,
           enableHistogramMode,
           vertical ? fallBackTickFormatter : defaultTickFormatter,
diff --git a/packages/charts/src/chart_types/xy_chart/utils/scales.ts b/packages/charts/src/chart_types/xy_chart/utils/scales.ts
index 0bfa5b3374..53ef0f31ab 100644
--- a/packages/charts/src/chart_types/xy_chart/utils/scales.ts
+++ b/packages/charts/src/chart_types/xy_chart/utils/scales.ts
@@ -44,7 +44,7 @@ interface XScaleOptions {
  * Compute the x scale used to align geometries to the x axis.
  * @internal
  */
-export function computeXScale(options: XScaleOptions): Scale {
+export function computeXScale(options: XScaleOptions): Scale<number | string> {
   const { xDomain, totalBarsInCluster, range, barsPadding, enableHistogramMode, integersOnly } = options;
   const { type, nice, minInterval, domain, isBandScale, timeZone, logBase, desiredTickCount } = xDomain;
   const rangeDiff = Math.abs(range[1] - range[0]);
@@ -110,7 +110,7 @@ interface YScaleOptions {
  * Compute the y scales, one per groupId for the y axis.
  * @internal
  */
-export function computeYScales(options: YScaleOptions): Map<GroupId, Scale> {
+export function computeYScales(options: YScaleOptions): Map<GroupId, Scale<number | string>> {
   const { yDomains, range, integersOnly } = options;
   return yDomains.reduce(
     (
@@ -146,6 +146,6 @@ export function computeYScales(options: YScaleOptions): Map<GroupId, Scale> {
       yScales.set(groupId, yScale);
       return yScales;
     },
-    new Map<GroupId, Scale>(),
+    new Map<GroupId, Scale<number | string>>(),
   );
 }
diff --git a/packages/charts/src/mocks/scale/scale.ts b/packages/charts/src/mocks/scale/scale.ts
index 74a5657e9c..8a9ab204b1 100644
--- a/packages/charts/src/mocks/scale/scale.ts
+++ b/packages/charts/src/mocks/scale/scale.ts
@@ -12,7 +12,7 @@ import { mergePartial } from '../../utils/common';
 
 /** @internal */
 export class MockScale {
-  private static readonly base: Scale = {
+  private static readonly base: Scale<number | string> = {
     scaleOrThrow: jest.fn().mockImplementation((x) => x),
     scale: jest.fn().mockImplementation((x) => x),
     type: ScaleType.Linear,
@@ -32,7 +32,7 @@ export class MockScale {
     isInverted: false,
   };
 
-  static default(partial: Partial<Scale>): Scale {
-    return mergePartial<Scale>(MockScale.base, partial);
+  static default(partial: Partial<Scale<number | string>>): Scale<number | string> {
+    return mergePartial<Scale<number | string>>(MockScale.base, partial);
   }
 }
diff --git a/packages/charts/src/scales/index.ts b/packages/charts/src/scales/index.ts
index e45b697b89..b504e82a9c 100644
--- a/packages/charts/src/scales/index.ts
+++ b/packages/charts/src/scales/index.ts
@@ -28,14 +28,14 @@ export type ScaleBandType = ScaleOrdinalType;
  * The the value is mapped depending on the `type` (linear, log, sqrt, time, ordinal)
  * @internal
  */
-export interface Scale {
-  domain: any[];
+export interface Scale<T> {
+  domain: T[];
   range: number[];
   /**
    * Returns the distance between the starts of adjacent bands.
    */
   step: number;
-  ticks: () => any[];
+  ticks: () => T[];
   scale: (value?: PrimitiveValue) => number | null;
   scaleOrThrow(value?: PrimitiveValue): number;
   pureScale: (value?: PrimitiveValue) => number | null;
diff --git a/packages/charts/src/scales/scale_band.test.ts b/packages/charts/src/scales/scale_band.test.ts
index 4fdbe7089f..7d64fb5cb0 100644
--- a/packages/charts/src/scales/scale_band.test.ts
+++ b/packages/charts/src/scales/scale_band.test.ts
@@ -44,15 +44,6 @@ describe('Scale Band', () => {
     expect(scale.isValueInDomain('z')).toBe(false);
     expect(scale.isValueInDomain(null)).toBe(false);
   });
-  it('shall scale a any domain', () => {
-    const scale = new ScaleBand(['a', 1, null, 'd', undefined], [0, 100]);
-    expect(scale.bandwidth).toBe(20);
-    expect(scale.scale('a')).toBe(0);
-    expect(scale.scale(1)).toBe(20);
-    expect(scale.scale(null)).toBe(40);
-    expect(scale.scale('d')).toBe(60);
-    expect(scale.scale()).toBe(80);
-  });
   it('shall scale remove domain duplicates', () => {
     const scale = new ScaleBand(['a', 'a', 'b', 'c', 'c', 'd'], [0, 100]);
     expect(scale.bandwidth).toBe(25);
diff --git a/packages/charts/src/scales/scale_band.ts b/packages/charts/src/scales/scale_band.ts
index 04b6bec910..538dd093fd 100644
--- a/packages/charts/src/scales/scale_band.ts
+++ b/packages/charts/src/scales/scale_band.ts
@@ -20,7 +20,7 @@ import { ScaleType } from './constants';
  * Categorical scale
  * @internal
  */
-export class ScaleBand implements Scale {
+export class ScaleBand<T extends number | string> implements Scale<T> {
   readonly bandwidth: number;
 
   readonly bandwidthPadding: number;
@@ -35,13 +35,13 @@ export class ScaleBand implements Scale {
 
   readonly type: ScaleBandType;
 
-  readonly domain: any[];
+  readonly domain: T[];
 
   readonly range: number[];
 
   readonly isInverted: boolean;
 
-  readonly invertedScale: ScaleQuantize<number>;
+  readonly invertedScale: ScaleQuantize<T>;
 
   readonly minInterval: number;
 
@@ -50,7 +50,7 @@ export class ScaleBand implements Scale {
   private readonly d3Scale: D3ScaleBand<NonNullable<PrimitiveValue>>;
 
   constructor(
-    domain: any[],
+    domain: T[],
     range: Range,
     overrideBandwidth?: number,
     /**
@@ -81,7 +81,7 @@ export class ScaleBand implements Scale {
     this.bandwidth = this.d3Scale.bandwidth() || 0;
     this.originalBandwidth = this.d3Scale.bandwidth() || 0;
     this.step = this.d3Scale.step();
-    this.domain = this.d3Scale.domain();
+    this.domain = [...new Set(domain)];
     this.range = range.slice();
     if (overrideBandwidth) {
       this.bandwidth = overrideBandwidth * (1 - safeBarPadding);
@@ -89,7 +89,7 @@ export class ScaleBand implements Scale {
     this.bandwidthPadding = this.bandwidth;
     // TO FIX: we are assuming that it's ordered
     this.isInverted = this.domain[0] > this.domain[1];
-    this.invertedScale = scaleQuantize().domain(range).range(this.domain);
+    this.invertedScale = scaleQuantize<T>().domain(range).range(this.domain);
     this.minInterval = 0;
   }
 
diff --git a/packages/charts/src/scales/scale_continuous.ts b/packages/charts/src/scales/scale_continuous.ts
index 8b1ad803be..f0ef6148f8 100644
--- a/packages/charts/src/scales/scale_continuous.ts
+++ b/packages/charts/src/scales/scale_continuous.ts
@@ -282,7 +282,7 @@ const defaultScaleOptions: ScaleOptions = {
  * Continuous scale
  * @internal
  */
-export class ScaleContinuous implements Scale {
+export class ScaleContinuous implements Scale<number> {
   readonly bandwidth: number;
 
   readonly totalBarsInCluster: number;
diff --git a/packages/charts/src/scales/types.ts b/packages/charts/src/scales/types.ts
index e508ffb54d..c05234bd09 100644
--- a/packages/charts/src/scales/types.ts
+++ b/packages/charts/src/scales/types.ts
@@ -15,7 +15,7 @@ import { ScaleContinuous } from './scale_continuous';
  * Check if a scale is logaritmic
  * @internal
  */
-export function isLogarithmicScale(scale: Scale): scale is ScaleContinuous {
+export function isLogarithmicScale(scale: Scale<number | string>): scale is ScaleContinuous {
   return scale.type === ScaleType.Log;
 }
 
@@ -23,7 +23,7 @@ export function isLogarithmicScale(scale: Scale): scale is ScaleContinuous {
  * Check if a scale is Band
  * @internal
  */
-export function isBandScale(scale: Scale): scale is ScaleBand {
+export function isBandScale<T extends string | number>(scale: Scale<T>): scale is ScaleBand<T> {
   return scale.type === ScaleType.Ordinal;
 }
 
@@ -31,6 +31,6 @@ export function isBandScale(scale: Scale): scale is ScaleBand {
  * Check if a scale is continuous
  * @internal
  */
-export function isContinuousScale(scale: Scale): scale is ScaleContinuous {
+export function isContinuousScale(scale: Scale<number | string>): scale is ScaleContinuous {
   return scale.type !== ScaleType.Ordinal;
 }
diff --git a/packages/charts/src/utils/events.ts b/packages/charts/src/utils/events.ts
index 15ad1f7ade..76c65a3d72 100644
--- a/packages/charts/src/utils/events.ts
+++ b/packages/charts/src/utils/events.ts
@@ -12,7 +12,7 @@ import { DragState } from '../state/chart_state';
 
 /** @internal */
 export function isValidPointerOverEvent(
-  mainScale: Scale,
+  mainScale: Scale<number | string>,
   event: PointerEvent | null | undefined,
 ): event is PointerOverEvent {
   return isPointerOverEvent(event) && (event.unit === undefined || event.unit === mainScale.unit);
@@ -33,13 +33,6 @@ export function hasDragged(prevProps: DragCheckProps | null, nextProps: DragChec
     return false;
   }
   const prevLastDrag = prevProps !== null ? prevProps.lastDrag : null;
-  const nextLastDrag = nextProps !== null ? nextProps.lastDrag : null;
-
-  if (prevLastDrag === null && nextLastDrag !== null) {
-    return true;
-  }
-  if (prevLastDrag !== null && nextLastDrag !== null && prevLastDrag.end.time !== nextLastDrag.end.time) {
-    return true;
-  }
-  return false;
+  const nextLastDrag = nextProps.lastDrag;
+  return nextLastDrag !== null && (prevLastDrag === null || prevLastDrag.end.time !== nextLastDrag.end.time);
 }