diff --git a/.github/workflows/ci.yaml b/.github/workflows/ci.yaml
index 796e1fdc961..9094e661670 100644
--- a/.github/workflows/ci.yaml
+++ b/.github/workflows/ci.yaml
@@ -130,7 +130,6 @@ jobs:
       - name: Testing
         run: yarn test --coverage --ci
 
-
   build-sb:
     name: Build Storybook
     needs: setup
diff --git a/integration/helpers.ts b/integration/helpers.ts
index fcecde6d859..b4e01a36a7d 100644
--- a/integration/helpers.ts
+++ b/integration/helpers.ts
@@ -14,6 +14,7 @@ import path from 'path';
 import { getStorybook, configure } from '@storybook/react';
 
 import { Rotation } from '../packages/charts/src';
+import { ThemeId } from '../storybook/use_base_theme';
 // @ts-ignore
 import { isLegacyVRTServer } from './config';
 
@@ -144,4 +145,21 @@ export const eachRotation = {
   },
 };
 
+const themeIds = Object.values(ThemeId);
+
+/**
+ * This is a wrapper around it.each for Themes
+ * Returns the requried query params to trigger correct theme
+ */
+export const eachTheme = {
+  it(fn: (theme: ThemeId, urlParam: string) => any, title = 'theme - %s') {
+    // eslint-disable-next-line jest/valid-title
+    return it.each<ThemeId>(themeIds)(title, (theme) => fn(theme, `&globals=theme:${theme}`));
+  },
+  describe(fn: (theme: ThemeId, urlParam: string) => any, title = 'theme - %s') {
+    // eslint-disable-next-line jest/valid-title, jest/valid-describe
+    return describe.each<ThemeId>(themeIds)(title, (theme) => fn(theme, `&globals=theme:${theme}`));
+  },
+};
+
 /* eslint-enable jest/no-export */
diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-goal-alpha-gauge-with-target-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-goal-alpha-gauge-with-target-visually-looks-correct-1-snap.png
index e316a42c0e2..ed148637314 100644
Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-goal-alpha-gauge-with-target-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-goal-alpha-gauge-with-target-visually-looks-correct-1-snap.png differ
diff --git a/integration/tests/__image_snapshots__/goal-stories-test-ts-goal-stories-theme-dark-should-render-gauge-with-target-story-1-snap.png b/integration/tests/__image_snapshots__/goal-stories-test-ts-goal-stories-theme-dark-should-render-gauge-with-target-story-1-snap.png
new file mode 100644
index 00000000000..bf6ad915504
Binary files /dev/null and b/integration/tests/__image_snapshots__/goal-stories-test-ts-goal-stories-theme-dark-should-render-gauge-with-target-story-1-snap.png differ
diff --git a/integration/tests/__image_snapshots__/goal-stories-test-ts-goal-stories-theme-dark-should-render-minimal-goal-story-1-snap.png b/integration/tests/__image_snapshots__/goal-stories-test-ts-goal-stories-theme-dark-should-render-minimal-goal-story-1-snap.png
new file mode 100644
index 00000000000..353331f28e4
Binary files /dev/null and b/integration/tests/__image_snapshots__/goal-stories-test-ts-goal-stories-theme-dark-should-render-minimal-goal-story-1-snap.png differ
diff --git a/integration/tests/__image_snapshots__/goal-stories-test-ts-goal-stories-theme-dark-should-render-vertical-negative-story-1-snap.png b/integration/tests/__image_snapshots__/goal-stories-test-ts-goal-stories-theme-dark-should-render-vertical-negative-story-1-snap.png
new file mode 100644
index 00000000000..ca3eb0243f0
Binary files /dev/null and b/integration/tests/__image_snapshots__/goal-stories-test-ts-goal-stories-theme-dark-should-render-vertical-negative-story-1-snap.png differ
diff --git a/integration/tests/__image_snapshots__/goal-stories-test-ts-goal-stories-theme-eui-dark-should-render-gauge-with-target-story-1-snap.png b/integration/tests/__image_snapshots__/goal-stories-test-ts-goal-stories-theme-eui-dark-should-render-gauge-with-target-story-1-snap.png
new file mode 100644
index 00000000000..09ec1e1361d
Binary files /dev/null and b/integration/tests/__image_snapshots__/goal-stories-test-ts-goal-stories-theme-eui-dark-should-render-gauge-with-target-story-1-snap.png differ
diff --git a/integration/tests/__image_snapshots__/goal-stories-test-ts-goal-stories-theme-eui-dark-should-render-minimal-goal-story-1-snap.png b/integration/tests/__image_snapshots__/goal-stories-test-ts-goal-stories-theme-eui-dark-should-render-minimal-goal-story-1-snap.png
new file mode 100644
index 00000000000..bfc4ba9024f
Binary files /dev/null and b/integration/tests/__image_snapshots__/goal-stories-test-ts-goal-stories-theme-eui-dark-should-render-minimal-goal-story-1-snap.png differ
diff --git a/integration/tests/__image_snapshots__/goal-stories-test-ts-goal-stories-theme-eui-dark-should-render-vertical-negative-story-1-snap.png b/integration/tests/__image_snapshots__/goal-stories-test-ts-goal-stories-theme-eui-dark-should-render-vertical-negative-story-1-snap.png
new file mode 100644
index 00000000000..c1df6ac8d24
Binary files /dev/null and b/integration/tests/__image_snapshots__/goal-stories-test-ts-goal-stories-theme-eui-dark-should-render-vertical-negative-story-1-snap.png differ
diff --git a/integration/tests/__image_snapshots__/goal-stories-test-ts-goal-stories-theme-eui-light-should-render-gauge-with-target-story-1-snap.png b/integration/tests/__image_snapshots__/goal-stories-test-ts-goal-stories-theme-eui-light-should-render-gauge-with-target-story-1-snap.png
new file mode 100644
index 00000000000..ed148637314
Binary files /dev/null and b/integration/tests/__image_snapshots__/goal-stories-test-ts-goal-stories-theme-eui-light-should-render-gauge-with-target-story-1-snap.png differ
diff --git a/integration/tests/__image_snapshots__/goal-stories-test-ts-goal-stories-theme-eui-light-should-render-minimal-goal-story-1-snap.png b/integration/tests/__image_snapshots__/goal-stories-test-ts-goal-stories-theme-eui-light-should-render-minimal-goal-story-1-snap.png
new file mode 100644
index 00000000000..513f3bec17d
Binary files /dev/null and b/integration/tests/__image_snapshots__/goal-stories-test-ts-goal-stories-theme-eui-light-should-render-minimal-goal-story-1-snap.png differ
diff --git a/integration/tests/__image_snapshots__/goal-stories-test-ts-goal-stories-theme-eui-light-should-render-vertical-negative-story-1-snap.png b/integration/tests/__image_snapshots__/goal-stories-test-ts-goal-stories-theme-eui-light-should-render-vertical-negative-story-1-snap.png
new file mode 100644
index 00000000000..e0c52325757
Binary files /dev/null and b/integration/tests/__image_snapshots__/goal-stories-test-ts-goal-stories-theme-eui-light-should-render-vertical-negative-story-1-snap.png differ
diff --git a/integration/tests/__image_snapshots__/goal-stories-test-ts-goal-stories-theme-light-should-render-gauge-with-target-story-1-snap.png b/integration/tests/__image_snapshots__/goal-stories-test-ts-goal-stories-theme-light-should-render-gauge-with-target-story-1-snap.png
new file mode 100644
index 00000000000..ed148637314
Binary files /dev/null and b/integration/tests/__image_snapshots__/goal-stories-test-ts-goal-stories-theme-light-should-render-gauge-with-target-story-1-snap.png differ
diff --git a/integration/tests/__image_snapshots__/goal-stories-test-ts-goal-stories-theme-light-should-render-minimal-goal-story-1-snap.png b/integration/tests/__image_snapshots__/goal-stories-test-ts-goal-stories-theme-light-should-render-minimal-goal-story-1-snap.png
new file mode 100644
index 00000000000..513f3bec17d
Binary files /dev/null and b/integration/tests/__image_snapshots__/goal-stories-test-ts-goal-stories-theme-light-should-render-minimal-goal-story-1-snap.png differ
diff --git a/integration/tests/__image_snapshots__/goal-stories-test-ts-goal-stories-theme-light-should-render-vertical-negative-story-1-snap.png b/integration/tests/__image_snapshots__/goal-stories-test-ts-goal-stories-theme-light-should-render-vertical-negative-story-1-snap.png
new file mode 100644
index 00000000000..e0c52325757
Binary files /dev/null and b/integration/tests/__image_snapshots__/goal-stories-test-ts-goal-stories-theme-light-should-render-vertical-negative-story-1-snap.png differ
diff --git a/integration/tests/goal_stories.test.ts b/integration/tests/goal_stories.test.ts
index ebb122b72f3..44c14fac3ca 100644
--- a/integration/tests/goal_stories.test.ts
+++ b/integration/tests/goal_stories.test.ts
@@ -6,6 +6,7 @@
  * Side Public License, v 1.
  */
 
