diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-grids-basic-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-grids-basic-visually-looks-correct-1-snap.png
index 98f3b97596..21601db908 100644
Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-grids-basic-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-grids-basic-visually-looks-correct-1-snap.png differ
diff --git a/integration/tests/__image_snapshots__/heatmap-stories-test-ts-heatmap-stories-time-snap-with-dataset-3-1-snap.png b/integration/tests/__image_snapshots__/heatmap-stories-test-ts-heatmap-stories-time-snap-with-dataset-3-1-snap.png
index 747e09e5de..8f309b8425 100644
Binary files a/integration/tests/__image_snapshots__/heatmap-stories-test-ts-heatmap-stories-time-snap-with-dataset-3-1-snap.png and b/integration/tests/__image_snapshots__/heatmap-stories-test-ts-heatmap-stories-time-snap-with-dataset-3-1-snap.png differ
diff --git a/package.json b/package.json
index b70b401439..beb3d84d29 100644
--- a/package.json
+++ b/package.json
@@ -68,8 +68,8 @@
     "@elastic/datemath": "^5.0.3",
     "@elastic/eui": "^41.3.0",
     "@mdx-js/loader": "^1.6.6",
-    "@microsoft/api-documenter": "^7.13.54",
-    "@microsoft/api-extractor": "^7.18.11",
+    "@microsoft/api-documenter": "^7.13.63",
+    "@microsoft/api-extractor": "^7.18.16",
     "@semantic-release/changelog": "^5.0.1",
     "@semantic-release/commit-analyzer": "^8.0.1",
     "@semantic-release/exec": "^5.0.0",