+import { eachTheme } from '../helpers';
 import { common } from '../page_objects';
 
 describe('Goal stories', () => {
@@ -14,10 +15,31 @@ describe('Goal stories', () => {
       'http://localhost:9001/?path=/story/goal-alpha--gaps&knob-show target=false&knob-target=260',
     );
   });
+
   it('should render actual tooltip color on hover', async () => {
     await common.expectChartWithMouseAtUrlToMatchScreenshot(
       'http://localhost:9001/?path=/story/goal-alpha--gaps&knob-show target=false&knob-target=260&globals=background:white',
       { right: 245, bottom: 120 },
     );
   });
+
+  eachTheme.describe((_, params) => {
+    it('should render gauge with target story', async () => {
+      await common.expectChartAtUrlToMatchScreenshot(
+        `https://elastic.github.io/elastic-charts/?path=/story/goal-alpha--gauge-with-target${params}`,
+      );
+    });
+
+    it('should render minimal goal story', async () => {
+      await common.expectChartAtUrlToMatchScreenshot(
+        `https://elastic.github.io/elastic-charts/?path=/story/goal-alpha--minimal-goal${params}`,
+      );
+    });
+
+    it('should render vertical negative story', async () => {
+      await common.expectChartAtUrlToMatchScreenshot(
+        `https://elastic.github.io/elastic-charts/?path=/story/goal-alpha--vertical-negative${params}`,
+      );
+    });
+  });
 });
diff --git a/packages/charts/api/charts.api.md b/packages/charts/api/charts.api.md
index 484acabc884..5a5d84eca62 100644
--- a/packages/charts/api/charts.api.md
+++ b/packages/charts/api/charts.api.md
@@ -791,11 +791,18 @@ export function getNodeName(node: ArrayNode): string;
 // @alpha (undocumented)
 export const Goal: React_2.FunctionComponent<SpecRequiredProps_8 & SpecOptionalProps_8>;
 
+// @alpha (undocumented)
+export type GoalLabelAccessor = LabelAccessor<BandFillColorAccessorInput>;
+
 // @alpha (undocumented)
 export interface GoalSpec extends Spec {
     // (undocumented)
     actual: number;
     // (undocumented)
+    angleEnd: number;
+    // (undocumented)
+    angleStart: number;
+    // (undocumented)
     bandFillColor: BandFillColorAccessor;
     // (undocumented)
     bandLabels: string[];
@@ -804,19 +811,19 @@ export interface GoalSpec extends Spec {
     // (undocumented)
     base: number;
     // (undocumented)
-    centralMajor: string | BandFillColorAccessor;
+    centralMajor: string | GoalLabelAccessor;
     // (undocumented)
-    centralMinor: string | BandFillColorAccessor;
+    centralMinor: string | GoalLabelAccessor;
     // (undocumented)
     chartType: typeof ChartType.Goal;
     // Warning: (ae-forgotten-export) The symbol "Config" needs to be exported by the entry point index.d.ts
     //
+    // @deprecated (undocumented)
+    config?: RecursivePartial<Config>;
     // (undocumented)
-    config: RecursivePartial<Config>;
-    // (undocumented)
-    labelMajor: string | BandFillColorAccessor;
+    labelMajor: string | GoalLabelAccessor;
     // (undocumented)
-    labelMinor: string | BandFillColorAccessor;
+    labelMinor: string | GoalLabelAccessor;
     // (undocumented)
     specType: typeof SpecType.Series;
     // Warning: (ae-forgotten-export) The symbol "GoalSubtype" needs to be exported by the entry point index.d.ts
@@ -828,7 +835,31 @@ export interface GoalSpec extends Spec {
     // (undocumented)
     ticks: number[];
     // (undocumented)
-    tickValueFormatter: BandFillColorAccessor;
+    tickValueFormatter: GoalLabelAccessor;
+}
+
+// @public (undocumented)
+export interface GoalStyles {
+    // (undocumented)
+    majorCenterLabel: Omit<TextStyle, 'padding' | 'fontSize'>;
+    // (undocumented)
+    majorLabel: Omit<TextStyle, 'padding' | 'fontSize'>;
+    // (undocumented)
+    maxFontSize: number;
+    // (undocumented)
+    minFontSize: number;
+    // (undocumented)
+    minorCenterLabel: Omit<TextStyle, 'padding' | 'fontSize'>;
+    // (undocumented)
+    minorLabel: Omit<TextStyle, 'padding' | 'fontSize'>;
+    // (undocumented)
+    progressLine: Pick<StrokeStyle, 'stroke'>;
+    // (undocumented)
+    targetLine: Pick<StrokeStyle, 'stroke'>;
+    // (undocumented)
+    tickLabel: Omit<TextStyle, 'padding' | 'fontSize'>;
+    // (undocumented)
+    tickLine: Pick<StrokeStyle, 'stroke'>;
 }
 
 // @public (undocumented)
@@ -1106,7 +1137,7 @@ export type IsUnknown<T, True, False = never> = unknown extends T ? IsAny<T, Fal
 export type Key = CategoryKey;
 
 // @public (undocumented)
-export type LabelAccessor = (value: PrimitiveValue) => string;
+export type LabelAccessor<T = PrimitiveValue> = (value: T) => string;
 
 // @public (undocumented)
 export const LabelOverflowConstraint: Readonly<{
@@ -2076,6 +2107,8 @@ export interface Theme {
     // (undocumented)
     crosshair: CrosshairStyle;
     // (undocumented)
+    goal: GoalStyles;
+    // (undocumented)
     legend: LegendStyle;
     lineSeriesStyle: LineSeriesStyle;
     markSizeRatio?: number;
diff --git a/packages/charts/src/chart_types/goal_chart/layout/config/config.ts b/packages/charts/src/chart_types/goal_chart/layout/config/config.ts
index c716266c3f4..e60d181b32f 100644
--- a/packages/charts/src/chart_types/goal_chart/layout/config/config.ts
+++ b/packages/charts/src/chart_types/goal_chart/layout/config/config.ts
@@ -6,18 +6,18 @@
  * Side Public License, v 1.
  */
 
-import { ConfigItem, configMap } from '../../../../common/config_objects';
+import { ConfigItem } from '../../../../common/config_objects';
 import { TAU } from '../../../../common/constants';
-import { Config } from '../types/config_types';
 
-/** @internal */
+/**
+ * Keeping for future config validation checks
+ * @internal
+ */
 export const configMetadata: Record<string, ConfigItem> = {
   angleStart: { dflt: Math.PI + Math.PI / 4, min: -TAU, max: TAU, type: 'number' },
   angleEnd: { dflt: -Math.PI / 4, min: -TAU, max: TAU, type: 'number' },
 
   // shape geometry
-  width: { dflt: 300, min: 0, max: 1024, type: 'number', reconfigurable: false },
-  height: { dflt: 150, min: 0, max: 1024, type: 'number', reconfigurable: false },
   margin: {
     type: 'group',
     values: {
@@ -41,6 +41,3 @@ export const configMetadata: Record<string, ConfigItem> = {
   backgroundColor: { dflt: '#ffffff', type: 'color' },
   sectorLineWidth: { dflt: 1, min: 0, max: 4, type: 'number' },
 };
-
-/** @internal */
-export const config: Config = configMap<Config>((item: ConfigItem) => item.dflt, configMetadata);
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 6206f464d68..966c8e5e9d7 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
@@ -6,12 +6,14 @@
  * Side Public License, v 1.
  */
 
+import chroma from 'chroma-js';
+
 import { Pixels, PointObject } from '../../../../common/geometry';
 import { SpecType } from '../../../../specs/constants';
+import { LIGHT_THEME } from '../../../../utils/themes/light_theme';
+import { Theme } from '../../../../utils/themes/theme';
 import { BandFillColorAccessorInput } from '../../specs';
 import { GoalSubtype } from '../../specs/constants';
-import { config } from '../config/config';
-import { Config } from './config_types';
 
 /** @internal */
 export interface BandViewModel {
@@ -41,6 +43,8 @@ export interface BulletViewModel {
   lowestValue: number;
   aboveBaseCount: number;
   belowBaseCount: number;
+  angleStart: number;
+  angleEnd: number;
 }
 
 /** @internal */
@@ -48,7 +52,7 @@ export type PickFunction = (x: Pixels, y: Pixels) => Array<BulletViewModel>;
 
 /** @internal */
 export type ShapeViewModel = {
-  config: Config;
+  config: Theme['goal'];
   bulletViewModel: BulletViewModel;
   chartCenter: PointObject;
   pickQuads: PickFunction;
@@ -66,21 +70,18 @@ const commonDefaults = {
 export const defaultGoalSpec = {
   ...commonDefaults,
   bands: [50, 75, 100],
-  bandFillColor: ({ value, base, highestValue, lowestValue }: BandFillColorAccessorInput) => {
-    const aboveBase = value > base;
-    const ratio = aboveBase
-      ? (value - base) / (Math.max(base, highestValue) - base)
-      : (value - base) / (Math.min(base, lowestValue) - base);
-    const level = Math.round(255 * ratio);
-    return aboveBase ? `rgb(0, ${level}, 0)` : `rgb( ${level}, 0, 0)`;
+  bandFillColor: ({ value, highestValue, lowestValue }: BandFillColorAccessorInput) => {
+    const func = chroma.scale(chroma.brewer.Greens).gamma(0.5).domain([highestValue, lowestValue]);
+    return func(value).css();
   },
   tickValueFormatter: ({ value }: BandFillColorAccessorInput) => String(value),
   labelMajor: ({ base }: BandFillColorAccessorInput) => String(base),
-  // eslint-disable-next-line no-empty-pattern
-  labelMinor: ({}: BandFillColorAccessorInput) => 'unit',
+  labelMinor: () => 'unit',
   centralMajor: ({ base }: BandFillColorAccessorInput) => String(base),
   centralMinor: ({ target }: BandFillColorAccessorInput) => (target ? String(target) : ''),
   bandLabels: [],
+  angleStart: Math.PI + Math.PI / 4,
+  angleEnd: -Math.PI / 4,
 };
 
 /** @internal */
@@ -96,12 +97,14 @@ export const nullGoalViewModel = {
   lowestValue: 0,
   aboveBaseCount: 0,
   belowBaseCount: 0,
+  angleStart: 0,
+  angleEnd: 0,
 };
 
 /** @internal */
-export const nullShapeViewModel = (specifiedConfig?: Config, chartCenter?: PointObject): ShapeViewModel => ({
-  config: specifiedConfig || config,
+export const nullShapeViewModel = ({ goal }: Theme = LIGHT_THEME): ShapeViewModel => ({
+  config: goal,
   bulletViewModel: nullGoalViewModel,
-  chartCenter: chartCenter || { x: 0, y: 0 },
+  chartCenter: { x: 0, y: 0 },
   pickQuads: () => [],
 });
diff --git a/packages/charts/src/chart_types/goal_chart/layout/viewmodel/geoms.ts b/packages/charts/src/chart_types/goal_chart/layout/viewmodel/geoms.ts
index 64a89a46409..08017e8daa7 100644
--- a/packages/charts/src/chart_types/goal_chart/layout/viewmodel/geoms.ts
+++ b/packages/charts/src/chart_types/goal_chart/layout/viewmodel/geoms.ts
@@ -10,8 +10,9 @@ import { GOLDEN_RATIO, TAU } from '../../../../common/constants';
 import { PointObject, Radian, Rectangle } from '../../../../common/geometry';
 import { cssFontShorthand, Font } from '../../../../common/text_utils';
 import { CanvasRenderer } from '../../../../renderers/canvas';
+import { Dimensions } from '../../../../utils/dimensions';
+import { Theme } from '../../../../utils/themes/theme';
 import { GoalSubtype } from '../../specs/constants';
-import { Config } from '../types/config_types';
 import { BulletViewModel } from '../types/viewmodel_types';
 
 const referenceCircularSizeCap = 360; // goal/gauge won't be bigger even if there's ample room: it'd be a waste of space
@@ -171,6 +172,7 @@ export class Text implements Mark {
   protected readonly textBaseline: CanvasTextBaseline;
   protected readonly fontShape: Font;
   protected readonly fontSize: number;
+  protected readonly fillStyle: string;
 
   constructor(
     x: number,
@@ -180,6 +182,7 @@ export class Text implements Mark {
     textBaseline: CanvasTextBaseline,
     fontShape: Font,
     fontSize: number,
+    fillStyle: string,
   ) {
     this.x = x;
     this.y = y;
@@ -188,6 +191,7 @@ export class Text implements Mark {
     this.textBaseline = textBaseline;
     this.fontShape = fontShape;
     this.fontSize = fontSize;
+    this.fillStyle = fillStyle;
   }
 
   setCanvasTextState(ctx: CanvasRenderingContext2D) {
@@ -214,6 +218,7 @@ export class Text implements Mark {
   render(ctx: CanvasRenderingContext2D) {
     this.setCanvasTextState(ctx);
     ctx.beginPath();
+    ctx.fillStyle = this.fillStyle;
     ctx.fillText(this.text, this.x, this.y);
   }
 }
@@ -223,7 +228,12 @@ function get<T>(o: { [k: string]: any }, name: string, dflt: T) {
 }
 
 /** @internal */
-export function geoms(bulletViewModel: BulletViewModel, config: Config, chartCenter: PointObject): Mark[] {
+export function geoms(
+  bulletViewModel: BulletViewModel,
+  config: Theme['goal'],
+  partentDimensions: Dimensions,
+  chartCenter: PointObject,
+): Mark[] {
   const {
     subtype,
     lowestValue,
@@ -237,6 +247,8 @@ export function geoms(bulletViewModel: BulletViewModel, config: Config, chartCen
     labelMinor,
     centralMajor,
     centralMinor,
+    angleStart,
+    angleEnd,
   } = bulletViewModel;
 
   const circular = subtype === GoalSubtype.Goal;
@@ -259,12 +271,12 @@ export function geoms(bulletViewModel: BulletViewModel, config: Config, chartCen
       : {}),
   };
 
-  const minSize = Math.min(config.width, config.height);
+  const minSize = Math.min(partentDimensions.width, partentDimensions.height);
 
   const referenceSize =
     Math.min(
       circular ? referenceCircularSizeCap : referenceBulletSizeCap,
-      circular ? minSize : vertical ? config.height : config.width,
+      circular ? minSize : vertical ? partentDimensions.height : partentDimensions.width,
     ) *
     (1 - 2 * marginRatio);
 
@@ -293,21 +305,21 @@ export function geoms(bulletViewModel: BulletViewModel, config: Config, chartCen
     {
       order: 1,
       landmarks: { from: 'base', to: 'actual' },
-      aes: { shape, fillColor: 'black', lineWidth: tickLength },
+      aes: { shape, fillColor: config.progressLine.stroke, lineWidth: tickLength },
     },
     ...(target
       ? [
           {
             order: 2,
             landmarks: { at: 'target' },
-            aes: { shape, fillColor: 'black', lineWidth: barThickness / GOLDEN_RATIO },
+            aes: { shape, fillColor: config.targetLine.stroke, lineWidth: barThickness / GOLDEN_RATIO },
           },
         ]
       : []),
     ...bulletViewModel.ticks.map((b, i) => ({
       order: 3,
       landmarks: { at: `tick_${i}` },
-      aes: { shape, fillColor: 'darkgrey', lineWidth: tickLength, axisNormalOffset: tickOffset },
+      aes: { shape, fillColor: config.tickLine.stroke, lineWidth: tickLength, axisNormalOffset: tickOffset },
     })),
     ...bulletViewModel.ticks.map((b, i) => ({
       order: 4,
@@ -316,8 +328,8 @@ export function geoms(bulletViewModel: BulletViewModel, config: Config, chartCen
         shape: 'text',
         textAlign: vertical ? 'right' : 'center',
         textBaseline: vertical ? 'middle' : 'top',
-        fillColor: 'black',
-        fontShape: { fontStyle: 'normal', fontVariant: 'normal', fontWeight: '500', fontFamily: 'sans-serif' },
+        fillColor: config.tickLabel.fill,
+        fontShape: { ...config.tickLabel, fontVariant: 'normal', fontWeight: '500' },
         axisNormalOffset: -barThickness,
       },
     })),
@@ -330,8 +342,8 @@ export function geoms(bulletViewModel: BulletViewModel, config: Config, chartCen
         axisTangentOffset: circular || !vertical ? 0 : 2 * labelFontSize,
         textAlign: vertical ? 'center' : 'right',
         textBaseline: 'bottom',
-        fillColor: 'black',
-        fontShape: { fontStyle: 'normal', fontVariant: 'normal', fontWeight: '900', fontFamily: 'sans-serif' },
+        fillColor: config.majorLabel.fill,
+        fontShape: { ...config.majorLabel, fontVariant: 'normal', fontWeight: '900' },
       },
     },
     {
@@ -343,8 +355,8 @@ export function geoms(bulletViewModel: BulletViewModel, config: Config, chartCen
         axisTangentOffset: circular || !vertical ? 0 : 2 * labelFontSize,
         textAlign: vertical ? 'center' : 'right',
         textBaseline: 'top',
-        fillColor: 'black',
-        fontShape: { fontStyle: 'normal', fontVariant: 'normal', fontWeight: '300', fontFamily: 'sans-serif' },
+        fillColor: config.minorLabel.fill,
+        fontShape: { ...config.minorLabel, fontVariant: 'normal', fontWeight: '300' },
       },
     },
     ...(circular
@@ -356,8 +368,8 @@ export function geoms(bulletViewModel: BulletViewModel, config: Config, chartCen
               shape: 'text',
               textAlign: 'center',
               textBaseline: 'bottom',
-              fillColor: 'black',
-              fontShape: { fontStyle: 'normal', fontVariant: 'normal', fontWeight: '900', fontFamily: 'sans-serif' },
+              fillColor: config.majorCenterLabel.fill,
+              fontShape: { ...config.majorCenterLabel, fontVariant: 'normal', fontWeight: '900' },
             },
           },
           {
@@ -367,8 +379,8 @@ export function geoms(bulletViewModel: BulletViewModel, config: Config, chartCen
               shape: 'text',
               textAlign: 'center',
               textBaseline: 'top',
-              fillColor: 'black',
-              fontShape: { fontStyle: 'normal', fontVariant: 'normal', fontWeight: '300', fontFamily: 'sans-serif' },
+              fillColor: config.minorCenterLabel.fill,
+              fontShape: { ...config.minorCenterLabel, fontVariant: 'normal', fontWeight: '300' },
             },
           },
         ]
@@ -389,7 +401,6 @@ export function geoms(bulletViewModel: BulletViewModel, config: Config, chartCen
 
   const linearScale = (x: number) => pxRangeFrom + (pxRange * (x - domain[0])) / domainExtent;
 
-  const { angleStart, angleEnd } = config;
   const angleRange = angleEnd - angleStart;
   const angleScale = (x: number) => angleStart + (angleRange * (x - domain[0])) / domainExtent;
   const clockwise = angleStart > angleEnd; // todo refine this crude approach
@@ -422,7 +433,16 @@ export function geoms(bulletViewModel: BulletViewModel, config: Config, chartCen
         const y = circular
           ? (label ? r : central ? 0 : -(r - GOLDEN_RATIO * barThickness) * Math.sin(scaledValue))
           : (vertical ? -axisTangentOffset - scaledValue : -axisNormalOffset);
-        return new Text(x + chartCenter.x, y + chartCenter.y, text, textAlign, textBaseline, fontShape, fontSize);
+        return new Text(
+          x + chartCenter.x,
+          y + chartCenter.y,
+          text,
+          textAlign,
+          textBaseline,
+          fontShape,
+          fontSize,
+          strokeStyle,
+        );
       } else if (aes.shape === 'arc') {
         const cx = chartCenter.x + pxRangeMid;
         const cy = chartCenter.y;
@@ -433,7 +453,6 @@ export function geoms(bulletViewModel: BulletViewModel, config: Config, chartCen
         const anticlockwise = at || clockwise === (data[from].value < data[to].value);
         return new Arc(cx, cy, radius, -startAngle, -endAngle, !anticlockwise, lineWidth, strokeStyle);
       } else {
-        // if (aes.shape === 'line')
         const translateX = chartCenter.x + (vertical ? axisNormalOffset : axisTangentOffset);
         const translateY = chartCenter.y - (vertical ? axisTangentOffset : axisNormalOffset);
         const atPx = data[at] && linearScale(data[at].value);
diff --git a/packages/charts/src/chart_types/goal_chart/layout/viewmodel/viewmodel.ts b/packages/charts/src/chart_types/goal_chart/layout/viewmodel/viewmodel.ts
index 1bf4913aca9..02c4babc76f 100644
--- a/packages/charts/src/chart_types/goal_chart/layout/viewmodel/viewmodel.ts
+++ b/packages/charts/src/chart_types/goal_chart/layout/viewmodel/viewmodel.ts
@@ -6,20 +6,20 @@
  * Side Public License, v 1.
  */
 
+import { Dimensions } from '../../../../utils/dimensions';
+import { Theme } from '../../../../utils/themes/theme';
 import { GoalSpec } from '../../specs';
-import { Config } from '../types/config_types';
 import { BulletViewModel, PickFunction, ShapeViewModel } from '../types/viewmodel_types';
 
 /** @internal */
-export function shapeViewModel(spec: GoalSpec, config: Config): ShapeViewModel {
-  const { width, height, margin } = config;
-
-  const innerWidth = width * (1 - Math.min(1, margin.left + margin.right));
-  const innerHeight = height * (1 - Math.min(1, margin.top + margin.bottom));
-
+export function shapeViewModel(spec: GoalSpec, theme: Theme, chartDimensions: Dimensions): ShapeViewModel {
+  const { width, height } = chartDimensions;
+  const { chartMargins: margin } = theme;
+  const innerWidth = width - margin.left - margin.right;
+  const innerHeight = height - margin.top - margin.bottom;
   const chartCenter = {
-    x: width * margin.left + innerWidth / 2,
-    y: height * margin.top + innerHeight / 2,
+    x: margin.left + innerWidth / 2,
+    y: margin.top + innerHeight / 2,
   };
 
   const pickQuads: PickFunction = (x, y) =>
@@ -41,6 +41,8 @@ export function shapeViewModel(spec: GoalSpec, config: Config): ShapeViewModel {
     centralMajor,
     centralMinor,
     bandLabels,
+    angleStart,
+    angleEnd,
   } = spec;
 
   const [lowestValue, highestValue] = [base, ...(target ? [target] : []), actual, ...bands, ...ticks].reduce(
@@ -85,11 +87,12 @@ export function shapeViewModel(spec: GoalSpec, config: Config): ShapeViewModel {
     lowestValue,
     aboveBaseCount,
     belowBaseCount,
+    angleStart,
+    angleEnd,
   };
 
-  // combined viewModel
   return {
-    config,
+    config: theme.goal,
     chartCenter,
     bulletViewModel,
     pickQuads,
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 b2e811872eb..aec57f22703 100644
--- a/packages/charts/src/chart_types/goal_chart/specs/index.ts
+++ b/packages/charts/src/chart_types/goal_chart/specs/index.ts
@@ -12,8 +12,7 @@ import { ChartType } from '../..';
 import { Spec } from '../../../specs';
 import { SpecType } from '../../../specs/constants';
 import { getConnect, specComponentFactory } from '../../../state/spec_factory';
-import { Color, RecursivePartial } from '../../../utils/common';
-import { config } from '../layout/config/config';
+import { Color, LabelAccessor, RecursivePartial } from '../../../utils/common';
 import { Config } from '../layout/types/config_types';
 import { defaultGoalSpec } from '../layout/types/viewmodel_types';
 import { GoalSubtype } from './constants';
@@ -33,10 +32,12 @@ export interface BandFillColorAccessorInput {
 /** @alpha */
 export type BandFillColorAccessor = (input: BandFillColorAccessorInput) => Color;
 
+/** @alpha */
+export type GoalLabelAccessor = LabelAccessor<BandFillColorAccessorInput>;
+
 const defaultProps = {
   chartType: ChartType.Goal,
   ...defaultGoalSpec,
-  config,
 };
 
 /** @alpha */
@@ -50,12 +51,18 @@ export interface GoalSpec extends Spec {
   bands: number[];
   ticks: number[];
   bandFillColor: BandFillColorAccessor;
-  tickValueFormatter: BandFillColorAccessor;
-  labelMajor: string | BandFillColorAccessor;
-  labelMinor: string | BandFillColorAccessor;
-  centralMajor: string | BandFillColorAccessor;
-  centralMinor: string | BandFillColorAccessor;
-  config: RecursivePartial<Config>;
+  tickValueFormatter: GoalLabelAccessor;
+  labelMajor: string | GoalLabelAccessor;
+  labelMinor: string | GoalLabelAccessor;
+  centralMajor: string | GoalLabelAccessor;
+  centralMinor: string | GoalLabelAccessor;
+  /**
+   * @deprecated properties have been migrated to the theme or spec.
+   * To be removed with partition, heatmap and wordmap configs.
+   */
+  config?: RecursivePartial<Config>;
+  angleStart: number;
+  angleEnd: number;
   bandLabels: string[];
 }
 
@@ -66,7 +73,6 @@ type SpecOptionalProps = Partial<Omit<GoalSpec, 'chartType' | 'specType' | 'id'
 export const Goal: React.FunctionComponent<SpecRequiredProps & SpecOptionalProps> = getConnect()(
   specComponentFactory<
     GoalSpec,
-    | 'config'
     | 'chartType'
     | 'subtype'
     | 'base'
@@ -81,5 +87,7 @@ export const Goal: React.FunctionComponent<SpecRequiredProps & SpecOptionalProps
     | 'labelMinor'
     | 'centralMajor'
     | 'centralMinor'
+    | 'angleStart'
+    | 'angleEnd'
   >(defaultProps),
 );
diff --git a/packages/charts/src/chart_types/goal_chart/state/selectors/geometries.ts b/packages/charts/src/chart_types/goal_chart/state/selectors/geometries.ts
index ad2c00be02e..559c87aedae 100644
--- a/packages/charts/src/chart_types/goal_chart/state/selectors/geometries.ts
+++ b/packages/charts/src/chart_types/goal_chart/state/selectors/geometries.ts
@@ -10,6 +10,7 @@ import { ChartType } from '../../..';
 import { SpecType } from '../../../../specs/constants';
 import { GlobalChartState } from '../../../../state/chart_state';
 import { createCustomCachedSelector } from '../../../../state/create_selector';
+import { getChartThemeSelector } from '../../../../state/selectors/get_chart_theme';
 import { getSpecs } from '../../../../state/selectors/get_settings_specs';
 import { getSpecsFromStore } from '../../../../state/utils';
 import { nullShapeViewModel, ShapeViewModel } from '../../layout/types/viewmodel_types';
@@ -21,18 +22,18 @@ const getParentDimensions = (state: GlobalChartState) => state.parentDimensions;
 
 /** @internal */
 export const geometries = createCustomCachedSelector(
-  [getSpecs, getParentDimensions],
-  (specs, parentDimensions): ShapeViewModel => {
+  [getSpecs, getParentDimensions, getChartThemeSelector],
+  (specs, parentDimensions, theme): ShapeViewModel => {
     const goalSpecs = getSpecsFromStore<GoalSpec>(specs, ChartType.Goal, SpecType.Series);
-    return goalSpecs.length === 1 ? render(goalSpecs[0], parentDimensions) : nullShapeViewModel();
+    return goalSpecs.length === 1 ? render(goalSpecs[0], parentDimensions, theme) : nullShapeViewModel(theme);
   },
 );
 
 /** @internal */
 export const getPrimitiveGeoms = createCustomCachedSelector(
   [geometries, getParentDimensions],
-  (shapeViewModel: ShapeViewModel, { width, height }): Mark[] => {
-    const { config, chartCenter, bulletViewModel } = shapeViewModel;
-    return geoms(bulletViewModel, { ...config, width, height }, chartCenter);
+  (shapeViewModel, parentDimensions): Mark[] => {
+    const { chartCenter, bulletViewModel, config } = shapeViewModel;
+    return geoms(bulletViewModel, config, parentDimensions, chartCenter);
   },
 );
diff --git a/packages/charts/src/chart_types/goal_chart/state/selectors/scenegraph.ts b/packages/charts/src/chart_types/goal_chart/state/selectors/scenegraph.ts
index 61186289029..bc463faf688 100644
--- a/packages/charts/src/chart_types/goal_chart/state/selectors/scenegraph.ts
+++ b/packages/charts/src/chart_types/goal_chart/state/selectors/scenegraph.ts
@@ -8,17 +8,50 @@
 
 import { mergePartial, RecursivePartial } from '../../../../utils/common';
 import { Dimensions } from '../../../../utils/dimensions';
-import { config as defaultConfig } from '../../layout/config/config';
+import { PartialTheme, Theme } from '../../../../utils/themes/theme';
 import { Config } from '../../layout/types/config_types';
 import { ShapeViewModel } from '../../layout/types/viewmodel_types';
 import { shapeViewModel } from '../../layout/viewmodel/viewmodel';
 import { GoalSpec } from '../../specs';
 
+/**
+ * Helper to map old config to theme
+ * remove when `spec.config` is fully deprecated
+ */
+const mapConfigToTheme = ({
+  margin,
+  backgroundColor,
+  minFontSize,
+  maxFontSize,
+  fontFamily,
+}: RecursivePartial<Config> = {}): PartialTheme => ({
+  chartMargins: margin,
+  background: {
+    color: backgroundColor,
+  },
+  goal: {
+    minFontSize,
+    maxFontSize,
+    tickLabel: {
+      fontFamily,
+    },
+    majorLabel: {
+      fontFamily,
+    },
+    minorLabel: {
+      fontFamily,
+    },
+  },
+});
+
 /** @internal */
-export function render(spec: GoalSpec, parentDimensions: Dimensions): ShapeViewModel {
-  const { width, height } = parentDimensions;
-  const { config: specConfig } = spec;
-  const partialConfig: RecursivePartial<Config> = { ...specConfig, width, height };
-  const config: Config = mergePartial(defaultConfig, partialConfig, { mergeOptionalPartialValues: true });
-  return shapeViewModel(spec, config);
+export function render(spec: GoalSpec, parentDimensions: Dimensions, theme: Theme): ShapeViewModel {
+  // override theme and spec with old deprecated config options
+  const mergedTheme: Theme = mergePartial(theme, mapConfigToTheme(spec.config), { mergeOptionalPartialValues: true });
+  const mergedSpec: GoalSpec = mergePartial(spec, {
+    angleEnd: spec?.config?.angleEnd,
+    angleStart: spec?.config?.angleStart,
+  });
+
+  return shapeViewModel(mergedSpec, mergedTheme, parentDimensions);
 }
diff --git a/packages/charts/src/utils/common.tsx b/packages/charts/src/utils/common.tsx
index 3f298f0574f..f05d7603447 100644
--- a/packages/charts/src/utils/common.tsx
+++ b/packages/charts/src/utils/common.tsx
@@ -478,7 +478,7 @@ export type ValueFormatter = (value: number) => string;
 /** @public */
 export type ValueAccessor = (d: Datum) => AdditiveNumber;
 /** @public */
-export type LabelAccessor = (value: PrimitiveValue) => string;
+export type LabelAccessor<T = PrimitiveValue> = (value: T) => string;
 /** @public */
 export type ShowAccessor = (value: PrimitiveValue) => boolean;
 
diff --git a/packages/charts/src/utils/themes/dark_theme.ts b/packages/charts/src/utils/themes/dark_theme.ts
index 73bade60fa7..3659ae33045 100644
--- a/packages/charts/src/utils/themes/dark_theme.ts
+++ b/packages/charts/src/utils/themes/dark_theme.ts
@@ -192,4 +192,42 @@ export const DARK_THEME: Theme = {
   background: {
     color: 'transparent',
   },
+  goal: {
+    minFontSize: 8,
+    maxFontSize: 64,
+    tickLabel: {
+      fontStyle: 'normal',
+      fontFamily: 'sans-serif',
+      fill: 'white',
+    },
+    majorLabel: {
+      fontStyle: 'normal',
+      fontFamily: 'sans-serif',
+      fill: 'white',
+    },
+    minorLabel: {
+      fontStyle: 'normal',
+      fontFamily: 'sans-serif',
+      fill: 'white',
+    },
+    majorCenterLabel: {
+      fontStyle: 'normal',
+      fontFamily: 'sans-serif',
+      fill: 'white',
+    },
+    minorCenterLabel: {
+      fontStyle: 'normal',
+      fontFamily: 'sans-serif',
+      fill: 'white',
+    },
+    targetLine: {
+      stroke: 'white',
+    },
+    tickLine: {
+      stroke: 'snow',
+    },
+    progressLine: {
+      stroke: 'white',
+    },
+  },
 };
diff --git a/packages/charts/src/utils/themes/light_theme.ts b/packages/charts/src/utils/themes/light_theme.ts
index a6dd80ba5d3..6cb327139e3 100644
--- a/packages/charts/src/utils/themes/light_theme.ts
+++ b/packages/charts/src/utils/themes/light_theme.ts
@@ -192,4 +192,42 @@ export const LIGHT_THEME: Theme = {
   background: {
     color: 'transparent',
   },
+  goal: {
+    minFontSize: 8,
+    maxFontSize: 64,
+    tickLabel: {
+      fontStyle: 'normal',
+      fontFamily: 'sans-serif',
+      fill: 'black',
+    },
+    majorLabel: {
+      fontStyle: 'normal',
+      fontFamily: 'sans-serif',
+      fill: 'black',
+    },
+    minorLabel: {
+      fontStyle: 'normal',
+      fontFamily: 'sans-serif',
+      fill: 'black',
+    },
+    majorCenterLabel: {
+      fontStyle: 'normal',
+      fontFamily: 'sans-serif',
+      fill: 'black',
+    },
+    minorCenterLabel: {
+      fontStyle: 'normal',
+      fontFamily: 'sans-serif',
+      fill: 'black',
+    },
+    targetLine: {
+      stroke: 'black',
+    },
+    tickLine: {
+      stroke: 'darkgrey',
+    },
+    progressLine: {
+      stroke: 'black',
+    },
+  },
 };
diff --git a/packages/charts/src/utils/themes/theme.ts b/packages/charts/src/utils/themes/theme.ts
index 44cab80fca1..f1224c08d4b 100644
--- a/packages/charts/src/utils/themes/theme.ts
+++ b/packages/charts/src/utils/themes/theme.ts
@@ -169,6 +169,23 @@ export interface GridLineStyle {
   opacity: number;
   dash: number[];
 }
+
+/**
+ * @public
+ */
+export interface GoalStyles {
+  progressLine: Pick<StrokeStyle, 'stroke'>;
+  targetLine: Pick<StrokeStyle, 'stroke'>;
+  tickLine: Pick<StrokeStyle, 'stroke'>;
+  tickLabel: Omit<TextStyle, 'padding' | 'fontSize'>;
+  majorLabel: Omit<TextStyle, 'padding' | 'fontSize'>;
+  minorLabel: Omit<TextStyle, 'padding' | 'fontSize'>;
+  majorCenterLabel: Omit<TextStyle, 'padding' | 'fontSize'>;
+  minorCenterLabel: Omit<TextStyle, 'padding' | 'fontSize'>;
+  minFontSize: number;
+  maxFontSize: number;
+}
+
 /** @public */
 export interface ScalesConfig {
   /**
@@ -304,6 +321,7 @@ export interface Theme {
    * This can then be used to calculate the contrast of the text for partition charts.
    */
   background: BackgroundStyle;
+  goal: GoalStyles;
 }
 
 /** @public */
diff --git a/storybook/stories/annotations/lines/1_x_continuous.tsx b/storybook/stories/annotations/lines/1_x_continuous.tsx
index f60f8ac6b05..fc95184bc8b 100644
--- a/storybook/stories/annotations/lines/1_x_continuous.tsx
+++ b/storybook/stories/annotations/lines/1_x_continuous.tsx
@@ -41,7 +41,7 @@ export const Example = () => {
   const data = arrayKnobs('data values', [2.5, 7.2]);
   const dataValues = generateAnnotationData(data);
 
-  const style: LineAnnotationStyle = {
+  const style: Partial<LineAnnotationStyle> = {
     line: {
       strokeWidth: 3,
       stroke: '#f00',
diff --git a/storybook/stories/annotations/lines/6_test_single_bar_histogram.tsx b/storybook/stories/annotations/lines/6_test_single_bar_histogram.tsx
index e4d3d246b0e..688b981815e 100644
--- a/storybook/stories/annotations/lines/6_test_single_bar_histogram.tsx
+++ b/storybook/stories/annotations/lines/6_test_single_bar_histogram.tsx
@@ -34,7 +34,7 @@ export const Example = () => {
     },
   ];
 
-  const style: LineAnnotationStyle = {
+  const style: Partial<LineAnnotationStyle> = {
     line: {
       strokeWidth: 3,
       stroke: '#f00',
diff --git a/storybook/stories/goal/10_band_in_band.tsx b/storybook/stories/goal/10_band_in_band.tsx
index 17f3e03cb92..2a98c018850 100644
--- a/storybook/stories/goal/10_band_in_band.tsx
+++ b/storybook/stories/goal/10_band_in_band.tsx
@@ -9,7 +9,6 @@
 import React from 'react';
 
 import { Chart, Goal, Settings } from '@elastic/charts';
-import { config } from '@elastic/charts/src/chart_types/goal_chart/layout/config/config';
 import { BandFillColorAccessorInput } from '@elastic/charts/src/chart_types/goal_chart/specs';
 import { GoalSubtype } from '@elastic/charts/src/chart_types/goal_chart/specs/constants';
 import { Color } from '@elastic/charts/src/utils/common';
@@ -42,7 +41,6 @@ export const Example = () => (
       labelMinor="(thousand USD)  "
       centralMajor="225"
       centralMinor=""
-      config={config}
     />
   </Chart>
 );
diff --git a/storybook/stories/goal/11_gaps.tsx b/storybook/stories/goal/11_gaps.tsx
index 75746e30b9b..382bd08c13b 100644
--- a/storybook/stories/goal/11_gaps.tsx
+++ b/storybook/stories/goal/11_gaps.tsx
@@ -10,7 +10,6 @@ import { boolean, number } from '@storybook/addon-knobs';
 import React from 'react';
 
 import { Chart, Goal, Settings } from '@elastic/charts';
-import { config } from '@elastic/charts/src/chart_types/goal_chart/layout/config/config';
 import { BandFillColorAccessorInput } from '@elastic/charts/src/chart_types/goal_chart/specs';
 import { GoalSubtype } from '@elastic/charts/src/chart_types/goal_chart/specs/constants';
 import { Color } from '@elastic/charts/src/utils/common';
@@ -50,7 +49,6 @@ export const Example = () => {
         labelMinor="(thousand USD)  "
         centralMajor="280"
         centralMinor={showTarget ? `target: ${target}` : undefined}
-        config={config}
       />
     </Chart>
   );
diff --git a/storybook/stories/goal/12_range.tsx b/storybook/stories/goal/12_range.tsx
index cb28ef9580a..4835c1b7400 100644
--- a/storybook/stories/goal/12_range.tsx
+++ b/storybook/stories/goal/12_range.tsx
@@ -9,7 +9,6 @@
 import React from 'react';
 
 import { Chart, Goal, Settings } from '@elastic/charts';
-import { config } from '@elastic/charts/src/chart_types/goal_chart/layout/config/config';
 import { BandFillColorAccessorInput } from '@elastic/charts/src/chart_types/goal_chart/specs';
 import { GoalSubtype } from '@elastic/charts/src/chart_types/goal_chart/specs/constants';
 import { Color } from '@elastic/charts/src/utils/common';
@@ -43,7 +42,6 @@ export const Example = () => (
       labelMinor="(thousand USD)  "
       centralMajor="225"
       centralMinor=""
-      config={config}
     />
   </Chart>
 );
diff --git a/storybook/stories/goal/13_confidence_level.tsx b/storybook/stories/goal/13_confidence_level.tsx
index 64d6bab46ee..88dc08d33d3 100644
--- a/storybook/stories/goal/13_confidence_level.tsx
+++ b/storybook/stories/goal/13_confidence_level.tsx
@@ -9,7 +9,6 @@
 import React from 'react';
 
 import { Chart, Goal, Settings } from '@elastic/charts';
-import { config } from '@elastic/charts/src/chart_types/goal_chart/layout/config/config';
 import { BandFillColorAccessorInput } from '@elastic/charts/src/chart_types/goal_chart/specs';
 import { GoalSubtype } from '@elastic/charts/src/chart_types/goal_chart/specs/constants';
 import { Color } from '@elastic/charts/src/utils/common';
@@ -47,7 +46,6 @@ export const Example = () => (
       labelMinor=""
       centralMajor="226.5"
       centralMinor=""
-      config={config}
     />
   </Chart>
 );
diff --git a/storybook/stories/goal/19_horizontal_negative.tsx b/storybook/stories/goal/19_horizontal_negative.tsx
index 7ec23a3c230..f9b727366d9 100644
--- a/storybook/stories/goal/19_horizontal_negative.tsx
+++ b/storybook/stories/goal/19_horizontal_negative.tsx
@@ -9,7 +9,6 @@
 import React from 'react';
 
 import { Chart, Goal, Settings } from '@elastic/charts';
-import { config } from '@elastic/charts/src/chart_types/goal_chart/layout/config/config';
 import { BandFillColorAccessorInput } from '@elastic/charts/src/chart_types/goal_chart/specs';
 import { GoalSubtype } from '@elastic/charts/src/chart_types/goal_chart/specs/constants';
 import { Color } from '@elastic/charts/src/utils/common';
@@ -47,7 +46,6 @@ export const Example = () => (
       labelMinor="(thousand USD)  "
       centralMajor="-280"
       centralMinor="target: -260"
-      config={config}
     />
   </Chart>
 );
diff --git a/storybook/stories/goal/20_vertical_negative.tsx b/storybook/stories/goal/20_vertical_negative.tsx
index 16789287c9e..a54c266e5b1 100644
--- a/storybook/stories/goal/20_vertical_negative.tsx
+++ b/storybook/stories/goal/20_vertical_negative.tsx
@@ -9,7 +9,6 @@
 import React from 'react';
 
 import { Chart, Goal, Settings } from '@elastic/charts';
-import { config } from '@elastic/charts/src/chart_types/goal_chart/layout/config/config';
 import { BandFillColorAccessorInput } from '@elastic/charts/src/chart_types/goal_chart/specs';
 import { GoalSubtype } from '@elastic/charts/src/chart_types/goal_chart/specs/constants';
 import { Color } from '@elastic/charts/src/utils/common';
@@ -47,7 +46,6 @@ export const Example = () => (
       labelMinor="(thousand USD)  "
       centralMajor="-280"
       centralMinor="target: -260"
-      config={config}
     />
   </Chart>
 );
diff --git a/storybook/stories/goal/21_goal_negative.tsx b/storybook/stories/goal/21_goal_negative.tsx
index e2d21553c3f..f8d77218cc8 100644
--- a/storybook/stories/goal/21_goal_negative.tsx
+++ b/storybook/stories/goal/21_goal_negative.tsx
@@ -9,7 +9,6 @@
 import React from 'react';
 
 import { Chart, Goal, Settings } from '@elastic/charts';
-import { config } from '@elastic/charts/src/chart_types/goal_chart/layout/config/config';
 import { BandFillColorAccessorInput } from '@elastic/charts/src/chart_types/goal_chart/specs';
 import { GoalSubtype } from '@elastic/charts/src/chart_types/goal_chart/specs/constants';
 import { Color } from '@elastic/charts/src/utils/common';
@@ -47,7 +46,6 @@ export const Example = () => (
       labelMinor="(thousand USD)  "
       centralMajor="-280"
       centralMinor="target: -260"
-      config={config}
     />
   </Chart>
 );
diff --git a/storybook/stories/goal/22_horizontal_plusminus.tsx b/storybook/stories/goal/22_horizontal_plusminus.tsx
index 92ff606bbc5..8d8307f1848 100644
--- a/storybook/stories/goal/22_horizontal_plusminus.tsx
+++ b/storybook/stories/goal/22_horizontal_plusminus.tsx
@@ -9,7 +9,6 @@
 import React from 'react';
 
 import { Chart, Goal, Settings } from '@elastic/charts';
-import { config } from '@elastic/charts/src/chart_types/goal_chart/layout/config/config';
 import { BandFillColorAccessorInput } from '@elastic/charts/src/chart_types/goal_chart/specs';
 import { GoalSubtype } from '@elastic/charts/src/chart_types/goal_chart/specs/constants';
 import { Color } from '@elastic/charts/src/utils/common';
@@ -49,7 +48,6 @@ export const Example = () => (
       labelMinor="(thousand USD)  "
       centralMajor="-80"
       centralMinor="target: 260"
-      config={config}
     />
   </Chart>
 );
diff --git a/storybook/stories/goal/23_vertical_plusminus.tsx b/storybook/stories/goal/23_vertical_plusminus.tsx
index bde161c6fc7..07a8df63810 100644
--- a/storybook/stories/goal/23_vertical_plusminus.tsx
+++ b/storybook/stories/goal/23_vertical_plusminus.tsx
@@ -9,7 +9,6 @@
 import React from 'react';
 
 import { Chart, Goal, Settings } from '@elastic/charts';
-import { config } from '@elastic/charts/src/chart_types/goal_chart/layout/config/config';
 import { BandFillColorAccessorInput } from '@elastic/charts/src/chart_types/goal_chart/specs';
 import { GoalSubtype } from '@elastic/charts/src/chart_types/goal_chart/specs/constants';
 import { Color } from '@elastic/charts/src/utils/common';
@@ -49,7 +48,6 @@ export const Example = () => (
       labelMinor="(thousand USD)  "
       centralMajor="-80"
       centralMinor="target: 260"
-      config={config}
     />
   </Chart>
 );
diff --git a/storybook/stories/goal/24_goal_plusminus.tsx b/storybook/stories/goal/24_goal_plusminus.tsx
index c3700632b24..f5fbaa2534d 100644
--- a/storybook/stories/goal/24_goal_plusminus.tsx
+++ b/storybook/stories/goal/24_goal_plusminus.tsx
@@ -9,7 +9,6 @@
 import React from 'react';
 
 import { Chart, Goal, Settings } from '@elastic/charts';
-import { config } from '@elastic/charts/src/chart_types/goal_chart/layout/config/config';
 import { BandFillColorAccessorInput } from '@elastic/charts/src/chart_types/goal_chart/specs';
 import { GoalSubtype } from '@elastic/charts/src/chart_types/goal_chart/specs/constants';
 import { Color } from '@elastic/charts/src/utils/common';
@@ -49,7 +48,6 @@ export const Example = () => (
       labelMinor="(thousand USD)  "
       centralMajor="-80"
       centralMinor="target: 260"
-      config={config}
     />
   </Chart>
 );
diff --git a/storybook/stories/goal/2_gauge_with_target.tsx b/storybook/stories/goal/2_gauge_with_target.tsx
index 0a3f52216d9..0224ed91564 100644
--- a/storybook/stories/goal/2_gauge_with_target.tsx
+++ b/storybook/stories/goal/2_gauge_with_target.tsx
@@ -6,7 +6,7 @@
  * Side Public License, v 1.
  */
 
-import { number, color, array } from '@storybook/addon-knobs';
+import { number, color, array, boolean } from '@storybook/addon-knobs';
 import React from 'react';
 
 import { Chart, Goal, Settings } from '@elastic/charts';
@@ -31,6 +31,7 @@ export const Example = () => {
     '300': 0.05,
   };
 
+  const useColors = boolean('use custom band colors', false, 'colors');
   const colorMap: { [k: number]: Color } = bands.reduce<{ [k: number]: Color }>((acc, band) => {
     const defaultValue = opacityMap[band] ?? 0;
     acc[band] = color(`color at ${band}`, `rgba(0,0,0,${defaultValue.toFixed(2)})`, 'colors');
@@ -38,6 +39,7 @@ export const Example = () => {
   }, {});
 
   const bandFillColor = (x: number): Color => colorMap[x];
+
   return (
     <Chart>
       <Settings baseTheme={useBaseTheme()} />
@@ -50,7 +52,7 @@ export const Example = () => {
         bands={bands}
         ticks={ticks}
         tickValueFormatter={({ value }: BandFillColorAccessorInput) => String(value)}
-        bandFillColor={({ value }: BandFillColorAccessorInput) => bandFillColor(value)}
+        bandFillColor={useColors ? ({ value }: BandFillColorAccessorInput) => bandFillColor(value) : undefined}
         labelMajor="Revenue 2020 YTD  "
         labelMinor="(thousand USD)  "
         centralMajor={`${actual}`}
diff --git a/storybook/stories/goal/3_horizontal_bullet.tsx b/storybook/stories/goal/3_horizontal_bullet.tsx
index 5dc5efd311c..496d8759a47 100644
--- a/storybook/stories/goal/3_horizontal_bullet.tsx
+++ b/storybook/stories/goal/3_horizontal_bullet.tsx
@@ -9,7 +9,6 @@
 import React from 'react';
 
 import { Chart, Goal, Settings } from '@elastic/charts';
-import { config } from '@elastic/charts/src/chart_types/goal_chart/layout/config/config';
 import { BandFillColorAccessorInput } from '@elastic/charts/src/chart_types/goal_chart/specs';
 import { GoalSubtype } from '@elastic/charts/src/chart_types/goal_chart/specs/constants';
 import { Color } from '@elastic/charts/src/utils/common';
@@ -47,7 +46,6 @@ export const Example = () => (
       labelMinor="(thousand USD)  "
       centralMajor="280"
       centralMinor="target: 260"
-      config={config}
     />
   </Chart>
 );
diff --git a/storybook/stories/goal/4_vertical_bullet.tsx b/storybook/stories/goal/4_vertical_bullet.tsx
index 93e26a29204..15fc6d892ea 100644
--- a/storybook/stories/goal/4_vertical_bullet.tsx
+++ b/storybook/stories/goal/4_vertical_bullet.tsx
@@ -9,7 +9,6 @@
 import React from 'react';
 
 import { Chart, Goal, Settings } from '@elastic/charts';
-import { config } from '@elastic/charts/src/chart_types/goal_chart/layout/config/config';
 import { BandFillColorAccessorInput } from '@elastic/charts/src/chart_types/goal_chart/specs';
 import { GoalSubtype } from '@elastic/charts/src/chart_types/goal_chart/specs/constants';
 import { Color } from '@elastic/charts/src/utils/common';
@@ -47,7 +46,6 @@ export const Example = () => (
       labelMinor="(thousand USD)  "
       centralMajor="280"
       centralMinor="target: 260"
-      config={config}
     />
   </Chart>
 );
diff --git a/storybook/stories/goal/5_minimal.tsx b/storybook/stories/goal/5_minimal.tsx
index 73af5adba70..233bc97cf01 100644
--- a/storybook/stories/goal/5_minimal.tsx
+++ b/storybook/stories/goal/5_minimal.tsx
@@ -9,7 +9,6 @@
 import React from 'react';
 
 import { Chart, Goal, Settings } from '@elastic/charts';
-import { config } from '@elastic/charts/src/chart_types/goal_chart/layout/config/config';
 import { BandFillColorAccessorInput } from '@elastic/charts/src/chart_types/goal_chart/specs';
 import { GoalSubtype } from '@elastic/charts/src/chart_types/goal_chart/specs/constants';
 import { Color } from '@elastic/charts/src/utils/common';
@@ -48,7 +47,6 @@ export const Example = () => (
       labelMinor="(thousand USD)  "
       centralMajor="280"
       centralMinor="target: 260"
-      config={config}
     />
   </Chart>
 );
diff --git a/storybook/stories/goal/6_minimal_horizontal.tsx b/storybook/stories/goal/6_minimal_horizontal.tsx
index 8d067d8368e..ce4f1ebb011 100644
--- a/storybook/stories/goal/6_minimal_horizontal.tsx
+++ b/storybook/stories/goal/6_minimal_horizontal.tsx
@@ -9,7 +9,6 @@
 import React from 'react';
 
 import { Chart, Goal, Settings } from '@elastic/charts';
-import { config } from '@elastic/charts/src/chart_types/goal_chart/layout/config/config';
 import { BandFillColorAccessorInput } from '@elastic/charts/src/chart_types/goal_chart/specs';
 import { GoalSubtype } from '@elastic/charts/src/chart_types/goal_chart/specs/constants';
 import { Color } from '@elastic/charts/src/utils/common';
@@ -47,7 +46,6 @@ export const Example = () => (
       labelMinor="(thousand USD)  "
       centralMajor="280"
       centralMinor="target: 260"
-      config={config}
     />
   </Chart>
 );
diff --git a/storybook/stories/goal/7_horizontal_bar.tsx b/storybook/stories/goal/7_horizontal_bar.tsx
index 047a6ef9128..5b9c0c18f85 100644
--- a/storybook/stories/goal/7_horizontal_bar.tsx
+++ b/storybook/stories/goal/7_horizontal_bar.tsx
@@ -9,7 +9,6 @@
 import React from 'react';
 
 import { Chart, Goal, Settings } from '@elastic/charts';
-import { config } from '@elastic/charts/src/chart_types/goal_chart/layout/config/config';
 import { BandFillColorAccessorInput } from '@elastic/charts/src/chart_types/goal_chart/specs';
 import { GoalSubtype } from '@elastic/charts/src/chart_types/goal_chart/specs/constants';
 import { Color } from '@elastic/charts/src/utils/common';
@@ -47,7 +46,6 @@ export const Example = () => (
       labelMinor="(thousand USD)  "
       centralMajor="280"
       centralMinor="target: 260"
-      config={config}
     />
   </Chart>
 );
diff --git a/storybook/stories/goal/8_irregular_ticks.tsx b/storybook/stories/goal/8_irregular_ticks.tsx
index cad8839e9e4..6333c8b7058 100644
--- a/storybook/stories/goal/8_irregular_ticks.tsx
+++ b/storybook/stories/goal/8_irregular_ticks.tsx
@@ -9,7 +9,6 @@
 import React from 'react';
 
 import { Chart, Goal, Settings } from '@elastic/charts';
-import { config } from '@elastic/charts/src/chart_types/goal_chart/layout/config/config';
 import { BandFillColorAccessorInput } from '@elastic/charts/src/chart_types/goal_chart/specs';
 import { GoalSubtype } from '@elastic/charts/src/chart_types/goal_chart/specs/constants';
 import { Color } from '@elastic/charts/src/utils/common';
@@ -43,7 +42,6 @@ export const Example = () => (
       labelMinor="(thousand USD)  "
       centralMajor="280"
       centralMinor="target: 260"
-      config={config}
     />
   </Chart>
 );
diff --git a/storybook/stories/goal/9_minimal_band.tsx b/storybook/stories/goal/9_minimal_band.tsx
index 45992b1c6ea..b81f809fa05 100644
--- a/storybook/stories/goal/9_minimal_band.tsx
+++ b/storybook/stories/goal/9_minimal_band.tsx
@@ -9,7 +9,6 @@
 import React from 'react';
 
 import { Chart, Goal, Settings } from '@elastic/charts';
-import { config } from '@elastic/charts/src/chart_types/goal_chart/layout/config/config';
 import { BandFillColorAccessorInput } from '@elastic/charts/src/chart_types/goal_chart/specs';
 import { GoalSubtype } from '@elastic/charts/src/chart_types/goal_chart/specs/constants';
 import { Color } from '@elastic/charts/src/utils/common';
@@ -41,7 +40,6 @@ export const Example = () => (
       labelMinor="(thousand USD)  "
       centralMajor="225"
       centralMinor=""
-      config={config}
     />
   </Chart>
 );
diff --git a/storybook/stories/wordcloud/1_wordcloud.tsx b/storybook/stories/wordcloud/1_wordcloud.tsx
index 63d972bf215..68168d94de3 100644
--- a/storybook/stories/wordcloud/1_wordcloud.tsx
+++ b/storybook/stories/wordcloud/1_wordcloud.tsx
@@ -246,7 +246,7 @@ export const Example = () => {
       );
   const fontStyle = template
     ? (startConfig.fontStyle as FontStyle)
-    : select('fontStyle', { normal: 'normal', italic: 'italic' }, startConfig.fontStyle as FontStyle);
+    : select<FontStyle>('fontStyle', { normal: 'normal', italic: 'italic' }, startConfig.fontStyle as FontStyle);
 
   const palette = template
     ? startConfig.palette