diff --git a/packages/charts/api/charts.api.md b/packages/charts/api/charts.api.md
index bb7f72cfc3..b06c57d671 100644
--- a/packages/charts/api/charts.api.md
+++ b/packages/charts/api/charts.api.md
@@ -5,23 +5,29 @@
 ```ts
 
 import { $Values } from 'utility-types';
+import { ComponentProps } from 'react';
 import { ComponentType } from 'react';
+import { FC } from 'react';
 import { LegacyRef } from 'react';
+import { OptionalKeys } from 'utility-types';
 import { default as React_2 } from 'react';
 import { ReactChild } from 'react';
 import { ReactNode } from 'react';
+import { RequiredKeys } from 'utility-types';
 
 // @public (undocumented)
 export type A = number;
 
+// Warning: (ae-forgotten-export) The symbol "DatumKey" needs to be exported by the entry point index.d.ts
+//
 // @public
-export type Accessor = AccessorObjectKey | AccessorArrayIndex;
+export type Accessor<D extends BaseDatum = never> = DatumKey<D> | AccessorObjectKey | AccessorArrayIndex;
 
 // @public
 export type AccessorArrayIndex = number;
 
 // @public
-export type AccessorFn = UnaryAccessorFn;
+export type AccessorFn<D extends BaseDatum = any, Return = any> = UnaryAccessorFn<D, Return>;
 
 // @public
 export type AccessorObjectKey = string;
@@ -80,7 +86,7 @@ export type AnnotationPortalSettings = TooltipPortalSettings<'chart'> & {
 };
 
 // @public (undocumented)
-export type AnnotationSpec = LineAnnotationSpec | RectAnnotationSpec;
+export type AnnotationSpec<D extends BaseDatum = any> = LineAnnotationSpec<D> | RectAnnotationSpec;
 
 // @public (undocumented)
 export type AnnotationTooltipFormatter = (details?: string) => JSX.Element | null;
@@ -116,14 +122,16 @@ export type AreaFitStyle = Visible & Opacity & {
     texture?: TexturedStyles;
 };
 
-// Warning: (ae-forgotten-export) The symbol "SpecRequiredProps" needs to be exported by the entry point index.d.ts
-// Warning: (ae-forgotten-export) The symbol "SpecOptionalProps" needs to be exported by the entry point index.d.ts
+// Warning: (ae-forgotten-export) The symbol "SFProps" needs to be exported by the entry point index.d.ts
 //
+// @public
+export const AreaSeries: <D extends BaseDatum = any>(props: SFProps<AreaSeriesSpec<D>, "chartType" | "specType" | "seriesType", "groupId" | "xScaleType" | "yScaleType" | "hideInLegend" | "histogramModeAlignment", "sortIndex" | "fit" | "timeZone" | "name" | "color" | "curve" | "areaSeriesStyle" | "xNice" | "yNice" | "useDefaultGroupDomain" | "displayValueSettings" | "y0AccessorFormat" | "y1AccessorFormat" | "filterSeriesInTooltip" | "tickFormat" | "y0Accessors" | "splitSeriesAccessors" | "stackAccessors" | "markSizeAccessor" | "markFormat" | "stackMode" | "pointStyleAccessor", "data" | "id" | "xAccessor" | "yAccessors">) => null;
+
 // @public (undocumented)
-export const AreaSeries: React_2.FunctionComponent<SpecRequiredProps & SpecOptionalProps>;
+export type AreaSeriesProps = ComponentProps<typeof AreaSeries>;
 
 // @public
-export type AreaSeriesSpec = BasicSeriesSpec & HistogramConfig & Postfixes & {
+export type AreaSeriesSpec<D extends BaseDatum = Datum> = BasicSeriesSpec<D, 'area'> & HistogramConfig & Postfixes & {
     seriesType: typeof SeriesType.Area;
     curve?: CurveType;
     areaSeriesStyle?: RecursivePartial<AreaSeriesStyle>;
@@ -170,15 +178,15 @@ export interface ArrayNode extends NodeDescriptor {
     [SORT_INDEX_KEY]: number;
 }
 
-// Warning: (ae-forgotten-export) The symbol "SpecRequired" needs to be exported by the entry point index.d.ts
-// Warning: (ae-forgotten-export) The symbol "SpecOptionals" needs to be exported by the entry point index.d.ts
-//
-// @public (undocumented)
-export const Axis: React_2.FunctionComponent<SpecRequired & SpecOptionals>;
+// @public
+export const Axis: FC<SFProps<AxisSpec, "chartType" | "specType", "position" | "groupId" | "hide" | "showOverlappingTicks" | "showOverlappingLabels" | "timeAxisLayerCount", "style" | "title" | "domain" | "integersOnly" | "ticks" | "tickFormat" | "gridLine" | "showGridLines" | "labelFormat" | "showDuplicatedTicks", "id">>;
 
 // @public (undocumented)
 export type AxisId = string;
 
+// @public (undocumented)
+export type AxisProps = ComponentProps<typeof Axis>;
+
 // @public
 export interface AxisSpec extends Spec {
     // (undocumented)
@@ -268,14 +276,14 @@ export interface BandFillColorAccessorInput {
     value: number;
 }
 
-// Warning: (ae-forgotten-export) The symbol "SpecRequiredProps" needs to be exported by the entry point index.d.ts
-// Warning: (ae-forgotten-export) The symbol "SpecOptionalProps" needs to be exported by the entry point index.d.ts
-//
+// @public
+export const BarSeries: <D extends BaseDatum = any>(props: SFProps<BarSeriesSpec<D>, "chartType" | "specType" | "seriesType", "groupId" | "xScaleType" | "yScaleType" | "hideInLegend" | "enableHistogramMode", "sortIndex" | "timeZone" | "name" | "color" | "barSeriesStyle" | "xNice" | "yNice" | "useDefaultGroupDomain" | "displayValueSettings" | "y0AccessorFormat" | "y1AccessorFormat" | "filterSeriesInTooltip" | "tickFormat" | "y0Accessors" | "splitSeriesAccessors" | "stackAccessors" | "markSizeAccessor" | "stackMode" | "styleAccessor" | "minBarHeight", "data" | "id" | "xAccessor" | "yAccessors">) => null;
+
 // @public (undocumented)
-export const BarSeries: React_2.FunctionComponent<SpecRequiredProps_2 & SpecOptionalProps_2>;
+export type BarSeriesProps = ComponentProps<typeof BarSeries>;
 
 // @public
-export type BarSeriesSpec = BasicSeriesSpec & Postfixes & {
+export type BarSeriesSpec<D extends BaseDatum = Datum> = BasicSeriesSpec<D, 'bar'> & Postfixes & {
     seriesType: typeof SeriesType.Bar;
     enableHistogramMode?: boolean;
     barSeriesStyle?: RecursivePartial<BarSeriesStyle>;
@@ -301,11 +309,11 @@ export type BarStyleAccessor = (datum: DataSeriesDatum, seriesIdentifier: XYChar
 export type BarStyleOverride = RecursivePartial<BarSeriesStyle> | Color | null;
 
 // @public (undocumented)
-export interface BaseAnnotationSpec<T extends typeof AnnotationType.Rectangle | typeof AnnotationType.Line, D extends RectAnnotationDatum | LineAnnotationDatum, S extends RectAnnotationStyle | LineAnnotationStyle> extends Spec, AnnotationPortalSettings {
+export interface BaseAnnotationSpec<T extends typeof AnnotationType.Rectangle | typeof AnnotationType.Line, AD extends RectAnnotationDatum | LineAnnotationDatum<D>, S extends RectAnnotationStyle | LineAnnotationStyle, D = never> extends Spec, AnnotationPortalSettings {
     annotationType: T;
     // (undocumented)
     chartType: typeof ChartType.XYAxis;
-    dataValues: D[];
+    dataValues: AD[];
     groupId: GroupId;
     hideTooltips?: boolean;
     // (undocumented)
@@ -314,6 +322,9 @@ export interface BaseAnnotationSpec<T extends typeof AnnotationType.Rectangle |
     zIndex?: number;
 }
 
+// @public
+export type BaseDatum = Record<string, any> | any[];
+
 // @public (undocumented)
 export interface BasePointerEvent {
     // (undocumented)
@@ -325,10 +336,10 @@ export interface BasePointerEvent {
 // @public (undocumented)
 export type BasicListener = () => undefined | void;
 
+// Warning: (ae-forgotten-export) The symbol "MarkFormatter" needs to be exported by the entry point index.d.ts
+//
 // @public (undocumented)
-export type BasicSeriesSpec = SeriesSpec & SeriesAccessors & SeriesScales & {
-    markFormat?: TickFormatter<number>;
-};
+export type BasicSeriesSpec<D extends BaseDatum = Datum, Type extends string = ''> = SeriesSpec<D> & SeriesAccessors<D> & SeriesScales & MarkFormatter<Type>;
 
 // @public
 export const BinAgg: Readonly<{
@@ -355,14 +366,16 @@ export type BrushEndListener = (brushAreaEvent: BrushEvent) => void;
 // @public (undocumented)
 export type BrushEvent = XYBrushEvent | HeatmapBrushEvent;
 
-// Warning: (ae-forgotten-export) The symbol "SpecRequiredProps" needs to be exported by the entry point index.d.ts
-// Warning: (ae-forgotten-export) The symbol "SpecOptionalProps" needs to be exported by the entry point index.d.ts
+// Warning: (ae-incompatible-release-tags) The symbol "BubbleSeries" is marked as @public, but its signature references "BubbleSeriesSpec" which is marked as @alpha
 //
-// @alpha
-export const BubbleSeries: React_2.FunctionComponent<SpecRequiredProps_3 & SpecOptionalProps_3>;
+// @public
+export const BubbleSeries: <D extends BaseDatum = any>(props: SFProps<BubbleSeriesSpec<D>, "chartType" | "specType" | "seriesType", "groupId" | "xScaleType" | "yScaleType" | "hideInLegend", "sortIndex" | "timeZone" | "name" | "color" | "bubbleSeriesStyle" | "xNice" | "yNice" | "useDefaultGroupDomain" | "displayValueSettings" | "y0AccessorFormat" | "y1AccessorFormat" | "filterSeriesInTooltip" | "tickFormat" | "y0Accessors" | "splitSeriesAccessors" | "stackAccessors" | "markSizeAccessor" | "markFormat" | "pointStyleAccessor", "data" | "id" | "xAccessor" | "yAccessors">) => null;
+
+// @public (undocumented)
+export type BubbleSeriesProps = ComponentProps<typeof BubbleSeries>;
 
 // @alpha
-export type BubbleSeriesSpec = BasicSeriesSpec & {
+export type BubbleSeriesSpec<D extends BaseDatum = Datum> = BasicSeriesSpec<D, 'bubble'> & {
     seriesType: typeof SeriesType.Bubble;
     bubbleSeriesStyle?: RecursivePartial<BubbleSeriesStyle>;
     pointStyleAccessor?: PointStyleAccessor;
@@ -503,7 +516,7 @@ export const ColorVariant: Readonly<{
 export type ColorVariant = $Values<typeof ColorVariant>;
 
 // @public
-export type ComponentWithAnnotationDatum = ComponentType<LineAnnotationDatum>;
+export type ComponentWithAnnotationDatum<D = any> = ComponentType<LineAnnotationDatum<D>>;
 
 // @public
 export function computeRatioByGroups<T extends Record<string, unknown>>(data: T[], groupAccessors: GroupKeysOrKeyFn<T>, valueAccessor: (k: T) => number | null | undefined, ratioKeyName: string): (T & {
@@ -751,9 +764,6 @@ export const DEFAULT_TOOLTIP_TYPE: "vertical";
 // @public (undocumented)
 export function defaultPartitionValueFormatter(d: number): string;
 
-// @public (undocumented)
-export type DefaultSettingsProps = 'id' | 'chartType' | 'specType' | 'rendering' | 'rotation' | 'resizeDebounce' | 'pointerUpdateDebounce' | 'pointerUpdateTrigger' | 'animateData' | 'debug' | 'tooltip' | 'theme' | 'brushAxis' | 'minBrushDelta' | 'externalPointerEvents' | 'showLegend' | 'showLegendExtra' | 'legendPosition' | 'legendMaxDepth' | 'legendSize' | 'ariaUseDefaultSummary' | 'ariaLabelHeadingLevel' | 'ariaTableCaption' | 'allowBrushingLastHistogramBin';
-
 // @public (undocumented)
 export const DEPTH_KEY = "depth";
 
@@ -933,15 +943,17 @@ export interface GeometryValue {
 // @public (undocumented)
 export function getNodeName(node: ArrayNode): string;
 
-// Warning: (ae-forgotten-export) The symbol "SpecRequiredProps" needs to be exported by the entry point index.d.ts
-// Warning: (ae-forgotten-export) The symbol "SpecOptionalProps" needs to be exported by the entry point index.d.ts
-//
-// @alpha (undocumented)
-export const Goal: React_2.FunctionComponent<SpecRequiredProps_9 & SpecOptionalProps_9>;
+// @alpha
+export const Goal: FC<SFProps<GoalSpec, "chartType" | "specType", "base" | "actual" | "bands" | "ticks" | "bandFillColor" | "tickValueFormatter" | "labelMajor" | "labelMinor" | "centralMajor" | "centralMinor" | "angleStart" | "angleEnd" | "bandLabels" | "tooltipValueFormatter", "target", "id" | "subtype">>;
 
 // @alpha (undocumented)
 export type GoalLabelAccessor = LabelAccessor<BandFillColorAccessorInput>;
 
+// Warning: (ae-incompatible-release-tags) The symbol "GoalProps" is marked as @public, but its signature references "Goal" which is marked as @alpha
+//
+// @public (undocumented)
+export type GoalProps = ComponentProps<typeof Goal>;
+
 // @alpha (undocumented)
 export interface GoalSpec extends Spec {
     // (undocumented)
@@ -1030,20 +1042,22 @@ export interface GroupBrushExtent {
     groupId: GroupId;
 }
 
-// @alpha (undocumented)
-export const GroupBy: React_2.FunctionComponent<GroupByProps>;
+// Warning: (ae-incompatible-release-tags) The symbol "GroupBy" is marked as @public, but its signature references "GroupBySpec" which is marked as @alpha
+//
+// @public
+export const GroupBy: <D extends BaseDatum = any>(props: SFProps<GroupBySpec<D>, "chartType" | "specType", never, "format", "id" | "sort" | "by">) => null;
 
 // @public (undocumented)
-export type GroupByAccessor = (spec: Spec, datum: any) => string | number;
+export type GroupByAccessor<D extends BaseDatum = any> = (spec: Spec, datum: D) => string | number;
 
 // @public
-export type GroupByFormatter = (value: ReturnType<GroupByAccessor>) => string;
+export type GroupByFormatter<D extends BaseDatum = any> = (value: ReturnType<GroupByAccessor<D>>) => string;
 
 // @public (undocumented)
 export type GroupByKeyFn<T> = (data: T) => string;
 
-// @alpha (undocumented)
-export type GroupByProps = Pick<GroupBySpec, 'id' | 'by' | 'sort' | 'format'>;
+// @public (undocumented)
+export type GroupByProps = ComponentProps<typeof GroupBy>;
 
 // Warning: (ae-forgotten-export) The symbol "Predicate" needs to be exported by the entry point index.d.ts
 //
@@ -1051,9 +1065,9 @@ export type GroupByProps = Pick<GroupBySpec, 'id' | 'by' | 'sort' | 'format'>;
 export type GroupBySort = Predicate;
 
 // @alpha (undocumented)
-export interface GroupBySpec extends Spec {
-    by: GroupByAccessor;
-    format?: GroupByFormatter;
+export interface GroupBySpec<D extends BaseDatum = any> extends Spec {
+    by: GroupByAccessor<D>;
+    format?: GroupByFormatter<D>;
     sort: GroupBySort;
 }
 
@@ -1063,11 +1077,8 @@ export type GroupId = string;
 // @public (undocumented)
 export type GroupKeysOrKeyFn<T> = Array<keyof T> | GroupByKeyFn<T>;
 
-// Warning: (ae-forgotten-export) The symbol "SpecRequiredProps" needs to be exported by the entry point index.d.ts
-// Warning: (ae-forgotten-export) The symbol "SpecOptionalProps" needs to be exported by the entry point index.d.ts
-//
-// @alpha (undocumented)
-export const Heatmap: React_2.FunctionComponent<SpecRequiredProps_8 & SpecOptionalProps_8>;
+// @alpha
+export const Heatmap: <D extends BaseDatum = any>(props: SFProps<HeatmapSpec<D>, "chartType" | "specType", "data" | "timeZone" | "valueAccessor" | "valueFormatter" | "xAccessor" | "yAccessor" | "xSortPredicate" | "ySortPredicate" | "xScale" | "xAxisLabelFormatter" | "xAxisTitle" | "yAxisTitle" | "xAxisLabelName" | "yAxisLabelName" | "yAxisLabelFormatter", "name" | "onBrushEnd" | "highlightedData", "id" | "colorScale">) => null;
 
 // @alpha (undocumented)
 export interface HeatmapBandsColorScale {
@@ -1088,14 +1099,19 @@ export type HeatmapBrushEvent = {
 // @public (undocumented)
 export type HeatmapElementEvent = [Cell, SeriesIdentifier];
 
+// Warning: (ae-incompatible-release-tags) The symbol "HeatmapProps" is marked as @public, but its signature references "Heatmap" which is marked as @alpha
+//
+// @public (undocumented)
+export type HeatmapProps = ComponentProps<typeof Heatmap>;
+
 // @alpha (undocumented)
-export interface HeatmapSpec extends Spec {
+export interface HeatmapSpec<D extends BaseDatum = Datum> extends Spec {
     // (undocumented)
     chartType: typeof ChartType.Heatmap;
     // (undocumented)
     colorScale: HeatmapBandsColorScale;
     // (undocumented)
-    data: Datum[];
+    data: D[];
     // (undocumented)
     highlightedData?: {
         x: Array<string | number>;
@@ -1112,13 +1128,13 @@ export interface HeatmapSpec extends Spec {
     // (undocumented)
     timeZone: string;
     // (undocumented)
-    valueAccessor: Accessor | AccessorFn;
+    valueAccessor: Accessor<never> | AccessorFn;
     // (undocumented)
-    valueFormatter: (value: number) => string;
+    valueFormatter: ValueFormatter;
     // (undocumented)
-    xAccessor: Accessor | AccessorFn;
+    xAccessor: Accessor<D> | AccessorFn<D>;
     // (undocumented)
-    xAxisLabelFormatter: (value: string | number) => string;
+    xAxisLabelFormatter: LabelAccessor<string | number>;
     // (undocumented)
     xAxisLabelName: string;
     // (undocumented)
@@ -1128,9 +1144,9 @@ export interface HeatmapSpec extends Spec {
     // (undocumented)
     xSortPredicate: Predicate;
     // (undocumented)
-    yAccessor: Accessor | AccessorFn;
+    yAccessor: Accessor<D> | AccessorFn<D>;
     // (undocumented)
-    yAxisLabelFormatter: (value: string | number) => string;
+    yAxisLabelFormatter: LabelAccessor<string | number>;
     // (undocumented)
     yAxisLabelName: string;
     // (undocumented)
@@ -1222,14 +1238,14 @@ export const HIERARCHY_ROOT_KEY: Key;
 // @public (undocumented)
 export type HierarchyOfArrays = Array<ArrayEntry>;
 
-// Warning: (ae-forgotten-export) The symbol "SpecRequiredProps" needs to be exported by the entry point index.d.ts
-// Warning: (ae-forgotten-export) The symbol "SpecOptionalProps" needs to be exported by the entry point index.d.ts
-//
+// @public
+export const HistogramBarSeries: <D extends BaseDatum = any>(props: SFProps<HistogramBarSeriesSpec<D>, "chartType" | "specType" | "seriesType", "groupId" | "xScaleType" | "yScaleType" | "hideInLegend" | "enableHistogramMode", "sortIndex" | "timeZone" | "name" | "color" | "barSeriesStyle" | "xNice" | "yNice" | "useDefaultGroupDomain" | "displayValueSettings" | "y0AccessorFormat" | "y1AccessorFormat" | "filterSeriesInTooltip" | "tickFormat" | "y0Accessors" | "splitSeriesAccessors" | "markSizeAccessor" | "stackMode" | "styleAccessor" | "minBarHeight", "data" | "id" | "xAccessor" | "yAccessors">) => null;
+
 // @public (undocumented)
-export const HistogramBarSeries: React_2.FunctionComponent<SpecRequiredProps_4 & SpecOptionalProps_4>;
+export type HistogramBarSeriesProps = ComponentProps<typeof HistogramBarSeries>;
 
 // @public
-export type HistogramBarSeriesSpec = Omit<BarSeriesSpec, 'stackAccessors'> & {
+export type HistogramBarSeriesSpec<D extends BaseDatum = Datum> = Omit<BarSeriesSpec<D>, 'stackAccessors'> & {
     enableHistogramMode: true;
 };
 
@@ -1263,7 +1279,7 @@ export type HorizontalAlignment = $Values<typeof HorizontalAlignment>;
 // Warning: (ae-forgotten-export) The symbol "BinaryAccessorFn" needs to be exported by the entry point index.d.ts
 //
 // @public
-export type IndexedAccessorFn = UnaryAccessorFn | BinaryAccessorFn;
+export type IndexedAccessorFn<D extends BaseDatum = any, Return = any> = UnaryAccessorFn<D, Return> | BinaryAccessorFn<D, Return>;
 
 // @public (undocumented)
 export const INPUT_KEY = "inputIndex";
@@ -1405,15 +1421,12 @@ export interface LegendStyle {
 // @public (undocumented)
 export const LIGHT_THEME: Theme;
 
-// Warning: (ae-forgotten-export) The symbol "SpecRequiredProps" needs to be exported by the entry point index.d.ts
-// Warning: (ae-forgotten-export) The symbol "SpecOptionalProps" needs to be exported by the entry point index.d.ts
-//
-// @public (undocumented)
-export const LineAnnotation: React_2.FunctionComponent<SpecRequiredProps_5 & SpecOptionalProps_5>;
+// @public
+export const LineAnnotation: <D = any>(props: SFProps<LineAnnotationSpec<D>, "chartType" | "specType", "style" | "zIndex" | "groupId" | "hideLines" | "hideLinesTooltips" | "annotationType" | "hideTooltips", "offset" | "fallbackPlacements" | "placement" | "boundary" | "boundaryPadding" | "marker" | "customTooltip" | "markerBody" | "markerDimensions" | "markerPosition" | "customTooltipDetails", "id" | "dataValues" | "domainType">) => null;
 
 // @public
-export interface LineAnnotationDatum {
-    dataValue: any;
+export interface LineAnnotationDatum<D = any> {
+    dataValue: D;
     details?: string;
     header?: string;
 }
@@ -1421,14 +1434,17 @@ export interface LineAnnotationDatum {
 // @public (undocumented)
 export type LineAnnotationEvent = {
     id: SpecId;
-    datum: LineAnnotationDatum;
+    datum: LineAnnotationDatum<any>;
 };
 
 // @public (undocumented)
-export type LineAnnotationSpec = BaseAnnotationSpec<typeof AnnotationType.Line, LineAnnotationDatum, LineAnnotationStyle> & {
+export type LineAnnotationProps = ComponentProps<typeof LineAnnotation>;
+
+// @public (undocumented)
+export type LineAnnotationSpec<D = any> = BaseAnnotationSpec<typeof AnnotationType.Line, LineAnnotationDatum<D>, LineAnnotationStyle, D> & {
     domainType: AnnotationDomainType;
-    marker?: ReactNode | ComponentWithAnnotationDatum;
-    markerBody?: ReactNode | ComponentWithAnnotationDatum;
+    marker?: ReactNode | ComponentWithAnnotationDatum<D>;
+    markerBody?: ReactNode | ComponentWithAnnotationDatum<D>;
     markerDimensions?: {
         width: number;
         height: number;
@@ -1457,14 +1473,14 @@ export type LineFitStyle = Visible & Opacity & StrokeDashArray & {
     stroke: Color | typeof ColorVariant.Series;
 };
 
-// Warning: (ae-forgotten-export) The symbol "SpecRequiredProps" needs to be exported by the entry point index.d.ts
-// Warning: (ae-forgotten-export) The symbol "SpecOptionalProps" needs to be exported by the entry point index.d.ts
-//
+// @public
+export const LineSeries: <D extends BaseDatum = any>(props: SFProps<LineSeriesSpec<D>, "chartType" | "specType" | "seriesType", "groupId" | "xScaleType" | "yScaleType" | "hideInLegend" | "histogramModeAlignment", "sortIndex" | "fit" | "timeZone" | "name" | "color" | "curve" | "lineSeriesStyle" | "xNice" | "yNice" | "useDefaultGroupDomain" | "displayValueSettings" | "y0AccessorFormat" | "y1AccessorFormat" | "filterSeriesInTooltip" | "tickFormat" | "y0Accessors" | "splitSeriesAccessors" | "stackAccessors" | "markSizeAccessor" | "markFormat" | "pointStyleAccessor", "data" | "id" | "xAccessor" | "yAccessors">) => null;
+
 // @public (undocumented)
-export const LineSeries: React_2.FunctionComponent<SpecRequiredProps_6 & SpecOptionalProps_6>;
+export type LineSeriesProps = ComponentProps<typeof LineSeries>;
 
 // @public
-export type LineSeriesSpec = BasicSeriesSpec & HistogramConfig & {
+export type LineSeriesSpec<D extends BaseDatum = Datum> = BasicSeriesSpec<D, 'line'> & HistogramConfig & {
     seriesType: typeof SeriesType.Line;
     curve?: CurveType;
     lineSeriesStyle?: RecursivePartial<LineSeriesStyle>;
@@ -1584,11 +1600,10 @@ export function parentAccessor(n: ArrayEntry): ArrayNode;
 // @public (undocumented)
 export type PartialTheme = RecursivePartial<Theme>;
 
-// Warning: (ae-forgotten-export) The symbol "SpecRequiredProps" needs to be exported by the entry point index.d.ts
-// Warning: (ae-forgotten-export) The symbol "SpecOptionalProps" needs to be exported by the entry point index.d.ts
+// Warning: (ae-forgotten-export) The symbol "PartitionSpec" needs to be exported by the entry point index.d.ts
 //
-// @public (undocumented)
-export const Partition: React_2.FunctionComponent<SpecRequiredProps_7 & SpecOptionalProps_7>;
+// @public
+export const Partition: <D extends BaseDatum = any>(props: SFProps<PartitionSpec<D>, "chartType" | "specType", "animation" | "layout" | "valueAccessor" | "clockwiseSectors" | "specialFirstInnermostSector" | "drilldown" | "maxRowCount" | "fillOutside" | "radiusOutside" | "fillRectangleWidth" | "fillRectangleHeight" | "valueFormatter" | "valueGetter" | "percentFormatter" | "topGroove" | "smallMultiples" | "layers", never, "data" | "id">) => null;
 
 // Warning: (ae-forgotten-export) The symbol "StaticConfig" needs to be exported by the entry point index.d.ts
 //
@@ -1615,13 +1630,13 @@ export interface PartitionFillLabel extends LabelConfig {
 }
 
 // @public
-export interface PartitionLayer {
+export interface PartitionLayer<D extends BaseDatum = Datum> {
     // Warning: (ae-forgotten-export) The symbol "ExtendedFillLabelConfig" needs to be exported by the entry point index.d.ts
     //
     // (undocumented)
     fillLabel?: Partial<ExtendedFillLabelConfig>;
     // (undocumented)
-    groupByRollup: IndexedAccessorFn;
+    groupByRollup: IndexedAccessorFn<D>;
     // (undocumented)
     nodeLabel?: LabelAccessor;
     // (undocumented)
@@ -1647,6 +1662,9 @@ export const PartitionLayout: Readonly<{
 // @public (undocumented)
 export type PartitionLayout = $Values<typeof PartitionLayout>;
 
+// @public (undocumented)
+export type PartitionProps = ComponentProps<typeof Partition>;
+
 // Warning: (ae-forgotten-export) The symbol "FillFontSizeRange" needs to be exported by the entry point index.d.ts
 //
 // @public (undocumented)
@@ -1844,7 +1862,7 @@ export type Ratio = number;
 export type RawTextGetter = (node: ShapeTreeNode) => string;
 
 // @public (undocumented)
-export const RectAnnotation: React_2.FunctionComponent<Pick<RectAnnotationSpec, 'id' | 'dataValues'> & Partial<Omit<RectAnnotationSpec, 'chartType' | 'specType' | 'seriesType' | 'id' | 'dataValues' | 'domainType' | 'annotationType'>>>;
+export const RectAnnotation: FC<SFProps<RectAnnotationSpec, "chartType" | "specType", "style" | "zIndex" | "groupId" | "outside" | "annotationType", "offset" | "fallbackPlacements" | "placement" | "boundary" | "boundaryPadding" | "customTooltip" | "customTooltipDetails" | "hideTooltips" | "renderTooltip" | "outsideDimension", "id" | "dataValues">>;
 
 // @public
 export interface RectAnnotationDatum {
@@ -1863,6 +1881,9 @@ export type RectAnnotationEvent = {
     datum: RectAnnotationDatum;
 };
 
+// @public (undocumented)
+export type RectAnnotationProps = ComponentProps<typeof RectAnnotation>;
+
 // @public (undocumented)
 export type RectAnnotationSpec = BaseAnnotationSpec<typeof AnnotationType.Rectangle, RectAnnotationDatum, RectAnnotationStyle> & {
     renderTooltip?: AnnotationTooltipFormatter;
@@ -1969,13 +1990,13 @@ export interface SectorGeomSpecY {
 }
 
 // @public (undocumented)
-export interface SeriesAccessors {
-    markSizeAccessor?: Accessor | AccessorFn;
-    splitSeriesAccessors?: (Accessor | AccessorFn)[];
-    stackAccessors?: (Accessor | AccessorFn)[];
-    xAccessor: Accessor | AccessorFn;
-    y0Accessors?: (Accessor | AccessorFn)[];
-    yAccessors: (Accessor | AccessorFn)[];
+export interface SeriesAccessors<D extends BaseDatum = any> {
+    markSizeAccessor?: Accessor<D> | AccessorFn<D>;
+    splitSeriesAccessors?: (Accessor<D> | AccessorFn<D>)[];
+    stackAccessors?: (Accessor<any> | AccessorFn<any>)[];
+    xAccessor: Accessor<D> | AccessorFn<D>;
+    y0Accessors?: (Accessor<D> | AccessorFn<D>)[];
+    yAccessors: (Accessor<D> | AccessorFn<D>)[];
 }
 
 // @public (undocumented)
@@ -2029,11 +2050,11 @@ export interface SeriesScales {
 }
 
 // @public (undocumented)
-export interface SeriesSpec extends Spec {
+export interface SeriesSpec<D extends BaseDatum = Datum> extends Spec {
     // (undocumented)
     chartType: typeof ChartType.XYAxis;
     color?: SeriesColorAccessor;
-    data: Datum[];
+    data: D[];
     // (undocumented)
     displayValueSettings?: DisplayValueSpec;
     filterSeriesInTooltip?: FilterPredicate;
@@ -2053,7 +2074,7 @@ export interface SeriesSpec extends Spec {
 }
 
 // @public (undocumented)
-export type SeriesSpecs<S extends BasicSeriesSpec = BasicSeriesSpec> = Array<S>;
+export type SeriesSpecs<D extends BaseDatum = Datum, S extends BasicSeriesSpec<D> = BasicSeriesSpec<D>> = Array<S>;
 
 // @public (undocumented)
 export const SeriesType: Readonly<{
@@ -2066,8 +2087,16 @@ export const SeriesType: Readonly<{
 // @public
 export type SeriesType = $Values<typeof SeriesType>;
 
+// @public
+export const Settings: (props: SFProps<SettingsSpec, keyof typeof settingsBuildProps['overrides'], keyof typeof settingsBuildProps['defaults'], keyof typeof settingsBuildProps['optionals'], keyof typeof settingsBuildProps['requires']>) => null;
+
+// Warning: (ae-forgotten-export) The symbol "BuildProps" needs to be exported by the entry point index.d.ts
+//
+// @public (undocumented)
+export const settingsBuildProps: BuildProps<SettingsSpec, "id" | "chartType" | "specType", "rotation" | "debug" | "tooltip" | "ariaLabelHeadingLevel" | "ariaUseDefaultSummary" | "legendPosition" | "legendMaxDepth" | "legendSize" | "showLegend" | "showLegendExtra" | "baseTheme" | "rendering" | "animateData" | "externalPointerEvents" | "resizeDebounce" | "pointerUpdateTrigger" | "brushAxis" | "minBrushDelta" | "allowBrushingLastHistogramBin", "ariaLabel" | "xDomain" | "theme" | "ariaDescription" | "ariaDescribedBy" | "ariaLabelledBy" | "ariaTableCaption" | "flatLegend" | "legendAction" | "legendColorPicker" | "legendStrategy" | "onLegendItemClick" | "onLegendItemMinusClick" | "onLegendItemOut" | "onLegendItemOver" | "onLegendItemPlusClick" | "orderOrdinalBinsBy" | "debugState" | "onProjectionClick" | "onElementClick" | "onElementOver" | "onElementOut" | "pointBuffer" | "onBrushEnd" | "onPointerUpdate" | "onRenderChange" | "onAnnotationClick" | "pointerUpdateDebounce" | "roundHistogramBrushValues" | "noResults", never>;
+
 // @public (undocumented)
-export const Settings: React_2.FunctionComponent<SettingsSpecProps>;
+export type SettingsProps = ComponentProps<typeof Settings>;
 
 // @public
 export interface SettingsSpec extends Spec, LegendSpec {
@@ -2121,9 +2150,6 @@ export interface SettingsSpec extends Spec, LegendSpec {
     xDomain?: CustomXDomain;
 }
 
-// @public (undocumented)
-export type SettingsSpecProps = Partial<Omit<SettingsSpec, 'chartType' | 'specType' | 'id'>>;
-
 // @public (undocumented)
 export interface ShapeTreeNode extends TreeNode, SectorGeomSpecY {
     // (undocumented)
@@ -2163,11 +2189,13 @@ export interface SimplePadding {
     outer: Pixels;
 }
 
-// @alpha (undocumented)
-export const SmallMultiples: React_2.FunctionComponent<SmallMultiplesProps>;
+// @alpha
+export const SmallMultiples: FC<SFProps<SmallMultiplesSpec, "chartType" | "specType", "id", "style" | "splitHorizontally" | "splitVertically" | "splitZigzag", never>>;
 
-// @alpha (undocumented)
-export type SmallMultiplesProps = Partial<Omit<SmallMultiplesSpec, 'chatType' | 'specType'>>;
+// Warning: (ae-incompatible-release-tags) The symbol "SmallMultiplesProps" is marked as @public, but its signature references "SmallMultiples" which is marked as @alpha
+//
+// @public (undocumented)
+export type SmallMultiplesProps = ComponentProps<typeof SmallMultiples>;
 
 // @alpha (undocumented)
 export interface SmallMultiplesSpec extends Spec {
@@ -2437,9 +2465,9 @@ export const TooltipType: Readonly<{
 export type TooltipType = $Values<typeof TooltipType>;
 
 // @public
-export interface TooltipValue {
+export interface TooltipValue<D extends BaseDatum = Datum> {
     color: Color;
-    datum?: unknown;
+    datum?: D;
     formattedMarkValue?: string | null;
     formattedValue: string;
     isHighlighted: boolean;
@@ -2448,7 +2476,7 @@ export interface TooltipValue {
     markValue?: number | null;
     seriesIdentifier: SeriesIdentifier;
     value: any;
-    valueAccessor?: Accessor;
+    valueAccessor?: Accessor<D>;
 }
 
 // @public
@@ -2472,9 +2500,9 @@ export interface TreeNode extends AngleFromTo {
 }
 
 // @public
-export interface UnaryAccessorFn<Return = any> {
+export interface UnaryAccessorFn<D extends BaseDatum = any, Return = any> {
     // (undocumented)
-    (datum: Datum): Return;
+    (datum: D): Return;
     fieldName?: string;
 }
 
@@ -2482,7 +2510,7 @@ export interface UnaryAccessorFn<Return = any> {
 export function useLegendAction<T extends HTMLElement>(): [ref: LegacyRef<T>, onClose: () => void];
 
 // @public (undocumented)
-export type ValueAccessor = (d: Datum) => AdditiveNumber;
+export type ValueAccessor<D extends BaseDatum = Datum> = (d: D) => AdditiveNumber;
 
 // @public (undocumented)
 export type ValueFormatter = (value: number) => string;
@@ -2524,15 +2552,17 @@ export const WeightFn: Readonly<{
 // @public (undocumented)
 export type WeightFn = $Values<typeof WeightFn>;
 
-// Warning: (ae-forgotten-export) The symbol "SpecRequiredProps" needs to be exported by the entry point index.d.ts
-// Warning: (ae-forgotten-export) The symbol "SpecOptionalProps" needs to be exported by the entry point index.d.ts
-//
-// @alpha (undocumented)
-export const Wordcloud: React_2.FunctionComponent<SpecRequiredProps_10 & SpecOptionalProps_10>;
+// @alpha
+export const Wordcloud: FC<SFProps<WordcloudSpec, "chartType" | "specType", "fontStyle" | "fontWeight" | "fontFamily" | "data" | "padding" | "minFontSize" | "maxFontSize" | "exponent" | "startAngle" | "endAngle" | "angleCount" | "spiral" | "weightFn" | "outOfRoomCallback", never, "id">>;
 
 // @public (undocumented)
 export type WordCloudElementEvent = [WordModel, SeriesIdentifier];
 
+// Warning: (ae-incompatible-release-tags) The symbol "WordcloudProps" is marked as @public, but its signature references "Wordcloud" which is marked as @alpha
+//
+// @public (undocumented)
+export type WordcloudProps = ComponentProps<typeof Wordcloud>;
+
 // @alpha (undocumented)
 export interface WordcloudSpec extends Spec, WordcloudViewModel {
     // (undocumented)
@@ -2598,7 +2628,7 @@ export interface XYBrushEvent {
 export type XYChartElementEvent = [GeometryValue, XYChartSeriesIdentifier];
 
 // @public (undocumented)
-export interface XYChartSeriesIdentifier extends SeriesIdentifier {
+export interface XYChartSeriesIdentifier<D extends BaseDatum = Datum> extends SeriesIdentifier {
     // (undocumented)
     seriesKeys: (string | number)[];
     // (undocumented)
@@ -2608,7 +2638,7 @@ export interface XYChartSeriesIdentifier extends SeriesIdentifier {
     // (undocumented)
     splitAccessors: Map<string | number, string | number>;
     // (undocumented)
-    yAccessor: Accessor;
+    yAccessor: Accessor<D>;
 }
 
 // @public
diff --git a/packages/charts/src/chart_types/goal_chart/layout/types/viewmodel_types.ts b/packages/charts/src/chart_types/goal_chart/layout/types/viewmodel_types.ts
index a84b195e6a..4180eb7dfb 100644
--- a/packages/charts/src/chart_types/goal_chart/layout/types/viewmodel_types.ts
+++ b/packages/charts/src/chart_types/goal_chart/layout/types/viewmodel_types.ts
@@ -60,8 +60,6 @@ export type ShapeViewModel = {
 };
 
 const commonDefaults = {
-  specType: SpecType.Series,
-  subtype: GoalSubtype.Goal,
   base: 0,
   actual: 50,
   ticks: [0, 25, 50, 75, 100],
@@ -88,6 +86,8 @@ export const defaultGoalSpec = {
 /** @internal */
 export const nullGoalViewModel = {
   ...commonDefaults,
+  specType: SpecType.Series,
+  subtype: GoalSubtype.Goal,
   bands: [],
   ticks: [],
   labelMajor: '',
diff --git a/packages/charts/src/chart_types/goal_chart/specs/index.ts b/packages/charts/src/chart_types/goal_chart/specs/index.ts
index e6ba4c4c79..d45628ec03 100644
--- a/packages/charts/src/chart_types/goal_chart/specs/index.ts
+++ b/packages/charts/src/chart_types/goal_chart/specs/index.ts
@@ -6,13 +6,13 @@
  * Side Public License, v 1.
  */
 
-import React from 'react';
+import { ComponentProps } from 'react';
 
 import { ChartType } from '../..';
 import { Color } from '../../../common/colors';
 import { Spec } from '../../../specs';
 import { SpecType } from '../../../specs/constants';
-import { getConnect, specComponentFactory } from '../../../state/spec_factory';
+import { specComponentFactory } from '../../../state/spec_factory';
 import { LabelAccessor, ValueFormatter } from '../../../utils/common';
 import { defaultGoalSpec } from '../layout/types/viewmodel_types';
 import { GoalSubtype } from './constants';
@@ -35,11 +35,6 @@ export type BandFillColorAccessor = (input: BandFillColorAccessorInput) => Color
 /** @alpha */
 export type GoalLabelAccessor = LabelAccessor<BandFillColorAccessorInput>;
 
-const defaultProps = {
-  chartType: ChartType.Goal,
-  ...defaultGoalSpec,
-};
-
 /** @alpha */
 export interface GoalSpec extends Spec {
   specType: typeof SpecType.Series;
@@ -62,29 +57,19 @@ export interface GoalSpec extends Spec {
   tooltipValueFormatter: ValueFormatter;
 }
 
-type SpecRequiredProps = Pick<GoalSpec, 'id' | 'actual'>;
-type SpecOptionalProps = Partial<Omit<GoalSpec, 'chartType' | 'specType' | 'id' | 'data'>>;
-
-/** @alpha */
-export const Goal: React.FunctionComponent<SpecRequiredProps & SpecOptionalProps> = getConnect()(
-  specComponentFactory<
-    GoalSpec,
-    | 'chartType'
-    | 'subtype'
-    | 'base'
-    | 'target'
-    | 'actual'
-    | 'bands'
-    | 'bandLabels'
-    | 'ticks'
-    | 'bandFillColor'
-    | 'tickValueFormatter'
-    | 'labelMajor'
-    | 'labelMinor'
-    | 'centralMajor'
-    | 'centralMinor'
-    | 'angleStart'
-    | 'angleEnd'
-    | 'tooltipValueFormatter'
-  >(defaultProps),
+/**
+ * Add Goal spec to chart
+ * @alpha
+ */
+export const Goal = specComponentFactory<GoalSpec>()(
+  {
+    specType: SpecType.Series,
+    chartType: ChartType.Goal,
+  },
+  {
+    ...defaultGoalSpec,
+  },
 );
+
+/** @public */
+export type GoalProps = ComponentProps<typeof Goal>;
diff --git a/packages/charts/src/chart_types/heatmap/layout/viewmodel/viewmodel.ts b/packages/charts/src/chart_types/heatmap/layout/viewmodel/viewmodel.ts
index 90f8d6cc6f..2406a7e976 100644
--- a/packages/charts/src/chart_types/heatmap/layout/viewmodel/viewmodel.ts
+++ b/packages/charts/src/chart_types/heatmap/layout/viewmodel/viewmodel.ts
@@ -18,7 +18,7 @@ import { ScaleType } from '../../../../scales/constants';
 import { LinearScale, OrdinalScale, RasterTimeScale } from '../../../../specs';
 import { TextMeasure, withTextMeasure } from '../../../../utils/bbox/canvas_text_bbox_calculator';
 import { addIntervalToTime } from '../../../../utils/chrono/elasticsearch';
-import { clamp } from '../../../../utils/common';
+import { clamp, Datum } from '../../../../utils/common';
 import { Dimensions, horizontalPad, innerPad, pad } from '../../../../utils/dimensions';
 import { Logger } from '../../../../utils/logger';
 import { HeatmapStyle, Theme, Visible } from '../../../../utils/themes/theme';
@@ -34,6 +34,7 @@ import {
   ShapeViewModel,
   TextBox,
 } from '../types/viewmodel_types';
+import { BaseDatum } from './../../../xy_chart/utils/specs';
 
 /** @public */
 export interface HeatmapCellDatum {
@@ -78,9 +79,9 @@ function estimatedNonOverlappingTickCount(
   });
 }
 /** @internal */
-export function shapeViewModel(
+export function shapeViewModel<D extends BaseDatum = Datum>(
   textMeasure: TextMeasure,
-  spec: HeatmapSpec,
+  spec: HeatmapSpec<D>,
   { heatmap: heatmapTheme, axes: { axisTitle }, background }: Theme,
   elementSizes: ChartElementSizes,
   heatmapTable: HeatmapTable,
diff --git a/packages/charts/src/chart_types/heatmap/specs/heatmap.ts b/packages/charts/src/chart_types/heatmap/specs/heatmap.ts
index ea2cb333cc..624d199503 100644
--- a/packages/charts/src/chart_types/heatmap/specs/heatmap.ts
+++ b/packages/charts/src/chart_types/heatmap/specs/heatmap.ts
@@ -6,41 +6,21 @@
  * Side Public License, v 1.
  */
 
-import React from 'react';
+import { ComponentProps, useRef } from 'react';
 
 import { ChartType } from '../..';
 import { Color } from '../../../common/colors';
 import { Predicate } from '../../../common/predicate';
 import { ScaleType } from '../../../scales/constants';
-import { Spec } from '../../../specs';
+import { BaseDatum, Spec } from '../../../specs';
 import { SpecType } from '../../../specs/constants';
-import { getConnect, specComponentFactory } from '../../../state/spec_factory';
+import { buildSFProps, SFProps, useSpecFactory } from '../../../state/spec_factory';
 import { Accessor, AccessorFn } from '../../../utils/accessor';
 import { ESCalendarInterval, ESFixedInterval } from '../../../utils/chrono/elasticsearch';
-import { Datum } from '../../../utils/common';
+import { Datum, LabelAccessor, stripUndefined, ValueFormatter } from '../../../utils/common';
 import { Cell } from '../layout/types/viewmodel_types';
 import { X_SCALE_DEFAULT } from './scale_defaults';
 
-const defaultProps = {
-  chartType: ChartType.Heatmap,
-  specType: SpecType.Series,
-  data: [],
-  xAccessor: ({ x }: { x: string | number }) => x,
-  yAccessor: ({ y }: { y: string | number }) => y,
-  xScale: { type: X_SCALE_DEFAULT.type },
-  valueAccessor: ({ value }: { value: string | number }) => value,
-  valueFormatter: (value: number) => `${value}`,
-  xSortPredicate: Predicate.AlphaAsc,
-  ySortPredicate: Predicate.AlphaAsc,
-  timeZone: 'UTC',
-  xAxisTitle: '',
-  yAxisTitle: '',
-  xAxisLabelName: 'X Value',
-  xAxisLabelFormatter: String,
-  yAxisLabelName: 'Y Value',
-  yAxisLabelFormatter: String,
-};
-
 /** @public */
 export type HeatmapScaleType =
   | typeof ScaleType.Linear
@@ -91,15 +71,15 @@ export interface OrdinalScale {
 }
 
 /** @alpha */
-export interface HeatmapSpec extends Spec {
+export interface HeatmapSpec<D extends BaseDatum = Datum> extends Spec {
   specType: typeof SpecType.Series;
   chartType: typeof ChartType.Heatmap;
-  data: Datum[];
+  data: D[];
   colorScale: HeatmapBandsColorScale;
-  xAccessor: Accessor | AccessorFn;
-  yAccessor: Accessor | AccessorFn;
-  valueAccessor: Accessor | AccessorFn;
-  valueFormatter: (value: number) => string;
+  xAccessor: Accessor<D> | AccessorFn<D>;
+  yAccessor: Accessor<D> | AccessorFn<D>;
+  valueAccessor: Accessor<never> | AccessorFn;
+  valueFormatter: ValueFormatter;
   xSortPredicate: Predicate;
   ySortPredicate: Predicate;
   xScale: RasterTimeScale | OrdinalScale | LinearScale;
@@ -109,33 +89,56 @@ export interface HeatmapSpec extends Spec {
   onBrushEnd?: (brushArea: HeatmapBrushEvent) => void;
   xAxisTitle: string;
   xAxisLabelName: string;
-  xAxisLabelFormatter: (value: string | number) => string;
+  xAxisLabelFormatter: LabelAccessor<string | number>;
   yAxisTitle: string;
   yAxisLabelName: string;
-  yAxisLabelFormatter: (value: string | number) => string;
+  yAxisLabelFormatter: LabelAccessor<string | number>;
 }
 
-type SpecRequiredProps = Pick<HeatmapSpec, 'id' | 'data' | 'colorScale'>;
-type SpecOptionalProps = Partial<Omit<HeatmapSpec, 'chartType' | 'specType' | 'id' | 'data'>>;
+/**
+ * Adds heatmap spec to chart specs
+ * @alpha
+ */
+export const Heatmap = function <D extends BaseDatum = Datum>(
+  props: SFProps<
+    HeatmapSpec<D>,
+    keyof typeof buildProps.current['overrides'],
+    keyof typeof buildProps.current['defaults'],
+    keyof typeof buildProps.current['optionals'],
+    keyof typeof buildProps.current['requires']
+  >,
+) {
+  const buildProps = useRef(
+    // @ts-ignore - excessively deep types
+    buildSFProps<HeatmapSpec<D>>()(
+      {
+        chartType: ChartType.Heatmap,
+        specType: SpecType.Series,
+      },
+      {
+        data: [],
+        valueAccessor: ({ value }) => value,
+        xScale: { type: X_SCALE_DEFAULT.type },
+        valueFormatter: (value) => `${value}`,
+        xSortPredicate: Predicate.AlphaAsc,
+        ySortPredicate: Predicate.AlphaAsc,
+        // TODO: make accessors required
+        xAccessor: (d) => (d as any)?.x,
+        yAccessor: (d) => (d as any)?.y,
+        timeZone: 'UTC',
+        xAxisTitle: '',
+        yAxisTitle: '',
+        xAxisLabelName: 'X Value',
+        xAxisLabelFormatter: String,
+        yAxisLabelName: 'Y Value',
+        yAxisLabelFormatter: String,
+      },
+    ),
+  );
+  const { defaults, overrides } = buildProps.current;
+  useSpecFactory<HeatmapSpec<D>>({ ...defaults, ...stripUndefined(props), ...overrides });
+  return null;
+};
 
-/** @alpha */
-export const Heatmap: React.FunctionComponent<SpecRequiredProps & SpecOptionalProps> = getConnect()(
-  specComponentFactory<
-    HeatmapSpec,
-    | 'xAccessor'
-    | 'yAccessor'
-    | 'valueAccessor'
-    | 'data'
-    | 'ySortPredicate'
-    | 'xSortPredicate'
-    | 'valueFormatter'
-    | 'xScale'
-    | 'timeZone'
-    | 'xAxisTitle'
-    | 'xAxisLabelName'
-    | 'xAxisLabelFormatter'
-    | 'yAxisTitle'
-    | 'yAxisLabelName'
-    | 'yAxisLabelFormatter'
-  >(defaultProps),
-);
+/** @public */
+export type HeatmapProps = ComponentProps<typeof Heatmap>;
diff --git a/packages/charts/src/chart_types/heatmap/state/selectors/get_heatmap_table.ts b/packages/charts/src/chart_types/heatmap/state/selectors/get_heatmap_table.ts
index 7a1a01b197..cde13c1168 100644
--- a/packages/charts/src/chart_types/heatmap/state/selectors/get_heatmap_table.ts
+++ b/packages/charts/src/chart_types/heatmap/state/selectors/get_heatmap_table.ts
@@ -31,7 +31,6 @@ export const getHeatmapTableSelector = createCustomCachedSelector(
     const resultData = data.reduce<HeatmapTable>(
       (acc, curr, index) => {
         const x = getAccessorValue(curr, xAccessor);
-
         const y = getAccessorValue(curr, yAccessor);
         const value = getAccessorValue(curr, valueAccessor);
 
diff --git a/packages/charts/src/chart_types/partition_chart/specs/index.ts b/packages/charts/src/chart_types/partition_chart/specs/index.ts
index 89c4d5ea38..1332017e90 100644
--- a/packages/charts/src/chart_types/partition_chart/specs/index.ts
+++ b/packages/charts/src/chart_types/partition_chart/specs/index.ts
@@ -6,20 +6,27 @@
  * Side Public License, v 1.
  */
 
-import React from 'react';
+import { ComponentProps } from 'react';
 
 import { ChartType } from '../..';
 import { Distance, Pixels, Radius } from '../../../common/geometry';
-import { Spec } from '../../../specs';
+import { BaseDatum, Spec } from '../../../specs';
 import { SpecType } from '../../../specs/constants'; // kept as unshortened import on separate line otherwise import circularity emerges
-import { getConnect, specComponentFactory } from '../../../state/spec_factory';
+import { buildSFProps, SFProps, useSpecFactory } from '../../../state/spec_factory';
 import { IndexedAccessorFn } from '../../../utils/accessor';
-import { Datum, LabelAccessor, ShowAccessor, ValueAccessor, ValueFormatter } from '../../../utils/common';
+import {
+  Datum,
+  LabelAccessor,
+  ShowAccessor,
+  ValueAccessor,
+  ValueFormatter,
+  stripUndefined,
+} from '../../../utils/common';
 import { FillFontSizeRange, FillLabelConfig } from '../../../utils/themes/partition';
 import { percentFormatter } from '../layout/config';
 import { AnimationConfig, PartitionLayout } from '../layout/types/config_types';
-import { NodeColorAccessor, ShapeTreeNode, ValueGetter } from '../layout/types/viewmodel_types';
-import { AGGREGATE_KEY, NodeSorter, PrimitiveValue } from '../layout/utils/group_by_rollup';
+import { NodeColorAccessor, ValueGetter } from '../layout/types/viewmodel_types';
+import { NodeSorter, AGGREGATE_KEY } from '../layout/utils/group_by_rollup';
 
 interface ExtendedFillLabelConfig extends FillLabelConfig, FillFontSizeRange {
   valueFormatter: ValueFormatter;
@@ -29,8 +36,8 @@ interface ExtendedFillLabelConfig extends FillLabelConfig, FillFontSizeRange {
  * Specification for a given layer in the partition chart
  * @public
  */
-export interface Layer {
-  groupByRollup: IndexedAccessorFn;
+export interface Layer<D extends BaseDatum = Datum> {
+  groupByRollup: IndexedAccessorFn<D>;
   sortPredicate?: NodeSorter | null;
   nodeLabel?: LabelAccessor;
   fillLabel?: Partial<ExtendedFillLabelConfig>;
@@ -38,54 +45,21 @@ export interface Layer {
   shape?: { fillColor: string | NodeColorAccessor };
 }
 
-/**
- * @todo: we really need these typed, but since `specComponentFactory` has the typing
- * for optional and required props built-in, this is not currently possible.
- */
-const defaultProps = {
-  chartType: ChartType.Partition,
-  specType: SpecType.Series,
-  valueAccessor: (d: Datum) => (typeof d === 'number' ? d : 0),
-  valueGetter: (n: ShapeTreeNode): number => n[AGGREGATE_KEY],
-  valueFormatter: (d: number): string => String(d),
-  percentFormatter,
-  topGroove: 20,
-  smallMultiples: null,
-  layers: [
-    {
-      groupByRollup: (d: Datum, i: number) => i,
-      nodeLabel: (d: PrimitiveValue) => String(d),
-      showAccessor: () => true,
-      fillLabel: {},
-    },
-  ],
-  clockwiseSectors: true,
-  specialFirstInnermostSector: true,
-  layout: PartitionLayout.sunburst,
-  drilldown: false,
-  maxRowCount: 12,
-  fillOutside: false,
-  radiusOutside: 128,
-  fillRectangleWidth: Infinity,
-  fillRectangleHeight: Infinity,
-  animation: { duration: 0 },
-};
-
 /**
  * Specifies the partition chart
  * @public
  */
-export interface PartitionSpec extends Spec, AnimationConfig {
+export interface PartitionSpec<D extends BaseDatum = Datum> extends Spec, AnimationConfig {
   specType: typeof SpecType.Series;
   chartType: typeof ChartType.Partition;
-  data: Datum[];
-  valueAccessor: ValueAccessor;
+  data: D[];
+  valueAccessor: ValueAccessor<D>;
   valueFormatter: ValueFormatter;
   valueGetter: ValueGetter;
   percentFormatter: ValueFormatter;
   topGroove: Pixels;
   smallMultiples: string | null;
-  layers: Layer[];
+  layers: Layer<D>[];
   /**
    * Largest to smallest sectors are positioned in a clockwise order
    */
@@ -106,29 +80,56 @@ export interface PartitionSpec extends Spec, AnimationConfig {
   fillRectangleHeight: Distance;
 }
 
-type SpecRequiredProps = Pick<PartitionSpec, 'id' | 'data'>;
-type SpecOptionalProps = Partial<Omit<PartitionSpec, 'chartType' | 'specType' | 'id' | 'data'>>;
+const buildProps = buildSFProps<PartitionSpec>()(
+  {
+    chartType: ChartType.Partition,
+    specType: SpecType.Series,
+  },
+  {
+    valueAccessor: (d) => (typeof d === 'number' ? d : 0),
+    valueGetter: (n) => n[AGGREGATE_KEY],
+    valueFormatter: (d) => String(d),
+    percentFormatter,
+    topGroove: 20,
+    smallMultiples: '__global__small_multiples___',
+    layers: [
+      {
+        groupByRollup: (_, i) => i,
+        nodeLabel: (d) => String(d),
+        showAccessor: () => true,
+        fillLabel: {},
+      },
+    ],
+    clockwiseSectors: true,
+    specialFirstInnermostSector: true,
+    layout: PartitionLayout.sunburst,
+    drilldown: false,
+    maxRowCount: 12,
+    fillOutside: false,
+    radiusOutside: 128,
+    fillRectangleWidth: Infinity,
+    fillRectangleHeight: Infinity,
+    animation: { duration: 0 },
+  },
+);
+
+/**
+ * Adds partition spec to chart specs
+ * @public
+ */
+export const Partition = function <D extends BaseDatum = Datum>(
+  props: SFProps<
+    PartitionSpec<D>,
+    keyof typeof buildProps['overrides'],
+    keyof typeof buildProps['defaults'],
+    keyof typeof buildProps['optionals'],
+    keyof typeof buildProps['requires']
+  >,
+) {
+  const { defaults, overrides } = buildProps;
+  useSpecFactory<PartitionSpec<D>>({ ...defaults, ...stripUndefined(props), ...overrides });
+  return null;
+};
 
 /** @public */
-export const Partition: React.FunctionComponent<SpecRequiredProps & SpecOptionalProps> = getConnect()(
-  specComponentFactory<
-    PartitionSpec,
-    | 'valueAccessor'
-    | 'valueGetter'
-    | 'valueFormatter'
-    | 'percentFormatter'
-    | 'topGroove'
-    | 'smallMultiples'
-    | 'layers'
-    | 'clockwiseSectors'
-    | 'specialFirstInnermostSector'
-    | 'layout'
-    | 'drilldown'
-    | 'maxRowCount'
-    | 'fillOutside'
-    | 'radiusOutside'
-    | 'fillRectangleWidth'
-    | 'fillRectangleHeight'
-    | 'animation'
-  >(defaultProps),
-);
+export type PartitionProps = ComponentProps<typeof Partition>;
diff --git a/packages/charts/src/chart_types/specs.ts b/packages/charts/src/chart_types/specs.ts
index 1d0afcc8b7..ff029ddb4b 100644
--- a/packages/charts/src/chart_types/specs.ts
+++ b/packages/charts/src/chart_types/specs.ts
@@ -8,13 +8,21 @@
 
 export {
   AreaSeries,
+  AreaSeriesProps,
   Axis,
+  AxisProps,
   BarSeries,
+  BarSeriesProps,
   BubbleSeries,
+  BubbleSeriesProps,
   HistogramBarSeries,
+  HistogramBarSeriesProps,
   LineAnnotation,
+  LineAnnotationProps,
   LineSeries,
+  LineSeriesProps,
   RectAnnotation,
+  RectAnnotationProps,
 } from './xy_chart/specs';
 
 export * from './xy_chart/utils/specs';
diff --git a/packages/charts/src/chart_types/wordcloud/specs/index.ts b/packages/charts/src/chart_types/wordcloud/specs/index.ts
index 42e286c526..95a7c839df 100644
--- a/packages/charts/src/chart_types/wordcloud/specs/index.ts
+++ b/packages/charts/src/chart_types/wordcloud/specs/index.ts
@@ -6,12 +6,12 @@
  * Side Public License, v 1.
  */
 
-import React from 'react';
+import { ComponentProps } from 'react';
 
 import { ChartType } from '../..';
 import { Spec } from '../../../specs';
 import { SpecType } from '../../../specs/constants';
-import { getConnect, specComponentFactory } from '../../../state/spec_factory';
+import { specComponentFactory } from '../../../state/spec_factory';
 import {
   WordModel,
   defaultWordcloudSpec,
@@ -20,41 +20,27 @@ import {
   WordcloudViewModel,
 } from '../layout/types/viewmodel_types';
 
-const defaultProps = {
-  chartType: ChartType.Wordcloud,
-  specType: SpecType.Series,
-  ...defaultWordcloudSpec,
-};
-
 export { WordModel, WeightFn, OutOfRoomCallback };
 
 /** @alpha */
 export interface WordcloudSpec extends Spec, WordcloudViewModel {
-  specType: typeof SpecType.Series;
   chartType: typeof ChartType.Wordcloud;
+  specType: typeof SpecType.Series;
 }
 
-type SpecRequiredProps = Pick<WordcloudSpec, 'id'>;
-type SpecOptionalProps = Partial<Omit<WordcloudSpec, 'chartType' | 'specType' | 'id'>>;
-
-/** @alpha */
-export const Wordcloud: React.FunctionComponent<SpecRequiredProps & SpecOptionalProps> = getConnect()(
-  specComponentFactory<
-    WordcloudSpec,
-    | 'chartType'
-    | 'startAngle'
-    | 'endAngle'
-    | 'angleCount'
-    | 'padding'
-    | 'fontWeight'
-    | 'fontFamily'
-    | 'fontStyle'
-    | 'minFontSize'
-    | 'maxFontSize'
-    | 'spiral'
-    | 'exponent'
-    | 'data'
-    | 'weightFn'
-    | 'outOfRoomCallback'
-  >(defaultProps),
+/**
+ * Adds wordcloud spec to chart
+ * @alpha
+ */
+export const Wordcloud = specComponentFactory<WordcloudSpec>()(
+  {
+    chartType: ChartType.Wordcloud,
+    specType: SpecType.Series,
+  },
+  {
+    ...defaultWordcloudSpec,
+  },
 );
+
+/** @public */
+export type WordcloudProps = ComponentProps<typeof Wordcloud>;
diff --git a/packages/charts/src/chart_types/xy_chart/annotations/line/tooltip.test.tsx b/packages/charts/src/chart_types/xy_chart/annotations/line/tooltip.test.tsx
index 0ff1c96032..89f27cbc9f 100644
--- a/packages/charts/src/chart_types/xy_chart/annotations/line/tooltip.test.tsx
+++ b/packages/charts/src/chart_types/xy_chart/annotations/line/tooltip.test.tsx
@@ -43,6 +43,8 @@ describe('Annotation tooltips', () => {
               { x: 2, y: 3 },
               { x: 4, y: 5 },
             ]}
+            xAccessor="x"
+            yAccessors={['y']}
             xScaleType={ScaleType.Linear}
           />
           <LineAnnotation
@@ -81,6 +83,8 @@ describe('Annotation tooltips', () => {
               { x: 2, y: 3 },
               { x: 4, y: 5 },
             ]}
+            xAccessor="x"
+            yAccessors={['y']}
             xScaleType={ScaleType.Linear}
           />
           <LineAnnotation
diff --git a/packages/charts/src/chart_types/xy_chart/annotations/types.ts b/packages/charts/src/chart_types/xy_chart/annotations/types.ts
index 9dfb4de79f..dd045375a4 100644
--- a/packages/charts/src/chart_types/xy_chart/annotations/types.ts
+++ b/packages/charts/src/chart_types/xy_chart/annotations/types.ts
@@ -39,7 +39,7 @@ export interface AnnotationDetails {
  *
  * @public
  */
-export type ComponentWithAnnotationDatum = ComponentType<LineAnnotationDatum>;
+export type ComponentWithAnnotationDatum<D = any> = ComponentType<LineAnnotationDatum<D>>;
 
 /**
  * The marker for an Annotation. Usually a JSX element
diff --git a/packages/charts/src/chart_types/xy_chart/specs/area_series.ts b/packages/charts/src/chart_types/xy_chart/specs/area_series.ts
new file mode 100644
index 0000000000..a3a36c914c
--- /dev/null
+++ b/packages/charts/src/chart_types/xy_chart/specs/area_series.ts
@@ -0,0 +1,52 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { ComponentProps } from 'react';
+
+import { ChartType } from '../..';
+import { ScaleType } from '../../../scales/constants';
+import { SpecType } from '../../../specs/constants';
+import { buildSFProps, SFProps, useSpecFactory } from '../../../state/spec_factory';
+import { Datum, stripUndefined } from '../../../utils/common';
+import { AreaSeriesSpec, HistogramModeAlignments, DEFAULT_GLOBAL_ID, SeriesType, BaseDatum } from '../utils/specs';
+
+const buildProps = buildSFProps<AreaSeriesSpec>()(
+  {
+    chartType: ChartType.XYAxis,
+    specType: SpecType.Series,
+    seriesType: SeriesType.Area,
+  },
+  {
+    groupId: DEFAULT_GLOBAL_ID,
+    xScaleType: ScaleType.Linear,
+    yScaleType: ScaleType.Linear,
+    hideInLegend: false,
+    histogramModeAlignment: HistogramModeAlignments.Center,
+  },
+);
+
+/**
+ * Adds bar series to chart specs
+ * @public
+ */
+export const AreaSeries = function <D extends BaseDatum = Datum>(
+  props: SFProps<
+    AreaSeriesSpec<D>,
+    keyof typeof buildProps['overrides'],
+    keyof typeof buildProps['defaults'],
+    keyof typeof buildProps['optionals'],
+    keyof typeof buildProps['requires']
+  >,
+) {
+  const { defaults, overrides } = buildProps;
+  useSpecFactory<AreaSeriesSpec<D>>({ ...defaults, ...stripUndefined(props), ...overrides });
+  return null;
+};
+
+/** @public */
+export type AreaSeriesProps = ComponentProps<typeof AreaSeries>;
diff --git a/packages/charts/src/chart_types/xy_chart/specs/area_series.tsx b/packages/charts/src/chart_types/xy_chart/specs/area_series.tsx
deleted file mode 100644
index 0e5231faf0..0000000000
--- a/packages/charts/src/chart_types/xy_chart/specs/area_series.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License
- * 2.0 and the Server Side Public License, v 1; you may not use this file except
- * in compliance with, at your election, the Elastic License 2.0 or the Server
- * Side Public License, v 1.
- */
-
-import React from 'react';
-
-import { ChartType } from '../..';
-import { ScaleType } from '../../../scales/constants';
-import { SpecType } from '../../../specs/constants';
-import { specComponentFactory, getConnect } from '../../../state/spec_factory';
-import { AreaSeriesSpec, HistogramModeAlignments, DEFAULT_GLOBAL_ID, SeriesType } from '../utils/specs';
-
-const defaultProps = {
-  chartType: ChartType.XYAxis,
-  specType: SpecType.Series,
-  seriesType: SeriesType.Area,
-  groupId: DEFAULT_GLOBAL_ID,
-  xScaleType: ScaleType.Linear,
-  yScaleType: ScaleType.Linear,
-  xAccessor: 'x',
-  yAccessors: ['y'],
-  hideInLegend: false,
-  histogramModeAlignment: HistogramModeAlignments.Center,
-};
-
-type SpecRequiredProps = Pick<AreaSeriesSpec, 'id' | 'data'>;
-type SpecOptionalProps = Partial<Omit<AreaSeriesSpec, 'chartType' | 'specType' | 'seriesType' | 'id' | 'data'>>;
-
-/** @public */
-export const AreaSeries: React.FunctionComponent<SpecRequiredProps & SpecOptionalProps> = getConnect()(
-  specComponentFactory<
-    AreaSeriesSpec,
-    | 'seriesType'
-    | 'groupId'
-    | 'xScaleType'
-    | 'yScaleType'
-    | 'xAccessor'
-    | 'yAccessors'
-    | 'hideInLegend'
-    | 'histogramModeAlignment'
-  >(defaultProps),
-);
diff --git a/packages/charts/src/chart_types/xy_chart/specs/axis.tsx b/packages/charts/src/chart_types/xy_chart/specs/axis.ts
similarity index 62%
rename from packages/charts/src/chart_types/xy_chart/specs/axis.tsx
rename to packages/charts/src/chart_types/xy_chart/specs/axis.ts
index 468c835cbd..a91448d627 100644
--- a/packages/charts/src/chart_types/xy_chart/specs/axis.tsx
+++ b/packages/charts/src/chart_types/xy_chart/specs/axis.ts
@@ -6,30 +6,32 @@
  * Side Public License, v 1.
  */
 
-import React from 'react';
+import { ComponentProps } from 'react';
 
 import { ChartType } from '../..';
 import { SpecType } from '../../../specs/constants';
-import { getConnect, specComponentFactory } from '../../../state/spec_factory';
+import { specComponentFactory } from '../../../state/spec_factory';
 import { Position } from '../../../utils/common';
 import { AxisSpec, DEFAULT_GLOBAL_ID } from '../utils/specs';
 
-/** @public */
-export const Axis: React.FunctionComponent<SpecRequired & SpecOptionals> = getConnect()(
-  specComponentFactory<
-    AxisSpec,
-    'groupId' | 'hide' | 'showOverlappingTicks' | 'showOverlappingLabels' | 'position' | 'timeAxisLayerCount'
-  >({
+/**
+ * Add axis spec to chart
+ * @public
+ */
+export const Axis = specComponentFactory<AxisSpec>()(
+  {
     chartType: ChartType.XYAxis,
     specType: SpecType.Axis,
+  },
+  {
     groupId: DEFAULT_GLOBAL_ID,
     hide: false,
     showOverlappingTicks: false,
     showOverlappingLabels: false,
     position: Position.Left,
     timeAxisLayerCount: 0,
-  }),
+  },
 );
 
-type SpecRequired = Pick<AxisSpec, 'id'>;
-type SpecOptionals = Partial<Omit<AxisSpec, 'chartType' | 'specType' | 'seriesType' | 'id'>>;
+/** @public */
+export type AxisProps = ComponentProps<typeof Axis>;
diff --git a/packages/charts/src/chart_types/xy_chart/specs/bar_series.ts b/packages/charts/src/chart_types/xy_chart/specs/bar_series.ts
new file mode 100644
index 0000000000..866e810585
--- /dev/null
+++ b/packages/charts/src/chart_types/xy_chart/specs/bar_series.ts
@@ -0,0 +1,52 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { ComponentProps } from 'react';
+
+import { ChartType } from '../..';
+import { ScaleType } from '../../../scales/constants';
+import { SpecType } from '../../../specs/constants';
+import { useSpecFactory, SFProps, buildSFProps } from '../../../state/spec_factory';
+import { Datum, stripUndefined } from '../../../utils/common';
+import { BarSeriesSpec, BaseDatum, DEFAULT_GLOBAL_ID, SeriesType } from '../utils/specs';
+
+const buildProps = buildSFProps<BarSeriesSpec>()(
+  {
+    chartType: ChartType.XYAxis,
+    specType: SpecType.Series,
+    seriesType: SeriesType.Bar,
+  },
+  {
+    groupId: DEFAULT_GLOBAL_ID,
+    xScaleType: ScaleType.Ordinal,
+    yScaleType: ScaleType.Linear,
+    hideInLegend: false,
+    enableHistogramMode: false,
+  },
+);
+
+/**
+ * Adds bar series to chart specs
+ * @public
+ */
+export const BarSeries = function <D extends BaseDatum = Datum>(
+  props: SFProps<
+    BarSeriesSpec<D>,
+    keyof typeof buildProps['overrides'],
+    keyof typeof buildProps['defaults'],
+    keyof typeof buildProps['optionals'],
+    keyof typeof buildProps['requires']
+  >,
+) {
+  const { defaults, overrides } = buildProps;
+  useSpecFactory<BarSeriesSpec<D>>({ ...defaults, ...stripUndefined(props), ...overrides });
+  return null;
+};
+
+/** @public */
+export type BarSeriesProps = ComponentProps<typeof BarSeries>;
diff --git a/packages/charts/src/chart_types/xy_chart/specs/bar_series.tsx b/packages/charts/src/chart_types/xy_chart/specs/bar_series.tsx
deleted file mode 100644
index 7006236bc7..0000000000
--- a/packages/charts/src/chart_types/xy_chart/specs/bar_series.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License
- * 2.0 and the Server Side Public License, v 1; you may not use this file except
- * in compliance with, at your election, the Elastic License 2.0 or the Server
- * Side Public License, v 1.
- */
-
-import React from 'react';
-
-import { ChartType } from '../..';
-import { ScaleType } from '../../../scales/constants';
-import { SpecType } from '../../../specs/constants';
-import { specComponentFactory, getConnect } from '../../../state/spec_factory';
-import { BarSeriesSpec, DEFAULT_GLOBAL_ID, SeriesType } from '../utils/specs';
-
-const defaultProps = {
-  chartType: ChartType.XYAxis,
-  specType: SpecType.Series,
-  seriesType: SeriesType.Bar,
-  groupId: DEFAULT_GLOBAL_ID,
-  xScaleType: ScaleType.Ordinal,
-  yScaleType: ScaleType.Linear,
-  xAccessor: 'x',
-  yAccessors: ['y'],
-  hideInLegend: false,
-  enableHistogramMode: false,
-};
-
-type SpecRequiredProps = Pick<BarSeriesSpec, 'id' | 'data'>;
-type SpecOptionalProps = Partial<Omit<BarSeriesSpec, 'chartType' | 'specType' | 'seriesType' | 'id' | 'data'>>;
-
-/** @public */
-export const BarSeries: React.FunctionComponent<SpecRequiredProps & SpecOptionalProps> = getConnect()(
-  specComponentFactory<
-    BarSeriesSpec,
-    | 'seriesType'
-    | 'groupId'
-    | 'xScaleType'
-    | 'yScaleType'
-    | 'xAccessor'
-    | 'yAccessors'
-    | 'hideInLegend'
-    | 'enableHistogramMode'
-  >(defaultProps),
-);
diff --git a/packages/charts/src/chart_types/xy_chart/specs/bubble_series.ts b/packages/charts/src/chart_types/xy_chart/specs/bubble_series.ts
new file mode 100644
index 0000000000..d3ee9c5e94
--- /dev/null
+++ b/packages/charts/src/chart_types/xy_chart/specs/bubble_series.ts
@@ -0,0 +1,51 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { ComponentProps } from 'react';
+
+import { ChartType } from '../..';
+import { ScaleType } from '../../../scales/constants';
+import { SpecType } from '../../../specs/constants';
+import { buildSFProps, SFProps, useSpecFactory } from '../../../state/spec_factory';
+import { Datum, stripUndefined } from '../../../utils/common';
+import { BaseDatum, BubbleSeriesSpec, DEFAULT_GLOBAL_ID, SeriesType } from '../utils/specs';
+
+const buildProps = buildSFProps<BubbleSeriesSpec>()(
+  {
+    chartType: ChartType.XYAxis,
+    specType: SpecType.Series,
+    seriesType: SeriesType.Bubble,
+  },
+  {
+    groupId: DEFAULT_GLOBAL_ID,
+    xScaleType: ScaleType.Ordinal,
+    yScaleType: ScaleType.Linear,
+    hideInLegend: false,
+  },
+);
+
+/**
+ * Adds bar series to chart specs
+ * @public
+ */
+export const BubbleSeries = function <D extends BaseDatum = Datum>(
+  props: SFProps<
+    BubbleSeriesSpec<D>,
+    keyof typeof buildProps['overrides'],
+    keyof typeof buildProps['defaults'],
+    keyof typeof buildProps['optionals'],
+    keyof typeof buildProps['requires']
+  >,
+) {
+  const { defaults, overrides } = buildProps;
+  useSpecFactory<BubbleSeriesSpec<D>>({ ...defaults, ...stripUndefined(props), ...overrides });
+  return null;
+};
+
+/** @public */
+export type BubbleSeriesProps = ComponentProps<typeof BubbleSeries>;
diff --git a/packages/charts/src/chart_types/xy_chart/specs/bubble_series.tsx b/packages/charts/src/chart_types/xy_chart/specs/bubble_series.tsx
deleted file mode 100644
index ee37e0d052..0000000000
--- a/packages/charts/src/chart_types/xy_chart/specs/bubble_series.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License
- * 2.0 and the Server Side Public License, v 1; you may not use this file except
- * in compliance with, at your election, the Elastic License 2.0 or the Server
- * Side Public License, v 1.
- */
-
-import React from 'react';
-
-import { ChartType } from '../..';
-import { ScaleType } from '../../../scales/constants';
-import { SpecType } from '../../../specs/constants';
-import { specComponentFactory, getConnect } from '../../../state/spec_factory';
-import { BubbleSeriesSpec, DEFAULT_GLOBAL_ID, SeriesType } from '../utils/specs';
-
-const defaultProps = {
-  chartType: ChartType.XYAxis,
-  specType: SpecType.Series,
-  seriesType: SeriesType.Bubble,
-  groupId: DEFAULT_GLOBAL_ID,
-  xScaleType: ScaleType.Ordinal,
-  yScaleType: ScaleType.Linear,
-  xAccessor: 'x',
-  yAccessors: ['y'],
-  hideInLegend: false,
-};
-type SpecRequiredProps = Pick<BubbleSeriesSpec, 'id' | 'data'>;
-type SpecOptionalProps = Partial<Omit<BubbleSeriesSpec, 'chartType' | 'specType' | 'seriesType' | 'id' | 'data'>>;
-
-/**
- * @alpha
- *
- * This series type uses a spatial index that is incompatible with other series types. This will
- * be fixed once an update has been made to the tooltip design.
- *
- * When used alone with other `BubbleSeries` the spatial index will be used. However when
- * mixed with other series types, the linear index will be used. This will affect highlighting
- * of points when using the `markSizeAccessor`.
- */
-export const BubbleSeries: React.FunctionComponent<SpecRequiredProps & SpecOptionalProps> = getConnect()(
-  specComponentFactory<
-    BubbleSeriesSpec,
-    'seriesType' | 'groupId' | 'xScaleType' | 'yScaleType' | 'xAccessor' | 'yAccessors' | 'hideInLegend'
-  >(defaultProps),
-);
diff --git a/packages/charts/src/chart_types/xy_chart/specs/histogram_bar_series.ts b/packages/charts/src/chart_types/xy_chart/specs/histogram_bar_series.ts
new file mode 100644
index 0000000000..031080a1be
--- /dev/null
+++ b/packages/charts/src/chart_types/xy_chart/specs/histogram_bar_series.ts
@@ -0,0 +1,52 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { ComponentProps } from 'react';
+
+import { ChartType } from '../..';
+import { ScaleType } from '../../../scales/constants';
+import { SpecType } from '../../../specs/constants';
+import { buildSFProps, SFProps, useSpecFactory } from '../../../state/spec_factory';
+import { Datum, stripUndefined } from '../../../utils/common';
+import { HistogramBarSeriesSpec, DEFAULT_GLOBAL_ID, SeriesType, BaseDatum } from '../utils/specs';
+
+const buildProps = buildSFProps<HistogramBarSeriesSpec>()(
+  {
+    chartType: ChartType.XYAxis,
+    specType: SpecType.Series,
+    seriesType: SeriesType.Bar,
+  },
+  {
+    groupId: DEFAULT_GLOBAL_ID,
+    xScaleType: ScaleType.Linear,
+    yScaleType: ScaleType.Linear,
+    hideInLegend: false,
+    enableHistogramMode: true as const,
+  },
+);
+
+/**
+ * Adds bar series to chart specs
+ * @public
+ */
+export const HistogramBarSeries = function <D extends BaseDatum = Datum>(
+  props: SFProps<
+    HistogramBarSeriesSpec<D>,
+    keyof typeof buildProps['overrides'],
+    keyof typeof buildProps['defaults'],
+    keyof typeof buildProps['optionals'],
+    keyof typeof buildProps['requires']
+  >,
+) {
+  const { defaults, overrides } = buildProps;
+  useSpecFactory<HistogramBarSeriesSpec<D>>({ ...defaults, ...stripUndefined(props), ...overrides });
+  return null;
+};
+
+/** @public */
+export type HistogramBarSeriesProps = ComponentProps<typeof HistogramBarSeries>;
diff --git a/packages/charts/src/chart_types/xy_chart/specs/histogram_bar_series.tsx b/packages/charts/src/chart_types/xy_chart/specs/histogram_bar_series.tsx
deleted file mode 100644
index bd0d7e20b3..0000000000
--- a/packages/charts/src/chart_types/xy_chart/specs/histogram_bar_series.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License
- * 2.0 and the Server Side Public License, v 1; you may not use this file except
- * in compliance with, at your election, the Elastic License 2.0 or the Server
- * Side Public License, v 1.
- */
-
-import React from 'react';
-
-import { ChartType } from '../..';
-import { ScaleType } from '../../../scales/constants';
-import { SpecType } from '../../../specs/constants';
-import { specComponentFactory, getConnect } from '../../../state/spec_factory';
-import { HistogramBarSeriesSpec, DEFAULT_GLOBAL_ID, SeriesType } from '../utils/specs';
-
-const defaultProps = {
-  chartType: ChartType.XYAxis,
-  specType: SpecType.Series,
-  seriesType: SeriesType.Bar,
-  groupId: DEFAULT_GLOBAL_ID,
-  xScaleType: ScaleType.Linear,
-  yScaleType: ScaleType.Linear,
-  xAccessor: 'x',
-  yAccessors: ['y'],
-  hideInLegend: false,
-  enableHistogramMode: true as const,
-};
-
-type SpecRequiredProps = Pick<HistogramBarSeriesSpec, 'id' | 'data'>;
-type SpecOptionalProps = Partial<Omit<HistogramBarSeriesSpec, 'chartType' | 'specType' | 'seriesType' | 'id' | 'data'>>;
-
-/** @public */
-export const HistogramBarSeries: React.FunctionComponent<SpecRequiredProps & SpecOptionalProps> = getConnect()(
-  specComponentFactory<
-    HistogramBarSeriesSpec,
-    | 'seriesType'
-    | 'groupId'
-    | 'xScaleType'
-    | 'yScaleType'
-    | 'xAccessor'
-    | 'yAccessors'
-    | 'hideInLegend'
-    | 'enableHistogramMode'
-  >(defaultProps),
-);
diff --git a/packages/charts/src/chart_types/xy_chart/specs/index.ts b/packages/charts/src/chart_types/xy_chart/specs/index.ts
index a9dc880845..c7c0024398 100644
--- a/packages/charts/src/chart_types/xy_chart/specs/index.ts
+++ b/packages/charts/src/chart_types/xy_chart/specs/index.ts
@@ -6,11 +6,11 @@
  * Side Public License, v 1.
  */
 
-export { AreaSeries } from './area_series';
-export { Axis } from './axis';
-export { BarSeries } from './bar_series';
-export { BubbleSeries } from './bubble_series';
-export { HistogramBarSeries } from './histogram_bar_series';
-export { LineAnnotation } from './line_annotation';
-export { LineSeries } from './line_series';
-export { RectAnnotation } from './rect_annotation';
+export * from './area_series';
+export * from './axis';
+export * from './bar_series';
+export * from './bubble_series';
+export * from './histogram_bar_series';
+export * from './line_annotation';
+export * from './line_series';
+export * from './rect_annotation';
diff --git a/packages/charts/src/chart_types/xy_chart/specs/line_annotation.ts b/packages/charts/src/chart_types/xy_chart/specs/line_annotation.ts
new file mode 100644
index 0000000000..4f878a0b2c
--- /dev/null
+++ b/packages/charts/src/chart_types/xy_chart/specs/line_annotation.ts
@@ -0,0 +1,53 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { ComponentProps } from 'react';
+
+import { ChartType } from '../..';
+import { SpecType } from '../../../specs/constants';
+import { buildSFProps, SFProps, useSpecFactory } from '../../../state/spec_factory';
+import { stripUndefined } from '../../../utils/common';
+import { DEFAULT_ANNOTATION_LINE_STYLE } from '../../../utils/themes/merge_utils';
+import { LineAnnotationSpec, DEFAULT_GLOBAL_ID, AnnotationType } from '../utils/specs';
+
+const buildProps = buildSFProps<LineAnnotationSpec>()(
+  {
+    chartType: ChartType.XYAxis,
+    specType: SpecType.Annotation,
+  },
+  {
+    groupId: DEFAULT_GLOBAL_ID,
+    annotationType: AnnotationType.Line,
+    style: DEFAULT_ANNOTATION_LINE_STYLE,
+    hideLines: false,
+    hideTooltips: false,
+    hideLinesTooltips: true,
+    zIndex: 1,
+  },
+);
+
+/**
+ * Adds bar series to chart specs
+ * @public
+ */
+export const LineAnnotation = function <D = any>(
+  props: SFProps<
+    LineAnnotationSpec<D>,
+    keyof typeof buildProps['overrides'],
+    keyof typeof buildProps['defaults'],
+    keyof typeof buildProps['optionals'],
+    keyof typeof buildProps['requires']
+  >,
+) {
+  const { defaults, overrides } = buildProps;
+  useSpecFactory<LineAnnotationSpec<D>>({ ...defaults, ...stripUndefined(props), ...overrides });
+  return null;
+};
+
+/** @public */
+export type LineAnnotationProps = ComponentProps<typeof LineAnnotation>;
diff --git a/packages/charts/src/chart_types/xy_chart/specs/line_annotation.tsx b/packages/charts/src/chart_types/xy_chart/specs/line_annotation.tsx
deleted file mode 100644
index e7f445de0b..0000000000
--- a/packages/charts/src/chart_types/xy_chart/specs/line_annotation.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License
- * 2.0 and the Server Side Public License, v 1; you may not use this file except
- * in compliance with, at your election, the Elastic License 2.0 or the Server
- * Side Public License, v 1.
- */
-
-import React from 'react';
-
-import { ChartType } from '../..';
-import { SpecType } from '../../../specs/constants';
-import { getConnect, specComponentFactory } from '../../../state/spec_factory';
-import { DEFAULT_ANNOTATION_LINE_STYLE } from '../../../utils/themes/merge_utils';
-import { LineAnnotationSpec, DEFAULT_GLOBAL_ID, AnnotationType } from '../utils/specs';
-
-const defaultProps = {
-  chartType: ChartType.XYAxis,
-  specType: SpecType.Annotation,
-  groupId: DEFAULT_GLOBAL_ID,
-  annotationType: AnnotationType.Line,
-  style: DEFAULT_ANNOTATION_LINE_STYLE,
-  hideLines: false,
-  hideTooltips: false,
-  hideLinesTooltips: true,
-  zIndex: 1,
-};
-
-type SpecRequiredProps = Pick<LineAnnotationSpec, 'id' | 'dataValues' | 'domainType'>;
-type SpecOptionalProps = Partial<
-  Omit<
-    LineAnnotationSpec,
-    'chartType' | 'specType' | 'seriesType' | 'id' | 'dataValues' | 'domainType' | 'annotationType'
-  >
->;
-
-/** @public */
-export const LineAnnotation: React.FunctionComponent<SpecRequiredProps & SpecOptionalProps> = getConnect()(
-  specComponentFactory<LineAnnotationSpec, 'groupId' | 'annotationType' | 'zIndex' | 'style'>(defaultProps),
-);
diff --git a/packages/charts/src/chart_types/xy_chart/specs/line_series.ts b/packages/charts/src/chart_types/xy_chart/specs/line_series.ts
new file mode 100644
index 0000000000..d9795767eb
--- /dev/null
+++ b/packages/charts/src/chart_types/xy_chart/specs/line_series.ts
@@ -0,0 +1,52 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { ComponentProps } from 'react';
+
+import { ChartType } from '../..';
+import { ScaleType } from '../../../scales/constants';
+import { SpecType } from '../../../specs/constants';
+import { SFProps, buildSFProps, useSpecFactory } from '../../../state/spec_factory';
+import { Datum, stripUndefined } from '../../../utils/common';
+import { LineSeriesSpec, DEFAULT_GLOBAL_ID, HistogramModeAlignments, SeriesType, BaseDatum } from '../utils/specs';
+
+const buildProps = buildSFProps<LineSeriesSpec>()(
+  {
+    chartType: ChartType.XYAxis,
+    specType: SpecType.Series,
+    seriesType: SeriesType.Line,
+  },
+  {
+    groupId: DEFAULT_GLOBAL_ID,
+    xScaleType: ScaleType.Ordinal,
+    yScaleType: ScaleType.Linear,
+    hideInLegend: false,
+    histogramModeAlignment: HistogramModeAlignments.Center,
+  },
+);
+
+/**
+ * Adds bar series to chart specs
+ * @public
+ */
+export const LineSeries = function <D extends BaseDatum = Datum>(
+  props: SFProps<
+    LineSeriesSpec<D>,
+    keyof typeof buildProps['overrides'],
+    keyof typeof buildProps['defaults'],
+    keyof typeof buildProps['optionals'],
+    keyof typeof buildProps['requires']
+  >,
+) {
+  const { defaults, overrides } = buildProps;
+  useSpecFactory<LineSeriesSpec<D>>({ ...defaults, ...stripUndefined(props), ...overrides });
+  return null;
+};
+
+/** @public */
+export type LineSeriesProps = ComponentProps<typeof LineSeries>;
diff --git a/packages/charts/src/chart_types/xy_chart/specs/line_series.tsx b/packages/charts/src/chart_types/xy_chart/specs/line_series.tsx
deleted file mode 100644
index 3bde107fe9..0000000000
--- a/packages/charts/src/chart_types/xy_chart/specs/line_series.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License
- * 2.0 and the Server Side Public License, v 1; you may not use this file except
- * in compliance with, at your election, the Elastic License 2.0 or the Server
- * Side Public License, v 1.
- */
-
-import React from 'react';
-
-import { ChartType } from '../..';
-import { ScaleType } from '../../../scales/constants';
-import { SpecType } from '../../../specs/constants';
-import { specComponentFactory, getConnect } from '../../../state/spec_factory';
-import { LineSeriesSpec, DEFAULT_GLOBAL_ID, HistogramModeAlignments, SeriesType } from '../utils/specs';
-
-const defaultProps = {
-  chartType: ChartType.XYAxis,
-  specType: SpecType.Series,
-  seriesType: SeriesType.Line,
-  groupId: DEFAULT_GLOBAL_ID,
-  xScaleType: ScaleType.Ordinal,
-  yScaleType: ScaleType.Linear,
-  xAccessor: 'x',
-  yAccessors: ['y'],
-  hideInLegend: false,
-  histogramModeAlignment: HistogramModeAlignments.Center,
-};
-type SpecRequiredProps = Pick<LineSeriesSpec, 'id' | 'data'>;
-type SpecOptionalProps = Partial<Omit<LineSeriesSpec, 'chartType' | 'specType' | 'seriesType' | 'id' | 'data'>>;
-
-/** @public */
-export const LineSeries: React.FunctionComponent<SpecRequiredProps & SpecOptionalProps> = getConnect()(
-  specComponentFactory<
-    LineSeriesSpec,
-    | 'seriesType'
-    | 'groupId'
-    | 'xScaleType'
-    | 'yScaleType'
-    | 'xAccessor'
-    | 'yAccessors'
-    | 'hideInLegend'
-    | 'histogramModeAlignment'
-  >(defaultProps),
-);
diff --git a/packages/charts/src/chart_types/xy_chart/specs/rect_annotation.ts b/packages/charts/src/chart_types/xy_chart/specs/rect_annotation.ts
new file mode 100644
index 0000000000..59f28af53d
--- /dev/null
+++ b/packages/charts/src/chart_types/xy_chart/specs/rect_annotation.ts
@@ -0,0 +1,33 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { ComponentProps } from 'react';
+
+import { ChartType } from '../..';
+import { SpecType } from '../../../specs/constants';
+import { specComponentFactory } from '../../../state/spec_factory';
+import { DEFAULT_ANNOTATION_RECT_STYLE } from '../../../utils/themes/merge_utils';
+import { RectAnnotationSpec, DEFAULT_GLOBAL_ID, AnnotationType } from '../utils/specs';
+
+/** @public */
+export const RectAnnotation = specComponentFactory<RectAnnotationSpec>()(
+  {
+    chartType: ChartType.XYAxis,
+    specType: SpecType.Annotation,
+  },
+  {
+    groupId: DEFAULT_GLOBAL_ID,
+    annotationType: AnnotationType.Rectangle,
+    zIndex: -1,
+    style: DEFAULT_ANNOTATION_RECT_STYLE,
+    outside: false,
+  },
+);
+
+/** @public */
+export type RectAnnotationProps = ComponentProps<typeof RectAnnotation>;
diff --git a/packages/charts/src/chart_types/xy_chart/specs/rect_annotation.tsx b/packages/charts/src/chart_types/xy_chart/specs/rect_annotation.tsx
deleted file mode 100644
index 1d2a260179..0000000000
--- a/packages/charts/src/chart_types/xy_chart/specs/rect_annotation.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License
- * 2.0 and the Server Side Public License, v 1; you may not use this file except
- * in compliance with, at your election, the Elastic License 2.0 or the Server
- * Side Public License, v 1.
- */
-
-import React from 'react';
-
-import { ChartType } from '../..';
-import { SpecType } from '../../../specs/constants';
-import { specComponentFactory, getConnect } from '../../../state/spec_factory';
-import { DEFAULT_ANNOTATION_RECT_STYLE } from '../../../utils/themes/merge_utils';
-import { RectAnnotationSpec, DEFAULT_GLOBAL_ID, AnnotationType } from '../utils/specs';
-
-const defaultProps = {
-  chartType: ChartType.XYAxis,
-  specType: SpecType.Annotation,
-  groupId: DEFAULT_GLOBAL_ID,
-  annotationType: AnnotationType.Rectangle,
-  zIndex: -1,
-  style: DEFAULT_ANNOTATION_RECT_STYLE,
-  outside: false,
-};
-
-/** @public */
-export const RectAnnotation: React.FunctionComponent<
-  Pick<RectAnnotationSpec, 'id' | 'dataValues'> &
-    Partial<
-      Omit<
-        RectAnnotationSpec,
-        'chartType' | 'specType' | 'seriesType' | 'id' | 'dataValues' | 'domainType' | 'annotationType'
-      >
-    >
-> = getConnect()(
-  specComponentFactory<RectAnnotationSpec, 'groupId' | 'annotationType' | 'zIndex' | 'style'>(defaultProps),
-);
diff --git a/packages/charts/src/chart_types/xy_chart/utils/series.ts b/packages/charts/src/chart_types/xy_chart/utils/series.ts
index 5fba386ce6..adf1a051e1 100644
--- a/packages/charts/src/chart_types/xy_chart/utils/series.ts
+++ b/packages/charts/src/chart_types/xy_chart/utils/series.ts
@@ -22,7 +22,7 @@ import { X_SCALE_DEFAULT } from '../scales/scale_defaults';
 import { SmallMultiplesGroupBy } from '../state/selectors/get_specs';
 import { applyFitFunctionToDataSeries } from './fit_function_utils';
 import { groupBy } from './group_data_series';
-import { BasicSeriesSpec, SeriesNameConfigOptions, SeriesSpecs, SeriesType, StackMode } from './specs';
+import { BaseDatum, BasicSeriesSpec, SeriesNameConfigOptions, SeriesSpecs, SeriesType, StackMode } from './specs';
 import { datumXSortPredicate, formatStackedDataSeriesValues } from './stacked_series_utils';
 
 /** @internal */
@@ -59,8 +59,8 @@ export interface DataSeriesDatum<T = any> {
 }
 
 /** @public */
-export interface XYChartSeriesIdentifier extends SeriesIdentifier {
-  yAccessor: Accessor;
+export interface XYChartSeriesIdentifier<D extends BaseDatum = Datum> extends SeriesIdentifier {
+  yAccessor: Accessor<D>;
   splitAccessors: Map<string | number, string | number>; // does the map have a size vs making it optional
   smVerticalAccessorValue?: string | number;
   smHorizontalAccessorValue?: string | number;
@@ -68,7 +68,7 @@ export interface XYChartSeriesIdentifier extends SeriesIdentifier {
 }
 
 /** @internal */
-export type DataSeries = XYChartSeriesIdentifier & {
+export type DataSeries<D extends BaseDatum = Datum> = XYChartSeriesIdentifier<D> & {
   groupId: GroupId;
   seriesType: SeriesType;
   data: DataSeriesDatum[];
@@ -95,7 +95,10 @@ export function getSeriesIndex(series: SeriesIdentifier[], target: SeriesIdentif
  * Returns string form of accessor. Uses index when accessor is a function.
  * @internal
  */
-export function getAccessorFieldName(accessor: Accessor | AccessorFn, index: number) {
+export function getAccessorFieldName<D extends BaseDatum>(
+  accessor: Accessor<D> | AccessorFn<D>,
+  index: number,
+): Accessor<D> | string {
   return typeof accessor === 'function' ? accessor.fieldName ?? `(index:${index})` : accessor;
 }
 
@@ -252,13 +255,13 @@ export function getSeriesKey(
  * Get the array of values that forms a series key
  * @internal
  */
-function getSplitAccessors(
-  datum: Datum,
-  accessors: (Accessor | AccessorFn)[] = [],
+function getSplitAccessors<D extends BaseDatum>(
+  datum: D,
+  accessors: (Accessor<D> | AccessorFn<D>)[] = [],
 ): Map<string | number, string | number> {
   const splitAccessors = new Map<string | number, string | number>();
   if (typeof datum === 'object' && datum !== null) {
-    accessors.forEach((accessor: Accessor | AccessorFn, index) => {
+    accessors.forEach((accessor, index) => {
       const value = getAccessorValue(datum, accessor);
       if (typeof value === 'string' || typeof value === 'number') {
         const accessorStr = getAccessorFieldName(accessor, index);
@@ -273,13 +276,13 @@ function getSplitAccessors(
  * Extract y1 and y0 and mark properties from Datum. Casting them to numbers or null
  * @internal
  */
-export function extractYAndMarkFromDatum(
-  datum: Datum,
-  yAccessor: Accessor | AccessorFn,
+export function extractYAndMarkFromDatum<D extends BaseDatum>(
+  datum: D,
+  yAccessor: Accessor<D> | AccessorFn<D>,
   nonNumericValues: any[],
   bandedSpec: boolean,
-  y0Accessor?: Accessor | AccessorFn,
-  markSizeAccessor?: Accessor | AccessorFn,
+  y0Accessor?: Accessor<D> | AccessorFn<D>,
+  markSizeAccessor?: Accessor<D> | AccessorFn<D>,
 ): Pick<DataSeriesDatum, 'y0' | 'y1' | 'mark' | 'datum' | 'initialY0' | 'initialY1'> {
   const mark =
     markSizeAccessor === undefined ? null : finiteOrNull(getAccessorValue(datum, markSizeAccessor), nonNumericValues);
diff --git a/packages/charts/src/chart_types/xy_chart/utils/specs.ts b/packages/charts/src/chart_types/xy_chart/utils/specs.ts
index 046a6ed09e..9e971e6537 100644
--- a/packages/charts/src/chart_types/xy_chart/utils/specs.ts
+++ b/packages/charts/src/chart_types/xy_chart/utils/specs.ts
@@ -16,7 +16,7 @@ import { LogScaleOptions, ScaleContinuousType } from '../../../scales';
 import { ScaleType } from '../../../scales/constants';
 import { Spec } from '../../../specs';
 import { SpecType } from '../../../specs/constants';
-import { Accessor, AccessorFormat, AccessorFn } from '../../../utils/accessor';
+import { AccessorFormat, AccessorFn, Accessor } from '../../../utils/accessor';
 import { RecursivePartial, Position, Datum } from '../../../utils/common';
 import { CurveType } from '../../../utils/curves';
 import { OrdinalDomain } from '../../../utils/domain';
@@ -399,7 +399,7 @@ export interface DisplayValueSpec {
 }
 
 /** @public */
-export interface SeriesSpec extends Spec {
+export interface SeriesSpec<D extends BaseDatum = Datum> extends Spec {
   specType: typeof SpecType.Series;
   chartType: typeof ChartType.XYAxis;
   /**
@@ -418,7 +418,7 @@ export interface SeriesSpec extends Spec {
    */
   useDefaultGroupDomain?: boolean | string;
   /** An array of data */
-  data: Datum[];
+  data: D[];
   /** The type of series you are looking to render */
   seriesType: SeriesType;
   /** Set colors for specific series */
@@ -482,23 +482,28 @@ export type SeriesColorAccessorFn = (seriesIdentifier: XYChartSeriesIdentifier)
 export type SeriesColorAccessor = string | SeriesColorsArray | SeriesColorAccessorFn;
 
 /** @public */
-export interface SeriesAccessors {
+export interface SeriesAccessors<D extends BaseDatum = any> {
   /** The field name of the x value on Datum object */
-  xAccessor: Accessor | AccessorFn;
+  xAccessor: Accessor<D> | AccessorFn<D>;
   /** An array of field names one per y metric value */
-  yAccessors: (Accessor | AccessorFn)[];
+  yAccessors: (Accessor<D> | AccessorFn<D>)[];
   /** An optional accessor of the y0 value: base point for area/bar charts  */
-  y0Accessors?: (Accessor | AccessorFn)[];
+  y0Accessors?: (Accessor<D> | AccessorFn<D>)[];
   /** An array of fields thats indicates the datum series membership */
-  splitSeriesAccessors?: (Accessor | AccessorFn)[];
-  /** An array of fields thats indicates the stack membership */
-  stackAccessors?: (Accessor | AccessorFn)[];
+  splitSeriesAccessors?: (Accessor<D> | AccessorFn<D>)[];
+  /**
+   * An array of fields thats indicates the stack membership.
+   * Does not depend on datum at the moment.
+   *
+   * TODO pass datum to accessors when applicable
+   */
+  stackAccessors?: (Accessor<any> | AccessorFn<any>)[];
   /**
    * Field name of mark size metric on `Datum`
    *
    * Only used with line/area series
    */
-  markSizeAccessor?: Accessor | AccessorFn;
+  markSizeAccessor?: Accessor<D> | AccessorFn<D>;
 }
 
 /** @public */
@@ -535,27 +540,39 @@ export interface SeriesScales {
   yNice?: boolean;
 }
 
+type MarkFormatter<Type extends string = ''> = Type extends 'bar'
+  ? // eslint-disable-next-line @typescript-eslint/ban-types
+    {} // these options are to be empty thus {}
+  : {
+      /**
+       * A function called to format every single mark value
+       *
+       * Only used with line/area series
+       */
+      markFormat?: TickFormatter<number>;
+    };
+
 /** @public */
 
-export type BasicSeriesSpec = SeriesSpec &
-  SeriesAccessors &
-  SeriesScales & {
-    /**
-     * A function called to format every single mark value
-     *
-     * Only used with line/area series
-     */
-    markFormat?: TickFormatter<number>;
-  };
+export type BasicSeriesSpec<D extends BaseDatum = Datum, Type extends string = ''> = SeriesSpec<D> &
+  SeriesAccessors<D> &
+  SeriesScales &
+  MarkFormatter<Type>;
 
 /** @public */
-export type SeriesSpecs<S extends BasicSeriesSpec = BasicSeriesSpec> = Array<S>;
+export type SeriesSpecs<D extends BaseDatum = Datum, S extends BasicSeriesSpec<D> = BasicSeriesSpec<D>> = Array<S>;
+
+/**
+ * Expected shape of unknown data row/datum
+ * @public
+ */
+export type BaseDatum = Record<string, any> | any[];
 
 /**
  * This spec describe the dataset configuration used to display a bar series.
  * @public
  */
-export type BarSeriesSpec = BasicSeriesSpec &
+export type BarSeriesSpec<D extends BaseDatum = Datum> = BasicSeriesSpec<D, 'bar'> &
   Postfixes & {
     /** @defaultValue `bar` {@link (SeriesType:type) | SeriesType.Bar} */
     seriesType: typeof SeriesType.Bar;
@@ -587,7 +604,7 @@ export type BarSeriesSpec = BasicSeriesSpec &
  * A histogram bar series is identical to a bar series except that stackAccessors are not allowed.
  * @public
  */
-export type HistogramBarSeriesSpec = Omit<BarSeriesSpec, 'stackAccessors'> & {
+export type HistogramBarSeriesSpec<D extends BaseDatum = Datum> = Omit<BarSeriesSpec<D>, 'stackAccessors'> & {
   enableHistogramMode: true;
 };
 
@@ -615,7 +632,7 @@ export type FitConfig = {
  * This spec describe the dataset configuration used to display a line series.
  * @public
  */
-export type LineSeriesSpec = BasicSeriesSpec &
+export type LineSeriesSpec<D extends BaseDatum = Datum> = BasicSeriesSpec<D, 'line'> &
   HistogramConfig & {
     /** @defaultValue `line` {@link (SeriesType:type) | SeriesType.Line} */
     seriesType: typeof SeriesType.Line;
@@ -636,7 +653,7 @@ export type LineSeriesSpec = BasicSeriesSpec &
  *
  * @alpha
  */
-export type BubbleSeriesSpec = BasicSeriesSpec & {
+export type BubbleSeriesSpec<D extends BaseDatum = Datum> = BasicSeriesSpec<D, 'bubble'> & {
   /** @defaultValue `bubble` {@link (SeriesType:type) | SeriesType.Bubble} */
   seriesType: typeof SeriesType.Bubble;
   bubbleSeriesStyle?: RecursivePartial<BubbleSeriesStyle>;
@@ -650,7 +667,7 @@ export type BubbleSeriesSpec = BasicSeriesSpec & {
  * This spec describe the dataset configuration used to display an area series.
  * @public
  */
-export type AreaSeriesSpec = BasicSeriesSpec &
+export type AreaSeriesSpec<D extends BaseDatum = Datum> = BasicSeriesSpec<D, 'area'> &
   HistogramConfig &
   Postfixes & {
     /** @defaultValue `area` {@link (SeriesType:type) | SeriesType.Area} */
@@ -796,11 +813,11 @@ export type AnnotationDomainType = $Values<typeof AnnotationDomainType>;
  * The descriptive object of a line annotation
  * @public
  */
-export interface LineAnnotationDatum {
+export interface LineAnnotationDatum<D = any> {
   /**
-   * The value on the x or y axis accordingly to the domainType configured
+   * The value on the x or y axis according to the domainType configured
    */
-  dataValue: any;
+  dataValue: D;
   /**
    * A textual description of the annotation
    */
@@ -812,16 +829,17 @@ export interface LineAnnotationDatum {
 }
 
 /** @public */
-export type LineAnnotationSpec = BaseAnnotationSpec<
+export type LineAnnotationSpec<D = any> = BaseAnnotationSpec<
   typeof AnnotationType.Line,
-  LineAnnotationDatum,
-  LineAnnotationStyle
+  LineAnnotationDatum<D>,
+  LineAnnotationStyle,
+  D
 > & {
   domainType: AnnotationDomainType;
   /** Optional Custom marker icon centered on data value */
-  marker?: ReactNode | ComponentWithAnnotationDatum;
+  marker?: ReactNode | ComponentWithAnnotationDatum<D>;
   /** Optional marker body, always contained within chart area */
-  markerBody?: ReactNode | ComponentWithAnnotationDatum;
+  markerBody?: ReactNode | ComponentWithAnnotationDatum<D>;
   /**
    * Custom marker dimensions; will be computed internally
    * Any user-supplied values will be overwritten
@@ -934,8 +952,9 @@ export type AnnotationPortalSettings = TooltipPortalSettings<'chart'> & {
 /** @public */
 export interface BaseAnnotationSpec<
   T extends typeof AnnotationType.Rectangle | typeof AnnotationType.Line,
-  D extends RectAnnotationDatum | LineAnnotationDatum,
-  S extends RectAnnotationStyle | LineAnnotationStyle
+  AD extends RectAnnotationDatum | LineAnnotationDatum<D>,
+  S extends RectAnnotationStyle | LineAnnotationStyle,
+  D = never
 > extends Spec,
     AnnotationPortalSettings {
   chartType: typeof ChartType.XYAxis;
@@ -952,7 +971,7 @@ export interface BaseAnnotationSpec<
   /**
    * Data values defined with coordinates and details
    */
-  dataValues: D[];
+  dataValues: AD[];
   /**
    * Custom annotation style
    */
@@ -969,10 +988,10 @@ export interface BaseAnnotationSpec<
 }
 
 /** @public */
-export type AnnotationSpec = LineAnnotationSpec | RectAnnotationSpec;
+export type AnnotationSpec<D extends BaseDatum = any> = LineAnnotationSpec<D> | RectAnnotationSpec;
 
 /** @internal */
-export function isLineAnnotation(spec: AnnotationSpec): spec is LineAnnotationSpec {
+export function isLineAnnotation<D>(spec: AnnotationSpec<D>): spec is LineAnnotationSpec<D> {
   return spec.annotationType === AnnotationType.Line;
 }
 
@@ -982,21 +1001,21 @@ export function isRectAnnotation(spec: AnnotationSpec): spec is RectAnnotationSp
 }
 
 /** @internal */
-export function isBarSeriesSpec(spec: BasicSeriesSpec): spec is BarSeriesSpec {
+export function isBarSeriesSpec<D extends BaseDatum>(spec: BasicSeriesSpec<D>): spec is BarSeriesSpec<D> {
   return spec.seriesType === SeriesType.Bar;
 }
 
 /** @internal */
-export function isBubbleSeriesSpec(spec: BasicSeriesSpec): spec is BubbleSeriesSpec {
+export function isBubbleSeriesSpec<D extends BaseDatum>(spec: BasicSeriesSpec<D>): spec is BubbleSeriesSpec<D> {
   return spec.seriesType === SeriesType.Bubble;
 }
 
 /** @internal */
-export function isLineSeriesSpec(spec: BasicSeriesSpec): spec is LineSeriesSpec {
+export function isLineSeriesSpec<D extends BaseDatum>(spec: BasicSeriesSpec<D>): spec is LineSeriesSpec<D> {
   return spec.seriesType === SeriesType.Line;
 }
 
 /** @internal */
-export function isAreaSeriesSpec(spec: BasicSeriesSpec): spec is AreaSeriesSpec {
+export function isAreaSeriesSpec<D extends BaseDatum>(spec: BasicSeriesSpec<D>): spec is AreaSeriesSpec<D> {
   return spec.seriesType === SeriesType.Area;
 }
diff --git a/packages/charts/src/components/__snapshots__/chart.test.tsx.snap b/packages/charts/src/components/__snapshots__/chart.test.tsx.snap
index 85d2d80872..69c2ad65b4 100644
--- a/packages/charts/src/components/__snapshots__/chart.test.tsx.snap
+++ b/packages/charts/src/components/__snapshots__/chart.test.tsx.snap
@@ -55,12 +55,8 @@ exports[`Chart should render the legend name test 1`] = `
       <ErrorBoundary>
         <Connect(SpecsParserComponent)>
           <SpecsParserComponent specParsed={[Function (anonymous)]} specUnmounted={[Function (anonymous)]}>
-            <Connect(SpecInstance) debug={true} rendering=\\"svg\\" showLegend={true}>
-              <SpecInstance debug={true} rendering=\\"svg\\" showLegend={true} upsertSpec={[Function (anonymous)]} removeSpec={[Function (anonymous)]} id=\\"__global__settings___\\" chartType=\\"global\\" specType=\\"settings\\" rotation={0} animateData={true} resizeDebounce={10} tooltip={{...}} pointerUpdateTrigger=\\"x\\" externalPointerEvents={{...}} baseTheme={{...}} brushAxis=\\"x\\" minBrushDelta={2} ariaUseDefaultSummary={true} ariaLabelHeadingLevel=\\"p\\" allowBrushingLastHistogramBin={true} legendSize={NaN} showLegendExtra={false} legendMaxDepth={Infinity} legendPosition=\\"right\\" />
-            </Connect(SpecInstance)>
-            <Connect(SpecInstance) id=\\"test\\" data={{...}}>
-              <SpecInstance id=\\"test\\" data={{...}} upsertSpec={[Function (anonymous)]} removeSpec={[Function (anonymous)]} chartType=\\"xy_axis\\" specType=\\"series\\" seriesType=\\"bar\\" groupId=\\"__global__\\" xScaleType=\\"ordinal\\" yScaleType=\\"linear\\" xAccessor=\\"x\\" yAccessors={{...}} hideInLegend={false} enableHistogramMode={false} />
-            </Connect(SpecInstance)>
+            <Settings debug={true} rendering=\\"svg\\" showLegend={true} />
+            <BarSeries id=\\"test\\" data={{...}} xAccessor=\\"x\\" yAccessors={{...}} />
           </SpecsParserComponent>
         </Connect(SpecsParserComponent)>
         <div className=\\"echContainer\\">
diff --git a/packages/charts/src/components/accessibility/accessibility.test.tsx b/packages/charts/src/components/accessibility/accessibility.test.tsx
index 6e3e1f9d42..0eedeb9042 100644
--- a/packages/charts/src/components/accessibility/accessibility.test.tsx
+++ b/packages/charts/src/components/accessibility/accessibility.test.tsx
@@ -26,7 +26,7 @@ describe('Accessibility', () => {
       const wrapper = mount(
         <Chart size={[100, 100]} id="chart1">
           <Settings debug rendering="svg" showLegend />
-          <BarSeries id="test" data={[{ x: 0, y: 2 }]} />
+          <BarSeries id="test" data={[{ x: 0, y: 2 }]} xAccessor="x" yAccessors={['y']} />
         </Chart>,
       );
       expect(wrapper.find('dd').first().text()).toBe('bar chart');
@@ -35,8 +35,8 @@ describe('Accessibility', () => {
       const wrapper = mount(
         <Chart size={[100, 100]} id="chart1">
           <Settings debug rendering="svg" showLegend />
-          <BarSeries id="test" data={[{ x: 0, y: 2 }]} />
-          <LineSeries id="test2" data={[{ x: 3, y: 5 }]} />
+          <BarSeries id="test" data={[{ x: 0, y: 2 }]} xAccessor="x" yAccessors={['y']} />
+          <LineSeries id="test2" data={[{ x: 3, y: 5 }]} xAccessor="x" yAccessors={['y']} />
         </Chart>,
       );
       expect(wrapper.find('dd').first().text()).toBe('Mixed chart: bar and line chart');
diff --git a/packages/charts/src/components/chart.test.tsx b/packages/charts/src/components/chart.test.tsx
index c7f69b01c3..488a0a7bbd 100644
--- a/packages/charts/src/components/chart.test.tsx
+++ b/packages/charts/src/components/chart.test.tsx
@@ -12,6 +12,11 @@ import React from 'react';
 import { Settings, BarSeries } from '../specs';
 import { Chart } from './chart';
 
+interface Datum {
+  x: number;
+  y: number;
+}
+
 describe('Chart', () => {
   it("should render 'No data to display' without series", () => {
     const wrapper = mount(<Chart />);
@@ -31,17 +36,19 @@ describe('Chart', () => {
     const wrapper = mount(
       <Chart size={[100, 100]}>
         <Settings debug rendering="svg" />
-        <BarSeries id="test" data={[]} />
+        <BarSeries<Datum> id="test" data={[]} xAccessor="x" yAccessors={['y']} />
       </Chart>,
     );
     expect(wrapper.text()).toContain('No data to display');
   });
 
   it('should render the legend name test', () => {
+    // This is snapshot has a slight diff between local and ci runs, need to investigate
+    // See https://github.com/elastic/elastic-charts/runs/4706561347?check_suite_focus=true
     const wrapper = mount(
       <Chart size={[100, 100]} id="chart1">
         <Settings debug rendering="svg" showLegend />
-        <BarSeries id="test" data={[{ x: 0, y: 2 }]} />
+        <BarSeries id="test" data={[{ x: 0, y: 2 }]} xAccessor="x" yAccessors={['y']} />
       </Chart>,
     );
     expect(wrapper.debug()).toMatchSnapshot();
diff --git a/packages/charts/src/components/error_boundary/error_boundary.tsx b/packages/charts/src/components/error_boundary/error_boundary.tsx
index 47af7014c8..4284c53e9a 100644
--- a/packages/charts/src/components/error_boundary/error_boundary.tsx
+++ b/packages/charts/src/components/error_boundary/error_boundary.tsx
@@ -8,13 +8,13 @@
 
 import React, { Component, ReactNode } from 'react';
 
-import { SettingsSpecProps } from '../../specs';
+import { SettingsSpec } from '../../specs/settings';
 import { NoResults } from '../no_results';
 import { isGracefulError } from './errors';
 
 type ErrorBoundaryProps = {
   children: ReactNode;
-  renderFn?: SettingsSpecProps['noResults'];
+  renderFn?: SettingsSpec['noResults'];
 };
 
 interface ErrorBoundaryState {
diff --git a/packages/charts/src/components/legend/legend.test.tsx b/packages/charts/src/components/legend/legend.test.tsx
index 4143dab187..656b5c588e 100644
--- a/packages/charts/src/components/legend/legend.test.tsx
+++ b/packages/charts/src/components/legend/legend.test.tsx
@@ -284,7 +284,14 @@ describe('Legend', () => {
       const wrapper = mount(
         <Chart>
           <Settings showLegend showLegendExtra onLegendItemClick={onLegendItemClick} />
-          <BarSeries id="areas" xScaleType={ScaleType.Linear} yScaleType={ScaleType.Linear} data={data} />
+          <BarSeries
+            id="areas"
+            xScaleType={ScaleType.Linear}
+            yScaleType={ScaleType.Linear}
+            data={data}
+            xAccessor="x"
+            yAccessors={['y']}
+          />
         </Chart>,
       );
       const legendItems = wrapper.find(LegendListItem);
diff --git a/packages/charts/src/components/no_results.tsx b/packages/charts/src/components/no_results.tsx
index a8987dc7ed..be217c0da1 100644
--- a/packages/charts/src/components/no_results.tsx
+++ b/packages/charts/src/components/no_results.tsx
@@ -8,10 +8,10 @@
 
 import React, { FC, Suspense } from 'react';
 
-import { SettingsSpecProps } from '../specs';
+import { SettingsProps } from '../specs';
 
 interface NoResultsProps {
-  renderFn?: SettingsSpecProps['noResults'];
+  renderFn?: SettingsProps['noResults'];
 }
 
 /** @internal */
diff --git a/packages/charts/src/index.ts b/packages/charts/src/index.ts
index fe9cc86bdd..faa71afc1f 100644
--- a/packages/charts/src/index.ts
+++ b/packages/charts/src/index.ts
@@ -43,9 +43,9 @@ export {
 export { GeometryValue, BandedAccessorType } from './utils/geometry';
 export { LegendPath, LegendPathElement } from './state/actions/legend';
 export { CategoryKey } from './common/category';
+export { Layer as PartitionLayer, PartitionProps } from './chart_types/partition_chart/specs/index';
 export { FillLabelConfig as PartitionFillLabel, PartitionStyle } from './utils/themes/partition';
 export { PartitionLayout } from './chart_types/partition_chart/layout/types/config_types';
-export { Layer as PartitionLayer } from './chart_types/partition_chart/specs/index';
 export * from './chart_types/goal_chart/specs/index';
 export * from './chart_types/wordcloud/specs/index';
 
@@ -82,7 +82,7 @@ export { AnimKeyframe } from './chart_types/partition_chart/layout/types/config_
 
 // heatmap
 export { Cell } from './chart_types/heatmap/layout/types/viewmodel_types';
-export { ColorBand, HeatmapBandsColorScale } from './chart_types/heatmap/specs/heatmap';
+export { ColorBand, HeatmapBandsColorScale, HeatmapProps } from './chart_types/heatmap/specs/heatmap';
 
 // utilities
 export {
diff --git a/packages/charts/src/specs/constants.ts b/packages/charts/src/specs/constants.ts
index eb10f5e4fe..aad1d180e4 100644
--- a/packages/charts/src/specs/constants.ts
+++ b/packages/charts/src/specs/constants.ts
@@ -10,6 +10,7 @@ import { $Values } from 'utility-types';
 
 import { ChartType } from '../chart_types';
 import { BOTTOM, CENTER, LEFT, MIDDLE, RIGHT, TOP } from '../common/constants';
+import { buildSFProps } from '../state/spec_factory';
 import { Position } from '../utils/common';
 import { LIGHT_THEME } from '../utils/themes/light_theme';
 import { SettingsSpec } from './settings';
@@ -161,27 +162,37 @@ export const DEFAULT_TOOLTIP_CONFIG = {
 };
 
 /** @public */
-export const DEFAULT_SETTINGS_SPEC: SettingsSpec = {
-  id: '__global__settings___',
-  chartType: ChartType.Global,
-  specType: SpecType.Settings,
-  rendering: 'canvas' as const,
-  rotation: 0 as const,
-  animateData: true,
-  resizeDebounce: 10,
-  debug: false,
-  tooltip: DEFAULT_TOOLTIP_CONFIG,
-  pointerUpdateTrigger: PointerUpdateTrigger.X,
-  externalPointerEvents: {
-    tooltip: {
-      visible: false,
+export const settingsBuildProps = buildSFProps<SettingsSpec>()(
+  {
+    id: '__global__settings___' as const,
+    chartType: ChartType.Global,
+    specType: SpecType.Settings,
+  },
+  {
+    rendering: 'canvas' as const,
+    rotation: 0 as const,
+    animateData: true,
+    resizeDebounce: 10,
+    debug: false,
+    tooltip: DEFAULT_TOOLTIP_CONFIG,
+    pointerUpdateTrigger: PointerUpdateTrigger.X,
+    externalPointerEvents: {
+      tooltip: {
+        visible: false,
+      },
     },
+    baseTheme: LIGHT_THEME,
+    brushAxis: BrushAxis.X,
+    minBrushDelta: 2,
+    ariaUseDefaultSummary: true,
+    ariaLabelHeadingLevel: 'p',
+    allowBrushingLastHistogramBin: true,
+    ...DEFAULT_LEGEND_CONFIG,
   },
-  baseTheme: LIGHT_THEME,
-  brushAxis: BrushAxis.X,
-  minBrushDelta: 2,
-  ariaUseDefaultSummary: true,
-  ariaLabelHeadingLevel: 'p',
-  allowBrushingLastHistogramBin: true,
-  ...DEFAULT_LEGEND_CONFIG,
+);
+
+/** @public */
+export const DEFAULT_SETTINGS_SPEC: SettingsSpec = {
+  ...settingsBuildProps.defaults,
+  ...settingsBuildProps.overrides,
 };
diff --git a/packages/charts/src/specs/group_by.ts b/packages/charts/src/specs/group_by.ts
index 8a72f3dd32..71ddbbca02 100644
--- a/packages/charts/src/specs/group_by.ts
+++ b/packages/charts/src/specs/group_by.ts
@@ -6,16 +6,17 @@
  * Side Public License, v 1.
  */
 
-import React from 'react';
+import { ComponentProps } from 'react';
 
-import { Spec } from '.';
+import { BaseDatum, Spec } from '.';
 import { ChartType } from '../chart_types';
 import { Predicate } from '../common/predicate';
-import { getConnect, specComponentFactory } from '../state/spec_factory';
+import { buildSFProps, SFProps, useSpecFactory } from '../state/spec_factory';
+import { Datum, stripUndefined } from '../utils/common';
 import { SpecType } from './constants';
 
 /** @public */
-export type GroupByAccessor = (spec: Spec, datum: any) => string | number;
+export type GroupByAccessor<D extends BaseDatum = any> = (spec: Spec, datum: D) => string | number;
 /** @alpha */
 export type GroupBySort = Predicate;
 
@@ -23,14 +24,14 @@ export type GroupBySort = Predicate;
  * Title formatter that handles any value returned from the GroupByAccessor
  * @public
  */
-export type GroupByFormatter = (value: ReturnType<GroupByAccessor>) => string;
+export type GroupByFormatter<D extends BaseDatum = any> = (value: ReturnType<GroupByAccessor<D>>) => string;
 
 /** @alpha */
-export interface GroupBySpec extends Spec {
+export interface GroupBySpec<D extends BaseDatum = any> extends Spec {
   /**
    * Function to return a unique value __by__ which to group the data
    */
-  by: GroupByAccessor;
+  by: GroupByAccessor<D>;
   /**
    * Sort predicate used to sort grouped data
    */
@@ -40,19 +41,34 @@ export interface GroupBySpec extends Spec {
    *
    * Only for displayed values, not used in sorting or other internal computations.
    */
-  format?: GroupByFormatter;
+  format?: GroupByFormatter<D>;
 }
-const DEFAULT_GROUP_BY_PROPS = {
-  chartType: ChartType.Global,
-  specType: SpecType.IndexOrder,
-};
 
-type DefaultGroupByProps = 'chartType' | 'specType';
+const buildProps = buildSFProps<GroupBySpec>()(
+  {
+    chartType: ChartType.Global,
+    specType: SpecType.IndexOrder,
+  },
+  {},
+);
 
-/** @alpha */
-export type GroupByProps = Pick<GroupBySpec, 'id' | 'by' | 'sort' | 'format'>;
+/**
+ * Add GroupBy spec to chart
+ * @public
+ */
+export const GroupBy = function <D extends BaseDatum = Datum>(
+  props: SFProps<
+    GroupBySpec<D>,
+    keyof typeof buildProps['overrides'],
+    keyof typeof buildProps['defaults'],
+    keyof typeof buildProps['optionals'],
+    keyof typeof buildProps['requires']
+  >,
+) {
+  const { defaults, overrides } = buildProps;
+  useSpecFactory<GroupBySpec<D>>({ ...defaults, ...stripUndefined(props), ...overrides });
+  return null;
+};
 
-/** @alpha */
-export const GroupBy: React.FunctionComponent<GroupByProps> = getConnect()(
-  specComponentFactory<GroupBySpec, DefaultGroupByProps>(DEFAULT_GROUP_BY_PROPS),
-);
+/** @public */
+export type GroupByProps = ComponentProps<typeof GroupBy>;
diff --git a/packages/charts/src/specs/settings.tsx b/packages/charts/src/specs/settings.tsx
index dd16e1af8c..d5161f3145 100644
--- a/packages/charts/src/specs/settings.tsx
+++ b/packages/charts/src/specs/settings.tsx
@@ -6,13 +6,13 @@
  * Side Public License, v 1.
  */
 
-import React, { ComponentType, ReactChild } from 'react';
+import { ComponentProps, ComponentType, ReactChild } from 'react';
 
 import { CustomXDomain, GroupByAccessor, Spec, TooltipStickTo } from '.';
 import { Cell } from '../chart_types/heatmap/layout/types/viewmodel_types';
 import { PrimitiveValue } from '../chart_types/partition_chart/layout/utils/group_by_rollup';
 import { LegendStrategy } from '../chart_types/partition_chart/layout/utils/highlighted_geoms';
-import { LineAnnotationDatum, RectAnnotationDatum } from '../chart_types/specs';
+import { BaseDatum, LineAnnotationDatum, RectAnnotationDatum } from '../chart_types/specs';
 import { WordModel } from '../chart_types/wordcloud/layout/types/viewmodel_types';
 import { XYChartSeriesIdentifier } from '../chart_types/xy_chart/utils/series';
 import { Color } from '../common/colors';
@@ -21,15 +21,17 @@ import { TooltipPortalSettings } from '../components';
 import { CustomTooltip } from '../components/tooltip/types';
 import { ScaleContinuousType, ScaleOrdinalType } from '../scales';
 import { LegendPath } from '../state/actions/legend';
-import { getConnect, specComponentFactory } from '../state/spec_factory';
+import { SFProps, useSpecFactory } from '../state/spec_factory';
 import { Accessor } from '../utils/accessor';
 import {
+  Datum,
   HorizontalAlignment,
   LayoutDirection,
   Position,
   Rendering,
   Rotation,
   VerticalAlignment,
+  stripUndefined,
 } from '../utils/common';
 import { GeometryValue } from '../utils/geometry';
 import { GroupId, SpecId } from '../utils/ids';
@@ -38,12 +40,12 @@ import { PartialTheme, Theme } from '../utils/themes/theme';
 import {
   BinAgg,
   BrushAxis,
-  DEFAULT_SETTINGS_SPEC,
   DEFAULT_TOOLTIP_CONFIG,
   Direction,
   PointerEventType,
   PointerUpdateTrigger,
   TooltipType,
+  settingsBuildProps,
 } from './constants';
 
 /** @public */
@@ -174,7 +176,7 @@ export type BasicListener = () => undefined | void;
 /** @public */
 export type RectAnnotationEvent = { id: SpecId; datum: RectAnnotationDatum };
 /** @public */
-export type LineAnnotationEvent = { id: SpecId; datum: LineAnnotationDatum };
+export type LineAnnotationEvent = { id: SpecId; datum: LineAnnotationDatum<any> };
 /** @public */
 export type AnnotationClickListener = (annotations: {
   rects: RectAnnotationEvent[];
@@ -215,7 +217,7 @@ export type PointerEvent = PointerOverEvent | PointerOutEvent;
  * This interface describe the properties of single value shown in the tooltip
  * @public
  */
-export interface TooltipValue {
+export interface TooltipValue<D extends BaseDatum = Datum> {
   /**
    * The label of the tooltip value
    */
@@ -255,13 +257,13 @@ export interface TooltipValue {
   /**
    * The accessor linked to the current tooltip value
    */
-  valueAccessor?: Accessor;
+  valueAccessor?: Accessor<D>;
 
   /**
    * The datum associated with the current tooltip value
    * Maybe not available
    */
-  datum?: unknown;
+  datum?: D;
 }
 
 /**
@@ -678,40 +680,26 @@ export interface OrderBy {
   direction?: Direction;
 }
 
-/** @public */
-export type DefaultSettingsProps =
-  | 'id'
-  | 'chartType'
-  | 'specType'
-  | 'rendering'
-  | 'rotation'
-  | 'resizeDebounce'
-  | 'pointerUpdateDebounce'
-  | 'pointerUpdateTrigger'
-  | 'animateData'
-  | 'debug'
-  | 'tooltip'
-  | 'theme'
-  | 'brushAxis'
-  | 'minBrushDelta'
-  | 'externalPointerEvents'
-  | 'showLegend'
-  | 'showLegendExtra'
-  | 'legendPosition'
-  | 'legendMaxDepth'
-  | 'legendSize'
-  | 'ariaUseDefaultSummary'
-  | 'ariaLabelHeadingLevel'
-  | 'ariaTableCaption'
-  | 'allowBrushingLastHistogramBin';
-
-/** @public */
-export type SettingsSpecProps = Partial<Omit<SettingsSpec, 'chartType' | 'specType' | 'id'>>;
+/**
+ * Adds settings spec to chart specs
+ * @public
+ */
+export const Settings = function (
+  props: SFProps<
+    SettingsSpec,
+    keyof typeof settingsBuildProps['overrides'],
+    keyof typeof settingsBuildProps['defaults'],
+    keyof typeof settingsBuildProps['optionals'],
+    keyof typeof settingsBuildProps['requires']
+  >,
+) {
+  const { defaults, overrides } = settingsBuildProps;
+  useSpecFactory<SettingsSpec>({ ...defaults, ...stripUndefined(props), ...overrides });
+  return null;
+};
 
 /** @public */
-export const Settings: React.FunctionComponent<SettingsSpecProps> = getConnect()(
-  specComponentFactory<SettingsSpec, DefaultSettingsProps>(DEFAULT_SETTINGS_SPEC),
-);
+export type SettingsProps = ComponentProps<typeof Settings>;
 
 /** @internal */
 export function isPointerOutEvent(event: PointerEvent | null | undefined): event is PointerOutEvent {
diff --git a/packages/charts/src/specs/small_multiples.ts b/packages/charts/src/specs/small_multiples.ts
index 91433c12c0..8a011f8484 100644
--- a/packages/charts/src/specs/small_multiples.ts
+++ b/packages/charts/src/specs/small_multiples.ts
@@ -6,12 +6,12 @@
  * Side Public License, v 1.
  */
 
-import React from 'react';
+import { ComponentProps } from 'react';
 
 import { Spec } from '.';
 import { ChartType } from '../chart_types';
 import { Ratio } from '../common/geometry';
-import { getConnect, specComponentFactory } from '../state/spec_factory';
+import { specComponentFactory } from '../state/spec_factory';
 import { SpecType } from './constants';
 
 /**
@@ -70,16 +70,19 @@ export interface SmallMultiplesSpec extends Spec {
   style?: Partial<SmallMultiplesStyle>;
 }
 
-const DEFAULT_SMALL_MULTIPLES_PROPS = {
-  id: '__global__small_multiples___',
-  chartType: ChartType.Global,
-  specType: SpecType.SmallMultiples,
-};
-
-/** @alpha */
-export type SmallMultiplesProps = Partial<Omit<SmallMultiplesSpec, 'chatType' | 'specType'>>;
-
-/** @alpha */
-export const SmallMultiples: React.FunctionComponent<SmallMultiplesProps> = getConnect()(
-  specComponentFactory<SmallMultiplesSpec, 'id'>(DEFAULT_SMALL_MULTIPLES_PROPS),
+/**
+ * Add small multiples spec to chart
+ * @alpha
+ */
+export const SmallMultiples = specComponentFactory<SmallMultiplesSpec>()(
+  {
+    chartType: ChartType.Global,
+    specType: SpecType.SmallMultiples,
+  },
+  {
+    id: '__global__small_multiples___',
+  },
 );
+
+/** @public */
+export type SmallMultiplesProps = ComponentProps<typeof SmallMultiples>;
diff --git a/packages/charts/src/state/spec_factory.ts b/packages/charts/src/state/spec_factory.ts
index b65f89e241..c4021bff18 100644
--- a/packages/charts/src/state/spec_factory.ts
+++ b/packages/charts/src/state/spec_factory.ts
@@ -6,59 +6,162 @@
  * Side Public License, v 1.
  */
 
-import { useEffect } from 'react';
-import { connect } from 'react-redux';
-import { Dispatch, bindActionCreators } from 'redux';
+import { FC, useEffect, useMemo } from 'react';
+import { useDispatch } from 'react-redux';
+import { bindActionCreators } from 'redux';
+import { OptionalKeys, RequiredKeys } from 'utility-types';
 
-import { Spec } from '../specs';
-import { upsertSpec, removeSpec } from './actions/specs';
+import { Spec as Spec } from '../specs';
+import { stripUndefined } from '../utils/common';
+import { upsertSpec as upsertSpecAction, removeSpec as removeSpecAction } from './actions/specs';
 
 /** @internal */
 export interface DispatchProps {
-  upsertSpec: (spec: Spec) => void;
-  removeSpec: (id: string) => void;
+  upsertSpec: typeof upsertSpecAction;
+  removeSpec: typeof removeSpecAction;
 }
 
-/** @internal */
-export function specComponentFactory<U extends Spec, D extends keyof U>(
-  defaultProps: Pick<U, D | 'chartType' | 'specType'>,
-) {
-  /* eslint-disable no-shadow, react-hooks/exhaustive-deps, unicorn/consistent-function-scoping */
-  const SpecInstance = (props: U & DispatchProps) => {
-    const { removeSpec, upsertSpec, ...SpecInstance } = props;
-    useEffect(() => {
-      upsertSpec(SpecInstance);
-    });
-    useEffect(
-      () => () => {
-        removeSpec(props.id);
-      },
-      [],
-    );
-    return null;
-  };
-  /* eslint-enable */
-  SpecInstance.defaultProps = defaultProps;
-  return SpecInstance;
-}
+/**
+ * Used inside custom spec component to link component to state as new spec
+ * @internal
+ */
+export function useSpecFactory<Props extends Spec>(props: Props) {
+  const dispatch = useDispatch();
+  const { upsertSpec, removeSpec } = useMemo(
+    () => ({
+      upsertSpec: bindActionCreators(upsertSpecAction, dispatch),
+      removeSpec: bindActionCreators(removeSpecAction, dispatch),
+    }),
+    [dispatch],
+  );
 
-const mapDispatchToProps = (dispatch: Dispatch): DispatchProps =>
-  bindActionCreators(
-    {
-      upsertSpec,
-      removeSpec,
+  useEffect(() => {
+    upsertSpec(props);
+  });
+  useEffect(
+    () => () => {
+      removeSpec(props.id);
     },
-    dispatch,
+    [], // eslint-disable-line react-hooks/exhaustive-deps
   );
+}
 
-/** @internal */
-export function getConnect() {
-  /**
-   * Redux assumes shallowEqual for all connected components
-   *
-   * This causes an issue where the specs are cleared and memoized spec components will never be
-   * re-rendered and thus never re-upserted to the state. Setting pure to false solves this issue
-   * and doesn't cause traditional performance degradations.
-   */
-  return connect(null, mapDispatchToProps, null, { pure: false });
+/**
+ * Creates spec component factory given overrides and default props.
+ *
+ * To use this you must pass the Spec type via empty function call...
+ *
+ * ```ts
+ * const MyThing = specComponentFactory<MyThingSpec>()(overrides, defaults)
+ * ```
+ *
+ * > IMPORTANT: Both `overrides` and `defaults` should __NOT__ have explicit types.
+ * > The types are determined automatically from thier implicitly defined types, while still
+ * > enforing that the types are derived from the defined `Spec`.
+ * @internal
+ */
+export const specComponentFactory = <S extends Spec>() => <
+  Overrides extends SFOverrideKeys<S>,
+  Defaults extends SFDefaultKeys<S, Overrides>,
+  Optionals extends SFOptionalKeys<S, Overrides, Defaults>,
+  Requires extends SFRequiredKeys<S, Overrides, Defaults, Optionals>
+>(
+  overrides: SFOverrides<S, Overrides>,
+  defaults: SFDefaults<S, Overrides, Defaults>,
+): FC<SFProps<S, Overrides, Defaults, Optionals, Requires>> => {
+  return (props) => {
+    // @ts-ignore - All Spec keys are guaranteed to be included
+    useSpecFactory<S>({ ...defaults, ...stripUndefined(props), ...overrides });
+    return null;
+  };
+};
+
+/**
+ * Takes in prop overrides and defaults with enforced types.
+ * Determines implicit types of optional and required props.
+ *
+ * To use this you must pass the Spec type via empty function call...
+ *
+ * ```ts
+ * const MyThingBuildProps = buildSFProps<MyThingSpec>()(overrides, defaults)
+ * ```
+ *
+ * > IMPORTANT: Both `overrides` and `defaults` should __NOT__ have explicit types.
+ * > The types are determined automatically from thier implicitly defined types, while still
+ * > enforing that the types are derived from the defined `Spec`.
+ * @internal
+ */
+export const buildSFProps = <S extends Spec>() => <
+  Overrides extends SFOverrideKeys<S>,
+  Defaults extends SFDefaultKeys<S, Overrides>,
+  Optionals extends SFOptionalKeys<S, Overrides, Defaults>,
+  Requires extends SFRequiredKeys<S, Overrides, Defaults, Optionals>
+>(
+  overrides: SFOverrides<S, Overrides>,
+  defaults: SFDefaults<S, Overrides, Defaults>,
+): BuildProps<S, Overrides, Defaults, Optionals, Requires> => ({
+  overrides,
+  defaults,
+  optionals: {} as Pick<S, Optionals>, // used to transfer type only
+  requires: {} as Pick<S, Requires>, // used to transfer type only
+});
+
+/*
+------------------------------------------------------------
+  Reused types to maintain single source of truth
+------------------------------------------------------------
+*/
+
+/**
+ * Resulting props for spec given overrides, defaults, optionals and required props
+ * @public
+ */
+export type SFProps<
+  S extends Spec,
+  Overrides extends SFOverrideKeys<S>,
+  Defaults extends SFDefaultKeys<S, Overrides>,
+  Optionals extends SFOptionalKeys<S, Overrides, Defaults>,
+  Requires extends SFRequiredKeys<S, Overrides, Defaults, Optionals>
+> = Pick<S, Optionals | Requires> & Partial<Pick<S, Defaults>>;
+
+/** @public */
+export interface BuildProps<
+  S extends Spec,
+  Overrides extends SFOverrideKeys<S>,
+  Defaults extends SFDefaultKeys<S, Overrides>,
+  Optionals extends SFOptionalKeys<S, Overrides, Defaults>,
+  Requires extends SFRequiredKeys<S, Overrides, Defaults, Optionals>
+> {
+  overrides: SFOverrides<S, Overrides>;
+  defaults: SFDefaults<S, Overrides, Defaults>;
+  /** @deprecated typing only do not use as value */
+  optionals: Pick<S, Optionals>;
+  /** @deprecated typing only do not use as value */
+  requires: Pick<S, Requires>;
 }
+
+/** All specs __must__ provide these as overrides */
+type RequiredSpecProps = keyof Pick<Spec, 'chartType' | 'specType'>;
+
+/* Types defining keys */
+type SFOverrideKeys<S extends Spec> = keyof S;
+type SFDefaultKeys<S extends Spec, Overrides extends keyof S> = keyof Omit<S, Overrides>;
+type SFOptionalKeys<
+  S extends Spec,
+  Overrides extends keyof S,
+  Defaults extends keyof Omit<S, Overrides>
+> = OptionalKeys<Omit<S, Overrides | Defaults>>;
+type SFRequiredKeys<
+  S extends Spec,
+  Overrides extends keyof S,
+  Defaults extends keyof Omit<S, Overrides>,
+  Optionals extends SFOptionalKeys<S, Overrides, Defaults>
+> = RequiredKeys<Omit<S, Overrides | Defaults | Optionals>>;
+
+/* Object types defined from key types above */
+type SFOverrides<S extends Spec, Overrides extends keyof S> = Required<Pick<S, Overrides | RequiredSpecProps>>;
+type SFDefaults<
+  S extends Spec,
+  Overrides extends SFOverrideKeys<S>,
+  Defaults extends SFDefaultKeys<S, Overrides>
+> = Required<Pick<S, Defaults>>;
diff --git a/packages/charts/src/utils/accessor.ts b/packages/charts/src/utils/accessor.ts
index ecb8b617f0..f57b179ce7 100644
--- a/packages/charts/src/utils/accessor.ts
+++ b/packages/charts/src/utils/accessor.ts
@@ -6,19 +6,19 @@
  * Side Public License, v 1.
  */
 
-import { Datum } from './common';
+import { BaseDatum } from '../chart_types/specs';
 
 /**
  * Accessor function
  * @param datum - the datum
  * @public
  */
-export interface UnaryAccessorFn<Return = any> {
+export interface UnaryAccessorFn<D extends BaseDatum = any, Return = any> {
   /**
    * Name used as accessor field name in place of function reference
    */
   fieldName?: string;
-  (datum: Datum): Return;
+  (datum: D): Return;
 }
 
 /**
@@ -27,19 +27,21 @@ export interface UnaryAccessorFn<Return = any> {
  * @param index - the index in the array
  * @public
  */
-export type BinaryAccessorFn<Return = any> = (datum: Datum, index: number) => Return;
+export type BinaryAccessorFn<D extends BaseDatum = any, Return = any> = (datum: D, index: number) => Return;
 
 /**
  * An accessor function
  * @public
  */
-export type AccessorFn = UnaryAccessorFn;
+export type AccessorFn<D extends BaseDatum = any, Return = any> = UnaryAccessorFn<D, Return>;
 
 /**
  * An indexed accessor function
  * @public
  */
-export type IndexedAccessorFn = UnaryAccessorFn | BinaryAccessorFn;
+export type IndexedAccessorFn<D extends BaseDatum = any, Return = any> =
+  | UnaryAccessorFn<D, Return>
+  | BinaryAccessorFn<D, Return>;
 
 /**
  * A key accessor string
@@ -53,11 +55,22 @@ export type AccessorObjectKey = string;
  */
 export type AccessorArrayIndex = number;
 
+/**
+ * Need to check for array to exclude array prototype keys.
+ *
+ * TODO: tighten keyof types by removing string fallback. This will make it harder to satisfy the
+ * types for complex data values.
+ *
+ * Note: ignores symbols as keys
+ * @public
+ */
+export type DatumKey<D extends BaseDatum> = D extends any[] ? number : Exclude<keyof D, symbol> | string;
+
 /**
  * A datum accessor in form of object key accessor string/number
  * @public
  */
-export type Accessor = AccessorObjectKey | AccessorArrayIndex;
+export type Accessor<D extends BaseDatum = never> = DatumKey<D> | AccessorObjectKey | AccessorArrayIndex;
 
 /**
  * Accessor format for _banded_ series as postfix string or accessor function
@@ -70,8 +83,8 @@ export type AccessorFormat = string | ((value: string) => string);
  * @param accessor the spec accessor
  * @internal
  */
-export function getAccessorFn(accessor: Accessor): AccessorFn {
-  return (datum: Datum) =>
+export function getAccessorFn<D extends BaseDatum>(accessor: Accessor<D>): AccessorFn<D> {
+  return (datum: D) =>
     typeof datum === 'object' && datum !== null ? datum[accessor as keyof typeof datum] : undefined;
 }
 
@@ -91,12 +104,17 @@ export function getAccessorFormatLabel(accessor: AccessorFormat, label: string):
  * Helper function to get accessor value from string, number or function
  * @internal
  */
-export function getAccessorValue(datum: Datum, accessor: Accessor | AccessorFn) {
+export function getAccessorValue<D extends BaseDatum>(datum: D, accessor: Accessor<D> | AccessorFn<D>) {
   if (typeof accessor === 'function') {
     return accessor(datum);
   }
 
-  return datum[accessor];
+  try {
+    // @ts-ignore - could throw error if not proper key accessed
+    return datum[accessor];
+  } catch {
+    return undefined;
+  }
 }
 
 /**
diff --git a/packages/charts/src/utils/common.ts b/packages/charts/src/utils/common.ts
index 00c4b9d1f7..3f64e3073e 100644
--- a/packages/charts/src/utils/common.ts
+++ b/packages/charts/src/utils/common.ts
@@ -13,6 +13,7 @@ import { v1 as uuidV1 } from 'uuid';
 import { PrimitiveValue } from '../chart_types/partition_chart/layout/utils/group_by_rollup';
 import { Color, Colors } from '../common/colors';
 import { Degrees, Radian } from '../common/geometry';
+import { BaseDatum } from '../specs';
 import { AdditiveNumber } from './accessor';
 import { Point } from './point';
 
@@ -426,7 +427,7 @@ export function mergePartial<T>(
 /** @public */
 export type ValueFormatter = (value: number) => string;
 /** @public */
-export type ValueAccessor = (d: Datum) => AdditiveNumber;
+export type ValueAccessor<D extends BaseDatum = Datum> = (d: D) => AdditiveNumber;
 /** @public */
 export type LabelAccessor<T = PrimitiveValue> = (value: T) => string;
 /** @public */
@@ -626,3 +627,18 @@ export function getOppositeAlignment<A extends HorizontalAlignment | VerticalAli
 export function isFiniteNumber(value: unknown): value is number {
   return Number.isFinite(value);
 }
+
+/**
+ * Strips all undefined properties from object
+ * @internal
+ */
+export function stripUndefined<R extends Record<string, unknown>>(source: R): R {
+  return Object.keys(source).reduce((acc, key) => {
+    const val = source[key];
+    if (val !== undefined) {
+      // @ts-ignore - building new R from {}
+      acc[key] = val;
+    }
+    return acc;
+  }, {} as R);
+}
diff --git a/storybook/stories/annotations/lines/8_advanced_markers.story.tsx b/storybook/stories/annotations/lines/8_advanced_markers.story.tsx
index 6aa942962a..6bc6d192c1 100644
--- a/storybook/stories/annotations/lines/8_advanced_markers.story.tsx
+++ b/storybook/stories/annotations/lines/8_advanced_markers.story.tsx
@@ -134,6 +134,8 @@ export const Example = () => {
       <HistogramBarSeries
         id="bars"
         xScaleType={ScaleType.Time}
+        xAccessor="x"
+        yAccessors={['y']}
         data={Array.from({ length: maxMetric })
           .fill(0)
           .map((_, i) => ({ x: start.clone().add(i, 'd').valueOf(), y: maxMetric }))}
diff --git a/storybook/stories/annotations/rects/6_zero_domain.story.tsx b/storybook/stories/annotations/rects/6_zero_domain.story.tsx
index c7279d7464..e3ccb66e19 100644
--- a/storybook/stories/annotations/rects/6_zero_domain.story.tsx
+++ b/storybook/stories/annotations/rects/6_zero_domain.story.tsx
@@ -52,6 +52,8 @@ export const Example = () => {
       />
       <BarSeries
         id="bars"
+        xAccessor="x"
+        yAccessors={['y']}
         xScaleType={ScaleType.Linear}
         yScaleType={ScaleType.Linear}
         data={[
diff --git a/storybook/stories/bar/24_tooltip_visibility.story.tsx b/storybook/stories/bar/24_tooltip_visibility.story.tsx
index 6657257be1..6145573644 100644
--- a/storybook/stories/bar/24_tooltip_visibility.story.tsx
+++ b/storybook/stories/bar/24_tooltip_visibility.story.tsx
@@ -27,7 +27,7 @@ export const Example = () => {
         yScaleType={ScaleType.Linear}
         xAccessor="x"
         yAccessors={['y1', 'y2']}
-        splitSeriesAccessors={['g1', 'g2', 'g3']}
+        splitSeriesAccessors={['g1', 'g2']}
         data={TestDatasets.BARCHART_2Y2G}
         filterSeriesInTooltip={isVisibleFunction}
       />
diff --git a/storybook/stories/bar/49_test_dual_axis.story.tsx b/storybook/stories/bar/49_test_dual_axis.story.tsx
index 53d0782ac9..dd35a4913a 100644
--- a/storybook/stories/bar/49_test_dual_axis.story.tsx
+++ b/storybook/stories/bar/49_test_dual_axis.story.tsx
@@ -56,6 +56,7 @@ export const Example = () => {
         groupId="2"
         xScaleType={ScaleType.Ordinal}
         xAccessor="x"
+        yAccessors={['y']}
         stackAccessors={stack13 ? ['y'] : undefined}
         data={[
           { x: 'trousers', y: 39 },
@@ -69,6 +70,7 @@ export const Example = () => {
         id="bars4"
         xScaleType={ScaleType.Ordinal}
         xAccessor="x"
+        yAccessors={['y']}
         stackAccessors={stack24 ? ['y'] : undefined}
         data={[
           { x: 'trousers', y: 39 },
diff --git a/storybook/stories/bar/58_data_values.story.tsx b/storybook/stories/bar/58_data_values.story.tsx
index 3bb1c4231a..bd815f2100 100644
--- a/storybook/stories/bar/58_data_values.story.tsx
+++ b/storybook/stories/bar/58_data_values.story.tsx
@@ -53,6 +53,7 @@ export const Example = () => {
       <BarSeries
         id="bars"
         data={BARCHART_1Y0G_LINEAR}
+        xAccessor="x"
         yAccessors={['y']}
         xScaleType={ScaleType.Linear}
         displayValueSettings={{ showValueLabel: true }}
diff --git a/storybook/stories/debug/2_debug_state.story.tsx b/storybook/stories/debug/2_debug_state.story.tsx
index 04dab2a1c9..e570623129 100644
--- a/storybook/stories/debug/2_debug_state.story.tsx
+++ b/storybook/stories/debug/2_debug_state.story.tsx
@@ -59,6 +59,8 @@ export const Example = () => {
         <LineSeries
           id="lines"
           name={naming}
+          xAccessor="x"
+          yAccessors={['y']}
           xScaleType={ScaleType.Linear}
           yScaleType={ScaleType.Linear}
           splitSeriesAccessors={splitSeriesAccessors}
@@ -69,6 +71,8 @@ export const Example = () => {
         <AreaSeries
           id="areas"
           name={naming}
+          xAccessor="x"
+          yAccessors={['y']}
           xScaleType={ScaleType.Linear}
           yScaleType={ScaleType.Linear}
           data={areaData}
@@ -81,6 +85,8 @@ export const Example = () => {
         <BarSeries
           id="bars"
           name={naming}
+          xAccessor="x"
+          yAccessors={['y']}
           xScaleType={ScaleType.Linear}
           yScaleType={ScaleType.Linear}
           splitSeriesAccessors={splitSeriesAccessors}
diff --git a/storybook/stories/grids/1_basic.story.tsx b/storybook/stories/grids/1_basic.story.tsx
index 4191c1939d..ca428ab04a 100644
--- a/storybook/stories/grids/1_basic.story.tsx
+++ b/storybook/stories/grids/1_basic.story.tsx
@@ -154,7 +154,6 @@ export const Example = () => {
         xAccessor="x"
         yAccessors={['y']}
         stackAccessors={['x']}
-        splitSeriesAccessors={['g']}
         data={[
           { x: 0, y: 3 },
           { x: 1, y: 2 },
diff --git a/storybook/stories/grids/3_lines.story.tsx b/storybook/stories/grids/3_lines.story.tsx
index 71f1e93609..9fbe06a9c4 100644
--- a/storybook/stories/grids/3_lines.story.tsx
+++ b/storybook/stories/grids/3_lines.story.tsx
@@ -83,7 +83,14 @@ export const Example = () => {
       />
       <Axis {...getAxisKnobs(Position.Left)} />
       <Axis {...getAxisKnobs(Position.Bottom)} />
-      <LineSeries id="line" xScaleType={ScaleType.Linear} yScaleType={ScaleType.Linear} xAccessor="x" data={data} />
+      <LineSeries
+        id="line"
+        xScaleType={ScaleType.Linear}
+        yScaleType={ScaleType.Linear}
+        xAccessor="x"
+        yAccessors={['y']}
+        data={data}
+      />
     </Chart>
   );
 };
diff --git a/storybook/stories/legend/14_single_series.story.tsx b/storybook/stories/legend/14_single_series.story.tsx
index a4e872f3ee..cb2250244c 100644
--- a/storybook/stories/legend/14_single_series.story.tsx
+++ b/storybook/stories/legend/14_single_series.story.tsx
@@ -32,6 +32,8 @@ export const Example = () => {
       series.push(
         <BarSeries
           id={`bars${i}`}
+          xAccessor="x"
+          yAccessors={['y']}
           name={`Another long series name - ${i}`}
           xScaleType={ScaleType.Linear}
           yScaleType={ScaleType.Linear}
@@ -55,6 +57,8 @@ export const Example = () => {
       />
       <BarSeries
         id="bars0"
+        xAccessor="x"
+        yAccessors={['y']}
         name="Id elit mollit ut est laborum. Lorem laboris laboris laboris quis dolore incididunt eiusmod fugiat nulla culpa dolore exercitation dolore. Voluptate ipsum cillum cillum in ullamco elit eiusmod labore incididunt excepteur. Duis id laboris consequat aliqua officia non ex nisi commodo. Ut do do voluptate sunt sunt cupidatat ea ad."
         xScaleType={ScaleType.Linear}
         yScaleType={ScaleType.Linear}
diff --git a/storybook/stories/legend/1_legend_right.story.tsx b/storybook/stories/legend/1_legend_right.story.tsx
index c375211a62..18ab854c34 100644
--- a/storybook/stories/legend/1_legend_right.story.tsx
+++ b/storybook/stories/legend/1_legend_right.story.tsx
@@ -15,9 +15,6 @@ import { useBaseTheme } from '../../use_base_theme';
 import { getLegendSizeKnob } from './legend_size_knob';
 
 export const Example = () => {
-  const yAccessors = ['y1', 'y2'];
-  const splitSeriesAccessors = ['g1', 'g2'];
-
   return (
     <Chart>
       <Settings
@@ -35,8 +32,8 @@ export const Example = () => {
         xScaleType={ScaleType.Linear}
         yScaleType={ScaleType.Linear}
         xAccessor="x"
-        yAccessors={yAccessors}
-        splitSeriesAccessors={splitSeriesAccessors}
+        yAccessors={['y1', 'y2']}
+        splitSeriesAccessors={['g1', 'g2']}
         data={TestDatasets.BARCHART_2Y2G}
         hideInLegend={false}
       />
diff --git a/storybook/stories/legend/7_display_values.story.tsx b/storybook/stories/legend/7_display_values.story.tsx
index 4b4f9e93a4..d3d423d30b 100644
--- a/storybook/stories/legend/7_display_values.story.tsx
+++ b/storybook/stories/legend/7_display_values.story.tsx
@@ -32,7 +32,7 @@ export const Example = () => {
 
   const namesArray = arrayKnobs('series names (in sort order)', ['jpg', 'php', 'png', 'css', 'gif']);
 
-  const seriesComponents = tsvbSeries.map((series: any) => {
+  const seriesComponents = tsvbSeries.map((series) => {
     const nameIndex = namesArray.findIndex((name) => name === series.label);
     const sortIndex = nameIndex > -1 ? nameIndex : undefined;
 
diff --git a/storybook/stories/line/15_test_negative_points.story.tsx b/storybook/stories/line/15_test_negative_points.story.tsx
index eeb2d0958f..72bf5f81b8 100644
--- a/storybook/stories/line/15_test_negative_points.story.tsx
+++ b/storybook/stories/line/15_test_negative_points.story.tsx
@@ -38,7 +38,15 @@ export const Example = () => {
       <Settings baseTheme={useBaseTheme()} />
       <Axis id="y" position={Position.Left} />
       <Axis id="x" position={Position.Bottom} />
-      <LineSeries fit="linear" id="line" xScaleType={ScaleType.Time} yScaleType={yScaleType} data={data} />
+      <LineSeries
+        fit="linear"
+        id="line"
+        xAccessor="x"
+        yAccessors={['y']}
+        xScaleType={ScaleType.Time}
+        yScaleType={yScaleType}
+        data={data}
+      />
     </Chart>
   );
 };
diff --git a/storybook/stories/mixed/6_fitting.story.tsx b/storybook/stories/mixed/6_fitting.story.tsx
index 234e10c99e..1e16e4ef13 100644
--- a/storybook/stories/mixed/6_fitting.story.tsx
+++ b/storybook/stories/mixed/6_fitting.story.tsx
@@ -27,8 +27,13 @@ import { ColorVariant } from '../../../packages/charts/src/utils/common';
 import { AreaFitStyle, LineFitStyle, TextureShape } from '../../../packages/charts/src/utils/themes/theme';
 import { useBaseTheme } from '../../use_base_theme';
 
+interface MixedDatum {
+  x: number | string;
+  y: number | string | null;
+}
+
 export const Example = () => {
-  const dataTypes = {
+  const dataTypes: Record<string, MixedDatum[]> = {
     isolated: [
       { x: 0, y: 3 },
       { x: 1, y: 5 },
diff --git a/storybook/stories/scales/7_log_scale_options.story.tsx b/storybook/stories/scales/7_log_scale_options.story.tsx
index 52d92e4ce4..3d7eb5a0e4 100644
--- a/storybook/stories/scales/7_log_scale_options.story.tsx
+++ b/storybook/stories/scales/7_log_scale_options.story.tsx
@@ -140,6 +140,8 @@ export const Example = () => {
       <Series
         id="series"
         curve={curve}
+        xAccessor="x"
+        yAccessors={['y']}
         yScaleType={yLogKnobs.scaleType}
         xScaleType={xLogKnobs.scaleType}
         areaSeriesStyle={{ point: { visible: true } }}
diff --git a/storybook/stories/scales/8_linear_binary.story.tsx b/storybook/stories/scales/8_linear_binary.story.tsx
index 4b70fd0713..7ab8a2e111 100644
--- a/storybook/stories/scales/8_linear_binary.story.tsx
+++ b/storybook/stories/scales/8_linear_binary.story.tsx
@@ -49,6 +49,7 @@ export const Example = () => {
         yScaleType={yScaleType}
         data={data}
         yNice={yNice}
+        xAccessor="x"
         yAccessors={[yAccessor]}
       />
     </Chart>
diff --git a/storybook/stories/small_multiples/5_histogram_bars.story.tsx b/storybook/stories/small_multiples/5_histogram_bars.story.tsx
index 7d8b4cd141..4bad47a7c8 100644
--- a/storybook/stories/small_multiples/5_histogram_bars.story.tsx
+++ b/storybook/stories/small_multiples/5_histogram_bars.story.tsx
@@ -78,6 +78,8 @@ export const Example = () => {
         xScaleType={ScaleType.Linear}
         yScaleType={ScaleType.Linear}
         data={data}
+        xAccessor="x"
+        yAccessors={['y']}
         splitSeriesAccessors={['split']}
         color={(seriesIdentifier) => {
           return colorMap[seriesIdentifier.splitAccessors.get('split') ?? 'Default'];
diff --git a/storybook/stories/small_multiples/7_sunbursts.story.tsx b/storybook/stories/small_multiples/7_sunbursts.story.tsx
index da0bddc831..8c35a7ea49 100644
--- a/storybook/stories/small_multiples/7_sunbursts.story.tsx
+++ b/storybook/stories/small_multiples/7_sunbursts.story.tsx
@@ -111,7 +111,6 @@ export const Example = () => {
         sort={select('Panel order', { alphaAsc: 'alphaAsc', alphaDesc: 'alphaDesc' }, 'alphaAsc')}
       />
       <SmallMultiples
-        id="sm"
         splitHorizontally={layout === 'h' ? 'split' : undefined}
         splitVertically={layout === 'v' ? 'split' : undefined}
         splitZigzag={layout === 'z' ? 'split' : undefined}
@@ -151,8 +150,7 @@ export const Example = () => {
         data={data}
         layout={PartitionLayout.sunburst}
         valueAccessor={(d: Datum) => d.exportVal as number}
-        valueFormatter={(d: number) => `$${defaultPartitionValueFormatter(Math.round(d / 1000000000))}\u00A0Bn`}
-        smallMultiples="sm"
+        valueFormatter={(d) => `$${defaultPartitionValueFormatter(Math.round(d / 1000000000))}\u00A0Bn`}
         layers={[
           {
             groupByRollup: (d: Datum) => d.sitc1,
diff --git a/storybook/stories/stylings/23_with_texture.story.tsx b/storybook/stories/stylings/23_with_texture.story.tsx
index 6efc8991c0..5005ded5e5 100644
--- a/storybook/stories/stylings/23_with_texture.story.tsx
+++ b/storybook/stories/stylings/23_with_texture.story.tsx
@@ -112,6 +112,8 @@ export const Example = () => {
         color={seriesColor}
         xScaleType={ScaleType.Linear}
         yScaleType={ScaleType.Linear}
+        xAccessor="x"
+        yAccessors={['y']}
         data={seriesType === 'bar' ? barData : areaData}
         curve={CurveType.CURVE_MONOTONE_X}
       />
diff --git a/storybook/stories/stylings/24_texture_multiple_series.story.tsx b/storybook/stories/stylings/24_texture_multiple_series.story.tsx
index d5b828d7b0..9e6f6188f2 100644
--- a/storybook/stories/stylings/24_texture_multiple_series.story.tsx
+++ b/storybook/stories/stylings/24_texture_multiple_series.story.tsx
@@ -144,6 +144,8 @@ export const Example = () => {
               texture: getTexture(random),
             },
           }}
+          xAccessor="x"
+          yAccessors={['y']}
           color={chartColor}
           stackAccessors={['yes']}
           data={data[i]}
diff --git a/storybook/stories/stylings/25_mixed_point_shapes.story.tsx b/storybook/stories/stylings/25_mixed_point_shapes.story.tsx
index 8a31699ffd..b4742c52f7 100644
--- a/storybook/stories/stylings/25_mixed_point_shapes.story.tsx
+++ b/storybook/stories/stylings/25_mixed_point_shapes.story.tsx
@@ -60,6 +60,8 @@ export const Example = () => {
             fill: fillKnobArea,
           },
         }}
+        xAccessor="x"
+        yAccessors={['y']}
         xScaleType={ScaleType.Linear}
         yScaleType={ScaleType.Linear}
         data={[
@@ -79,6 +81,8 @@ export const Example = () => {
             fill: fillKnobLine,
           },
         }}
+        xAccessor="x"
+        yAccessors={['y']}
         xScaleType={ScaleType.Linear}
         yScaleType={ScaleType.Linear}
         data={[
@@ -98,6 +102,8 @@ export const Example = () => {
             fill: fillKnobBubble,
           },
         }}
+        xAccessor="x"
+        yAccessors={['y']}
         xScaleType={ScaleType.Linear}
         yScaleType={ScaleType.Linear}
         data={[
diff --git a/storybook/stories/test_cases/2_chrome_path_bug_fix.story.tsx b/storybook/stories/test_cases/2_chrome_path_bug_fix.story.tsx
index 40ff724fbc..57ec0f894a 100644
--- a/storybook/stories/test_cases/2_chrome_path_bug_fix.story.tsx
+++ b/storybook/stories/test_cases/2_chrome_path_bug_fix.story.tsx
@@ -76,6 +76,8 @@ export const Example = () => {
         xScaleType="time"
         yScaleType={ScaleType.Linear}
         stackAccessors={['yes']}
+        xAccessor="x"
+        yAccessors={['y']}
         splitSeriesAccessors={['g']}
         data={data}
       />
diff --git a/storybook/stories/test_cases/4_filter_zero_values_log.story.tsx b/storybook/stories/test_cases/4_filter_zero_values_log.story.tsx
index bcd728bc07..a522cf4177 100644
--- a/storybook/stories/test_cases/4_filter_zero_values_log.story.tsx
+++ b/storybook/stories/test_cases/4_filter_zero_values_log.story.tsx
@@ -33,6 +33,8 @@ export const Example = () => {
       <AreaSeries
         id="bars"
         name="amount"
+        xAccessor="x"
+        yAccessors={['y']}
         xScaleType={ScaleType.Linear}
         yScaleType={ScaleType.Log}
         areaSeriesStyle={{ point: { visible: true } }}
diff --git a/storybook/stories/test_cases/5_legend_scroll_bar_sizing.story.tsx b/storybook/stories/test_cases/5_legend_scroll_bar_sizing.story.tsx
index 21b50b70b5..ded009a8f3 100644
--- a/storybook/stories/test_cases/5_legend_scroll_bar_sizing.story.tsx
+++ b/storybook/stories/test_cases/5_legend_scroll_bar_sizing.story.tsx
@@ -69,6 +69,8 @@ export const Example = () => {
       <Axis id="time" position={Position.Bottom} integersOnly />
       <BarSeries
         id="bars"
+        xAccessor="x"
+        yAccessors={['y']}
         xScaleType={ScaleType.Time}
         yScaleType={ScaleType.Linear}
         splitSeriesAccessors={['g']}
diff --git a/yarn.lock b/yarn.lock
index 063b13bc97..1fee79e942 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4060,39 +4060,39 @@
   resolved "https://registry.yarnpkg.com/@mdx-js/util/-/util-1.6.6.tgz#9c70eb7e7e4abc1083c8edf7151d35a19e442c00"
   integrity sha512-PKTHVgMHnK5p+kcMWWNnZuoR7O19VmHiOujmVcyN50hya7qIdDb5vvsYC+dwLxApEXiABhLozq0dlIwFeS3yjg==
 
-"@microsoft/api-documenter@^7.13.54":
-  version "7.13.54"
-  resolved "https://registry.yarnpkg.com/@microsoft/api-documenter/-/api-documenter-7.13.54.tgz#d6eacf912250e57c36589650b84443868cdc2a09"
-  integrity sha512-Ar1e2xcQzGhl3W6z2I6a5cS+a5yXMbZP4cThzwrOR+Vc4rfgQnIQnuZWYPVKdU5UejCgLvUwc8LDMPisUleJQQ==
+"@microsoft/api-documenter@^7.13.63":
+  version "7.13.63"
+  resolved "https://registry.yarnpkg.com/@microsoft/api-documenter/-/api-documenter-7.13.63.tgz#ee2ca311bcc35ff1f39532c8cfcdf12ce1ca4ffa"
+  integrity sha512-NIg9IEHBcVG7yPhLYVmKGvL6TmNXzUM1lKaUTroEx/qj+fw/PU1PuMUAb8k2D8zySq6Y5x8zAjbURXeqkW8NzQ==
   dependencies:
-    "@microsoft/api-extractor-model" "7.13.9"
+    "@microsoft/api-extractor-model" "7.13.13"
     "@microsoft/tsdoc" "0.13.2"
-    "@rushstack/node-core-library" "3.41.0"
-    "@rushstack/ts-command-line" "4.9.1"
+    "@rushstack/node-core-library" "3.42.3"
+    "@rushstack/ts-command-line" "4.10.2"
     colors "~1.2.1"
     js-yaml "~3.13.1"
     resolve "~1.17.0"
 
-"@microsoft/api-extractor-model@7.13.9":
-  version "7.13.9"
-  resolved "https://registry.yarnpkg.com/@microsoft/api-extractor-model/-/api-extractor-model-7.13.9.tgz#018fb37ac0147595832e13db17509f6adafbad9c"
-  integrity sha512-t/XKTr8MlHRWgDr1fkyCzTQRR5XICf/WzIFs8yw1JLU8Olw99M3by4/dtpOZNskfqoW+J8NwOxovduU2csi4Ww==
+"@microsoft/api-extractor-model@7.13.13":
+  version "7.13.13"
+  resolved "https://registry.yarnpkg.com/@microsoft/api-extractor-model/-/api-extractor-model-7.13.13.tgz#5c1ac0fff0410b8f23478b15560b24096b8869c6"
+  integrity sha512-4Hz2TOL4TljsAfMQe7a8tm+Am8+AkrcgkbnH62S9YuaIC3Cw6jE4H2qP8WC2JJInWJP4pg/ZrUlHrtmtgrqn9Q==
   dependencies:
     "@microsoft/tsdoc" "0.13.2"
     "@microsoft/tsdoc-config" "~0.15.2"
-    "@rushstack/node-core-library" "3.41.0"
+    "@rushstack/node-core-library" "3.42.3"
 
-"@microsoft/api-extractor@^7.18.11":
-  version "7.18.11"
-  resolved "https://registry.yarnpkg.com/@microsoft/api-extractor/-/api-extractor-7.18.11.tgz#24910c2432362b09900b493a0713919b662cdb0f"
-  integrity sha512-WfN5MZry4TrF60OOcGadFDsGECF9JNKNT+8P/8crYAumAYQRitI2cUiQRlCWrgmFgCWNezsNZeI/2BggdnUqcg==
+"@microsoft/api-extractor@^7.18.16":
+  version "7.18.16"
+  resolved "https://registry.yarnpkg.com/@microsoft/api-extractor/-/api-extractor-7.18.16.tgz#c5e077e417938da7e7026124c51d34a90868e7bd"
+  integrity sha512-f0EcjGgS8IToUHxfQIr4vxGpBhUdaDOhGyddZpZ5K9e/GcGkImfkGeHpYbK043f2bZV3aagTx6NcIawwE72BKA==
   dependencies:
-    "@microsoft/api-extractor-model" "7.13.9"
+    "@microsoft/api-extractor-model" "7.13.13"
     "@microsoft/tsdoc" "0.13.2"
     "@microsoft/tsdoc-config" "~0.15.2"
-    "@rushstack/node-core-library" "3.41.0"
-    "@rushstack/rig-package" "0.3.1"
-    "@rushstack/ts-command-line" "4.9.1"
+    "@rushstack/node-core-library" "3.42.3"
+    "@rushstack/rig-package" "0.3.3"
+    "@rushstack/ts-command-line" "4.10.2"
     colors "~1.2.1"
     lodash "~4.17.15"
     resolve "~1.17.0"
@@ -4482,10 +4482,10 @@
     prop-types "^15.6.1"
     react-lifecycles-compat "^3.0.4"
 
-"@rushstack/node-core-library@3.41.0":
-  version "3.41.0"
-  resolved "https://registry.yarnpkg.com/@rushstack/node-core-library/-/node-core-library-3.41.0.tgz#36f79ecf1a3c9b417690d95bbfcdf40390bf5f51"
-  integrity sha512-JxdmqR+SHU04jTDaZhltMZL3/XTz2ZZM47DTN+FSPUGUVp6WmxLlvJnT5FoHrOZWUjL/FoIlZUdUPTSXjTjIcg==
+"@rushstack/node-core-library@3.42.3":
+  version "3.42.3"
+  resolved "https://registry.yarnpkg.com/@rushstack/node-core-library/-/node-core-library-3.42.3.tgz#e9bc8aee4ba047d1858afcb7822b5aaf973b4fd8"
+  integrity sha512-xtiJsHtO4Sf/hVKyf/8d58p3zQh2JAZNs1mmDNCyIlgSRYGdqUkpadvvn5mz7EwF6lwn+xTTaTV5/a32xKjbdw==
   dependencies:
     "@types/node" "12.20.24"
     colors "~1.2.1"
@@ -4497,18 +4497,18 @@
     timsort "~0.3.0"
     z-schema "~3.18.3"
 
-"@rushstack/rig-package@0.3.1":
-  version "0.3.1"
-  resolved "https://registry.yarnpkg.com/@rushstack/rig-package/-/rig-package-0.3.1.tgz#b70ab9ffe3b6347eb799f5c6c5b6f5882039a60f"
-  integrity sha512-DXQmrPWOCNoE2zPzHCShE1y47FlgbAg48wpaY058Qo/yKDzL0GlEGf5Ra2NIt22pMcp0R/HHh+kZGbqTnF4CrA==
+"@rushstack/rig-package@0.3.3":
+  version "0.3.3"
+  resolved "https://registry.yarnpkg.com/@rushstack/rig-package/-/rig-package-0.3.3.tgz#6e291d181b2b9b114dd8e806e8389d999142d137"
+  integrity sha512-ElPnChxIkUzcU3ywI0Cl7E1aM+2w6vFpAwM6X+oWk7Cyjf2ofItThje9e5qUBtKqvI9sc5jVsHY1bRC8rVwOqQ==
   dependencies:
     resolve "~1.17.0"
     strip-json-comments "~3.1.1"
 
-"@rushstack/ts-command-line@4.9.1":
-  version "4.9.1"
-  resolved "https://registry.yarnpkg.com/@rushstack/ts-command-line/-/ts-command-line-4.9.1.tgz#9fe594a408c7ef1b67f57b41ba931ecd3f420e92"
-  integrity sha512-zzoWB6OqVbMjnxlxbAUqbZqDWITUSHqwFCx7JbH5CVrjR9kcsB4NeWkN1I8GcR92beiOGvO3yPlB2NRo5Ugh+A==
+"@rushstack/ts-command-line@4.10.2":
+  version "4.10.2"
+  resolved "https://registry.yarnpkg.com/@rushstack/ts-command-line/-/ts-command-line-4.10.2.tgz#019d43d8428e243031c66aeac1f088687f6730f3"
+  integrity sha512-Weq8B7oJeCQ4ITsaVLhOQombipyg+idpkdkhA6UqLtKvuzq8zTtPpAfhP5ff5L+RCmo1CFCVOBE3i+MvzUR5vA==
   dependencies:
     "@types/argparse" "1.0.38"
     argparse "~1.0.9"
@@ -22051,6 +22051,11 @@ typescript@~3.9.7:
   resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.9.7.tgz#98d600a5ebdc38f40cb277522f12dc800e9e25fa"
   integrity sha512-BLbiRkiBzAwsjut4x/dsibSTB6yWpwT5qWmC2OfuCg3GgVQCSgMs4vEctYPhsaGtd0AeuuHMkjZ2h2WG8MSzRw==
 
+typescript@~4.4.2:
+  version "4.4.4"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.4.4.tgz#2cd01a1a1f160704d3101fd5a58ff0f9fcb8030c"
+  integrity sha512-DqGhF5IKoBl8WNf8C1gu8q0xZSInh9j1kJJMqT3a94w1JzVaBU4EXOSMrz9yDqMT0xt3selp83fuFMQ0uzv6qA==
+
 uglify-js@^3.1.4:
   version "3.13.5"
   resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-3.13.5.tgz#5d71d6dbba64cf441f32929b1efce7365bb4f113"