diff --git a/packages/client/hmi-client/src/components/widgets/tera-chart-settings-panel.vue b/packages/client/hmi-client/src/components/widgets/tera-chart-settings-panel.vue
index d5b9802e97..9093742187 100644
--- a/packages/client/hmi-client/src/components/widgets/tera-chart-settings-panel.vue
+++ b/packages/client/hmi-client/src/components/widgets/tera-chart-settings-panel.vue
@@ -5,61 +5,75 @@
 				<Button :icon="`pi pi-times`" @click="$emit('close')" text rounded size="large" />
 				<h4 class="line-wrap">{{ activeSettings.name }}</h4>
 			</header>
-			<div class="content">
-				<div class="annotation-items">
-					<h5>Options</h5>
-					<tera-checkbox
-						label="Use log scale"
-						:model-value="Boolean(useLog)"
-						@update:model-value="toggleLogScale($event)"
-					/>
-					<tera-checkbox
-						v-if="comparison"
-						label="Small multiples"
-						:model-value="Boolean(isSmallMultiples)"
-						@update:model-value="toggleSmallMultiples($event)"
-					/>
-					<!-- TODO: we want this but it is under research for how to get it to work in vega-lite -->
-					<!-- <tera-checkbox
-						v-if="comparison && isSmallMultiples"
-						label="Share Y Axis"
-						:model-value="Boolean(isShareYAxis)"
-						@update:model-value="toggleShareYAxis($event)"
-					/> -->
-				</div>
-				<Divider />
-				<div v-if="chartAnnotations !== undefined" class="annotation-items">
+			<div class="content items-wrapper">
+				<section v-if="chartAnnotations !== undefined" class="annotation-items">
 					<h5>Annotations</h5>
+					<tera-input-text
+						v-model="generateAnnotationQuery"
+						:icon="'pi pi-sparkles'"
+						:placeholder="'What do you want to annotate?'"
+						:disabled="!!isGeneratingAnnotation"
+						@keyup.enter="createAnnotationDebounced"
+						@keyup.esc="cancelGenerateAnnotation"
+						class="annotation-input"
+					/>
 					<div v-for="annotation in chartAnnotations" :key="annotation.id" class="annotation-item">
 						{{ annotation.description }}
 						<span class="btn-wrapper">
 							<Button icon="pi pi-trash" rounded text @click="$emit('delete-annotation', annotation.id)" />
 						</span>
 					</div>
+					<Divider />
+				</section>
+				<section class="items-wrapper">
+					<h5>Options</h5>
+					<tera-checkbox
+						label="Use log scale"
+						:model-value="Boolean(useLog)"
+						@update:model-value="toggleLogScale($event)"
+					/>
+					<Divider />
+				</section>
+				<section v-if="isColorPickerEnabled">
+					<h5 class="mb-3">Color picker</h5>
+					<input type="color" :value="activeSettings?.primaryColor ?? ''" @change="onColorChange($event)" />
+					<Divider />
+				</section>
+				<section v-if="activeSettings?.type === ChartSettingType.VARIABLE_COMPARISON" class="items-wrapper">
+					<h5>Comparison method</h5>
 					<div>
-						<Button
-							v-if="!showAnnotationInput"
-							class="p-button-sm p-button-text"
-							icon="pi pi-plus"
-							label="Add annotation"
-							@click="showAnnotationInput = true"
+						<RadioButton
+							:model-value="smallMultiplesRadioValue"
+							@update:model-value="onSmallMultiplesRadioButtonChange"
+							inputId="all-charts"
+							value="all-charts"
 						/>
-						<tera-input-text
-							v-if="showAnnotationInput"
-							v-model="generateAnnotationQuery"
-							:icon="'pi pi-sparkles'"
-							:placeholder="'What do you want to annotate?'"
-							:disabled="!!isGeneratingAnnotation"
-							@keyup.enter="createAnnotationDebounced"
-							@keyup.esc="cancelGenerateAnnotation"
-							class="annotation-input"
+						<label for="all-charts" class="ml-2">All in one chart</label>
+					</div>
+					<div>
+						<RadioButton
+							:model-value="smallMultiplesRadioValue"
+							@update:model-value="onSmallMultiplesRadioButtonChange"
+							inputId="small-multiples"
+							value="small-multiples"
 						/>
+						<label for="small-multiples" class="ml-2">Small multiples</label>
 					</div>
-				</div>
-				<Divider />
-				<section v-if="isColorPickerEnabled">
-					<h5 class="mb-3">Color picker</h5>
-					<input type="color" :value="activeSettings?.primaryColor ?? ''" @change="onColorChange($event)" />
+					<div class="pl-5 items-wrapper">
+						<tera-checkbox
+							label="Same Y axis for all"
+							:disabled="!comparisonSettings?.smallMultiples"
+							:model-value="isShareYAxis"
+							@update:model-value="toggleShareYAxis($event)"
+						/>
+						<tera-checkbox
+							label="Show before and after"
+							:disabled="!comparisonSettings?.smallMultiples"
+							:model-value="showBeforeAfter"
+							@update:model-value="toggleShowBeforeAfter($event)"
+						/>
+					</div>
+					<Divider />
 				</section>
 			</div>
 		</div>
@@ -70,7 +84,8 @@
 import _ from 'lodash';
 import { ref, computed } from 'vue';
 import Button from 'primevue/button';
-import { ChartSetting, ChartSettingType } from '@/types/common';
+import RadioButton from 'primevue/radiobutton';
+import { ChartSetting, ChartSettingType, ChartSettingComparison } from '@/types/common';
 import { ChartAnnotation } from '@/types/Types';
 import Divider from 'primevue/divider';
 import TeraInputText from '@/components/widgets/tera-input-text.vue';
@@ -79,7 +94,6 @@ import TeraCheckbox from '@/components/widgets/tera-checkbox.vue';
 const props = defineProps<{
 	activeSettings: ChartSetting | null;
 	annotations?: ChartAnnotation[];
-	comparison?: boolean;
 	/**
 	 * We receives generateAnnotation as a functor from the parent to access the parent scope directly. This allows us to utilize dependencies defined in the parent component without passing them all as props, which can be cumbersome.
 	 * Additionally, it enables us to handle post-generation actions (like resetting loading state or clearing input) after function completion.
@@ -93,23 +107,23 @@ const emit = defineEmits(['close', 'update-settings', 'delete-annotation', 'crea
 
 // Log scale
 const useLog = computed(() => props.activeSettings?.scale === 'log');
-const isSmallMultiples = computed(() => {
-	const { smallMultiples, selectedVariables } = <ChartSetting>props.activeSettings;
-	return smallMultiples || selectedVariables?.length > 5;
-});
-// const isShareYAxis = computed(() => props.activeSettings?.shareYAxis);
-
 const toggleLogScale = (useLogScale: boolean) => {
 	emit('update-settings', { scale: useLogScale ? 'log' : '' });
 };
 
-const toggleSmallMultiples = (smallMultiples: boolean) => {
-	emit('update-settings', { smallMultiples: !!smallMultiples });
+// Settings for comparison method
+const comparisonSettings = computed(() => props.activeSettings as ChartSettingComparison | null);
+const smallMultiplesRadioValue = computed(() =>
+	comparisonSettings.value?.smallMultiples ? 'small-multiples' : 'all-charts'
+);
+const onSmallMultiplesRadioButtonChange = (value: 'all-charts' | 'small-multiples') => {
+	emit('update-settings', { smallMultiples: value === 'small-multiples' });
 };
-
-// const toggleShareYAxis = (shareYAxis: boolean) => {
-// 	emit('update-settings', { shareYAxis: !!shareYAxis });
-// };
+const isShareYAxis = computed(() => Boolean(comparisonSettings.value?.shareYAxis));
+const showBeforeAfter = computed(() => Boolean(comparisonSettings.value?.showBeforeAfter));
+const toggleShareYAxis = (value: boolean) => emit('update-settings', { shareYAxis: value });
+const toggleShowBeforeAfter = (value: boolean) => emit('update-settings', { showBeforeAfter: value });
+// ==============================
 
 // Primary color
 const isColorPickerEnabled = computed(() => {
@@ -132,7 +146,6 @@ const chartAnnotations = computed(() => {
 });
 const isGeneratingAnnotation = ref(false);
 const generateAnnotationQuery = ref<string>('');
-const showAnnotationInput = ref<Boolean>(false);
 
 const createAnnotation = async () => {
 	if (props.generateAnnotation === undefined || props.activeSettings === null) {
@@ -141,7 +154,6 @@ const createAnnotation = async () => {
 	isGeneratingAnnotation.value = true;
 	const newAnnotation = await props.generateAnnotation(props.activeSettings, generateAnnotationQuery.value);
 	isGeneratingAnnotation.value = false;
-	showAnnotationInput.value = false;
 	generateAnnotationQuery.value = '';
 	emit('create-annotation', newAnnotation);
 };
@@ -150,8 +162,8 @@ const createAnnotationDebounced = _.debounce(createAnnotation, 100);
 
 const cancelGenerateAnnotation = () => {
 	generateAnnotationQuery.value = '';
-	showAnnotationInput.value = false;
 };
+// ==============================
 </script>
 
 <style scoped>
@@ -208,6 +220,12 @@ const cancelGenerateAnnotation = () => {
 		background: var(--surface-0);
 	}
 
+	.items-wrapper {
+		display: flex;
+		flex-direction: column;
+		gap: var(--gap-2);
+	}
+
 	.annotation-input:deep(main) {
 		padding: var(--gap-2-5) var(--gap-2);
 	}
diff --git a/packages/client/hmi-client/src/composables/useChartSettings.ts b/packages/client/hmi-client/src/composables/useChartSettings.ts
index 264f7f6acd..491c793490 100644
--- a/packages/client/hmi-client/src/composables/useChartSettings.ts
+++ b/packages/client/hmi-client/src/composables/useChartSettings.ts
@@ -1,6 +1,12 @@
 import { cloneDeep } from 'lodash';
 import { ref, computed, watch } from 'vue';
-import { ChartSetting, ChartSettingEnsembleVariable, ChartSettingSensitivity, ChartSettingType } from '@/types/common';
+import {
+	ChartSetting,
+	ChartSettingComparison,
+	ChartSettingEnsembleVariable,
+	ChartSettingSensitivity,
+	ChartSettingType
+} from '@/types/common';
 import {
 	EnsembleVariableChartSettingOption,
 	removeChartSettingById,
@@ -8,7 +14,8 @@ import {
 	updateAllChartSettings,
 	updateSensitivityChartSettingOption,
 	CHART_SETTING_WITH_QUANTILES_OPTIONS,
-	createNewChartSetting
+	createNewChartSetting,
+	isChartSettingComparisonVariable
 } from '@/services/chart-settings';
 import { WorkflowNode } from '@/types/workflow';
 
@@ -52,9 +59,7 @@ export function useChartSettings(
 	const selectedErrorVariableSettings = computed(() =>
 		chartSettings.value.filter((setting) => setting.type === ChartSettingType.ERROR_DISTRIBUTION)
 	);
-	const selectedComparisonChartSettings = computed(() =>
-		chartSettings.value.filter((setting) => setting.type === ChartSettingType.VARIABLE_COMPARISON)
-	);
+	const selectedComparisonChartSettings = computed(() => chartSettings.value.filter(isChartSettingComparisonVariable));
 
 	const selectedSensitivityChartSettings = computed(
 		() =>
@@ -98,10 +103,18 @@ export function useChartSettings(
 	};
 
 	const updateComparisonChartSetting = (chartId: string, selectedVariables: string[]) => {
-		findAndUpdateChartSettingsById(chartId, {
-			name: selectedVariables.join(', '),
-			selectedVariables
-		});
+		const state = cloneDeep(props.node.state);
+		if (!state.chartSettings) return;
+		const setting = state.chartSettings.find(
+			(settings) => settings.id === chartId && settings.type === ChartSettingType.VARIABLE_COMPARISON
+		) as ChartSettingComparison | undefined;
+		if (!setting) return;
+		Object.assign(setting, { selectedVariables, name: selectedVariables.join(', ') });
+		if (setting.smallMultiples === undefined && selectedVariables.length > 5) {
+			// If there are more than 5 variables and the option isn't set yet, enable small multiples by default
+			setting.smallMultiples = true;
+		}
+		emit('update-state', state);
 	};
 
 	const updateEnsembleVariableSettingOption = (option: EnsembleVariableChartSettingOption, value: boolean) => {
diff --git a/packages/client/hmi-client/src/composables/useCharts.ts b/packages/client/hmi-client/src/composables/useCharts.ts
index 01fbadf1ac..5b1ec8eeaf 100644
--- a/packages/client/hmi-client/src/composables/useCharts.ts
+++ b/packages/client/hmi-client/src/composables/useCharts.ts
@@ -20,12 +20,18 @@ import {
 } from '@/services/charts';
 import { flattenInterventionData } from '@/services/intervention-policy';
 import { DataArray, extractModelConfigIdsInOrder, extractModelConfigIds } from '@/services/models/simulation-service';
-import { ChartSetting, ChartSettingEnsembleVariable, ChartSettingSensitivity, ChartSettingType } from '@/types/common';
+import {
+	ChartSetting,
+	ChartSettingComparison,
+	ChartSettingEnsembleVariable,
+	ChartSettingSensitivity,
+	ChartSettingType
+} from '@/types/common';
 import { Intervention, Model, ModelConfiguration } from '@/types/Types';
 import { displayNumber } from '@/utils/number';
 import { getUnitsFromModelParts, getVegaDateOptions } from '@/services/model';
 import { CalibrateMap, isCalibrateMap } from '@/services/calibrate-workflow';
-import { isChartSettingEnsembleVariable } from '@/services/chart-settings';
+import { isChartSettingComparisonVariable, isChartSettingEnsembleVariable } from '@/services/chart-settings';
 import {
 	CalibrateEnsembleMappingRow,
 	isCalibrateEnsembleMappingRow
@@ -99,6 +105,29 @@ const addModelConfigNameToTranslationMap = (
 	return newMap;
 };
 
+/**
+ * Calculate the extent of the y-axis based on the provided result summary and variables.
+ * @param resultSummary The result summary data array.
+ * @param variables The list of variables to calculate the extent for.
+ * @returns The extent of the y-axis as a tuple of [min, max].
+ */
+const calculateYExtent = (resultSummary: DataArray, variables: string[], includeBeforeValues = false) => {
+	const extent: [number, number] = [Infinity, -Infinity];
+	resultSummary.forEach((row) => {
+		variables.forEach((variable) => {
+			const minVarName = `${variable}_min`;
+			const maxVarName = `${variable}_max`;
+			extent[0] = Math.min(extent[0], row[minVarName]);
+			extent[1] = Math.max(extent[1], row[maxVarName]);
+			if (includeBeforeValues) {
+				extent[0] = Math.min(extent[0], row[`${minVarName}:pre`]);
+				extent[1] = Math.max(extent[1], row[`${maxVarName}:pre`]);
+			}
+		});
+	});
+	return extent;
+};
+
 // Consider provided reference object is ready if it is set to null explicitly or if it's value is available
 const isRefReady = (ref: Ref | null) => ref === null || Boolean(ref.value);
 
@@ -135,6 +164,29 @@ export function useCharts(
 		return getUnitsFromModelParts(model.value)[paramId] || '';
 	};
 
+	/**
+	 * Create a base forecast chart options that's common for different types of forecast charts.
+	 * @param setting ChartSetting
+	 * @returns ForecastChartOptions
+	 */
+	const createBaseForecastChartOptions = (setting: ChartSetting) => {
+		const variables = setting.selectedVariables;
+		const dateOptions = getVegaDateOptions(model?.value ?? null, <ModelConfiguration>modelConfig?.value || null);
+		const options: ForecastChartOptions = {
+			title: '',
+			legend: true,
+			width: chartSize.value.width,
+			height: chartSize.value.height,
+			translationMap: chartData.value?.translationMap || {},
+			xAxisTitle: getUnit('_time') || 'Time',
+			yAxisTitle: _.uniq(variables.map(getUnit).filter((v) => !!v)).join(',') || '',
+			dateOptions,
+			colorscheme: [BASE_GREY, setting.primaryColor ?? PRIMARY_COLOR],
+			scale: setting.scale
+		};
+		return options;
+	};
+
 	const createEnsembleVariableChartOptions = (
 		setting: ChartSettingEnsembleVariable,
 		modelConfigId = '',
@@ -195,6 +247,48 @@ export function useCharts(
 		return { statLayerVariables, sampleLayerVariables, options };
 	};
 
+	const createComparisonChartOptions = (
+		setting: ChartSettingComparison,
+		variableIndex = -1,
+		includeAllVars = false
+	) => {
+		const variables = setting.selectedVariables;
+		const options = createBaseForecastChartOptions(setting);
+
+		const sampleLayerVariables: string[] = [];
+		const statLayerVariables: string[] = [];
+
+		const colorScheme: string[] = [];
+
+		const varName = variables[variableIndex];
+		// If varName is provided (single chart from small multiples), include that specific variable in the chart
+		if (varName) {
+			if (setting.showBeforeAfter) {
+				sampleLayerVariables.push(`${chartData.value?.pyciemssMap[varName]}:pre`);
+				statLayerVariables.push(`${chartData.value?.pyciemssMap[varName]}_mean:pre`);
+				colorScheme.push(BASE_GREY);
+			}
+			sampleLayerVariables.push(`${chartData.value?.pyciemssMap[varName]}`);
+			statLayerVariables.push(`${chartData.value?.pyciemssMap[varName]}_mean`);
+			colorScheme.push(CATEGORICAL_SCHEME[variableIndex % CATEGORICAL_SCHEME.length]);
+		}
+		// Otherwise include all selected variables
+		else {
+			variables.forEach((v) => {
+				sampleLayerVariables.push(`${chartData.value?.pyciemssMap[v]}`);
+				statLayerVariables.push(`${chartData.value?.pyciemssMap[v]}_mean`);
+				if (includeAllVars) {
+					// For the options that's provided to the annotation generation, we need to include pre values as well
+					sampleLayerVariables.push(`${chartData.value?.pyciemssMap[v]}:pre`);
+					statLayerVariables.push(`${chartData.value?.pyciemssMap[v]}_mean:pre`);
+				}
+			});
+			colorScheme.push(...CATEGORICAL_SCHEME);
+		}
+		options.colorscheme = colorScheme;
+		return { statLayerVariables, sampleLayerVariables, options };
+	};
+
 	/**
 	 *
 	 * Create options for forecast charts based on chart settings and model configuration.
@@ -207,31 +301,15 @@ export function useCharts(
 	 */
 	const createForecastChartOptions = (setting: ChartSetting) => {
 		if (isChartSettingEnsembleVariable(setting)) return createEnsembleVariableChartOptions(setting, '', true, true);
+		if (isChartSettingComparisonVariable(setting)) return createComparisonChartOptions(setting, -1, true);
+
+		const options = createBaseForecastChartOptions(setting);
 		const variables = setting.selectedVariables;
-		const dateOptions = getVegaDateOptions(model?.value ?? null, <ModelConfiguration>modelConfig?.value || null);
-		const options: ForecastChartOptions = {
-			title: '',
-			legend: true,
-			width: chartSize.value.width,
-			height: chartSize.value.height,
-			translationMap: chartData.value?.translationMap || {},
-			xAxisTitle: getUnit('_time') || 'Time',
-			yAxisTitle: _.uniq(variables.map(getUnit).filter((v) => !!v)).join(',') || '',
-			dateOptions,
-			colorscheme: [BASE_GREY, setting.primaryColor ?? PRIMARY_COLOR],
-			scale: setting.scale
-		};
 
 		let sampleLayerVariables: string[] = [];
 		let statLayerVariables: string[] = [];
-		// Variable names for variable comparison charts
-		if (setting.type === ChartSettingType.VARIABLE_COMPARISON) {
-			statLayerVariables = variables.map((d) => `${chartData.value?.pyciemssMap[d]}_mean`);
-			sampleLayerVariables = variables.map((d) => `${chartData.value?.pyciemssMap[d]}`);
-			delete options.colorscheme;
-		}
 		// Variable names for compare dataset charts
-		else if (!_.isNil(chartData.value?.numComparableDatasets)) {
+		if (!_.isNil(chartData.value?.numComparableDatasets)) {
 			const varName = variables[0];
 			for (let i = 0; i < chartData.value.numComparableDatasets; i++) {
 				const rawVarName = chartData.value?.pyciemssMap[varName];
@@ -414,7 +492,6 @@ export function useCharts(
 	};
 
 	function createComparisonChart(
-		selectedVars,
 		result,
 		resultSummary,
 		statLayerVariables,
@@ -440,61 +517,45 @@ export function useCharts(
 			),
 			annotations
 		);
-		if (interventions?.value) {
-			_.keys(groupedInterventionOutputs.value).forEach((key) => {
-				if (selectedVars.includes(key)) {
-					chart.layer.push(...createInterventionChartMarkers(groupedInterventionOutputs.value[key]));
-				}
-			});
-		}
 		return chart;
 	}
 
 	// Create comparison charts based on chart settings
-	const useComparisonCharts = (chartSettings: ComputedRef<ChartSetting[]>) => {
+	const useComparisonCharts = (chartSettings: ComputedRef<ChartSettingComparison[]>) => {
 		const comparisonCharts = computed(() => {
 			const charts: Record<string, VisualizationSpec> = {};
 			if (!isChartReadyToBuild.value) return charts;
 			const { result, resultSummary } = chartData.value as ChartData;
-			const yMinExtent = 0;
 
 			chartSettings.value.forEach((setting) => {
 				const selectedVars = setting.selectedVariables;
-
-				const { statLayerVariables, sampleLayerVariables, options } = createForecastChartOptions(setting);
 				const annotations = getChartAnnotationsByChartId(setting.id);
-				if (setting.shareYAxis && setting.selectedVariables.length > 1) {
-					// find max y for each variable
-					let maxY = 0;
-					result.forEach((row) => {
-						setting.selectedVariables.forEach((selectedVar) => {
-							if (row[selectedVar] > maxY) {
-								maxY = row[selectedVar];
-							}
-						});
-					});
-					if (maxY && yMinExtent < maxY) {
-						options.yMinExtent = maxY;
-					}
-				}
 				if (setting.smallMultiples && setting.selectedVariables.length > 1) {
+					const sharedYExtent = setting.shareYAxis
+						? calculateYExtent(
+								resultSummary,
+								selectedVars.map((v) => chartData.value?.pyciemssMap[v] ?? ''),
+								Boolean(setting.showBeforeAfter)
+							)
+						: undefined;
 					// create multiples
-					options.width /= 2.1;
-					options.height /= 2.1;
 					selectedVars.forEach((selectedVar, index) => {
+						const { options, sampleLayerVariables, statLayerVariables } = createComparisonChartOptions(setting, index);
+						options.width /= 2.1;
+						options.height /= 2.1;
+						options.yExtent = sharedYExtent;
 						charts[setting.id + selectedVar] = createComparisonChart(
-							[selectedVar],
 							result,
 							resultSummary,
-							[statLayerVariables[index]],
-							[sampleLayerVariables[index]],
+							statLayerVariables,
+							sampleLayerVariables,
 							options,
 							annotations
 						);
 					});
 				} else {
+					const { options, sampleLayerVariables, statLayerVariables } = createComparisonChartOptions(setting);
 					const chart = createComparisonChart(
-						selectedVars,
 						result,
 						resultSummary,
 						statLayerVariables,
diff --git a/packages/client/hmi-client/src/services/chart-settings.ts b/packages/client/hmi-client/src/services/chart-settings.ts
index 8112a7c9e3..9c3649cd6b 100644
--- a/packages/client/hmi-client/src/services/chart-settings.ts
+++ b/packages/client/hmi-client/src/services/chart-settings.ts
@@ -4,6 +4,7 @@ import {
 	ChartSetting,
 	ChartSettingEnsembleVariable,
 	ChartSettingEnsembleVariableOptions,
+	ChartSettingComparison,
 	ChartSettingSensitivity,
 	ChartSettingType
 } from '@/types/common';
@@ -26,6 +27,10 @@ export function isChartSettingEnsembleVariable(setting: ChartSetting): setting i
 	return (<ChartSettingEnsembleVariable>setting).type === ChartSettingType.VARIABLE_ENSEMBLE;
 }
 
+export function isChartSettingComparisonVariable(setting: ChartSetting): setting is ChartSettingComparison {
+	return (<ChartSettingComparison>setting).type === ChartSettingType.VARIABLE_COMPARISON;
+}
+
 export const CHART_SETTING_WITH_QUANTILES_OPTIONS = [
 	ChartSettingType.VARIABLE_ENSEMBLE,
 	ChartSettingType.VARIABLE_COMPARISON,
diff --git a/packages/client/hmi-client/src/services/charts.ts b/packages/client/hmi-client/src/services/charts.ts
index f64cecf3d3..093619c1b4 100644
--- a/packages/client/hmi-client/src/services/charts.ts
+++ b/packages/client/hmi-client/src/services/charts.ts
@@ -51,7 +51,6 @@ interface BaseChartOptions {
 	autosize?: AUTOSIZE;
 	dateOptions?: DateOptions;
 	scale?: string;
-	yMinExtent?: number;
 }
 
 export interface DateOptions {
@@ -64,6 +63,7 @@ export interface ForecastChartOptions extends BaseChartOptions {
 	fitYDomain?: boolean;
 	legendProperties?: Record<string, any>;
 	bins?: Map<string, number[]>;
+	yExtent?: [number, number];
 }
 
 export interface ForecastChartLayer {
@@ -557,11 +557,12 @@ export function createForecastChart(
 		const encodingY: ChartEncoding = {
 			field: 'valueField',
 			type: 'quantitative',
-			axis: yaxis
+			axis: yaxis,
+			scale: {}
 		};
 
 		if (options.scale === 'log') {
-			encodingY.scale = { type: 'symlog' };
+			encodingY.scale.type = 'symlog';
 		}
 
 		if (options.fitYDomain && layer.data[0]) {
@@ -571,12 +572,14 @@ export function createForecastChart(
 				const yValues = [...layer.data].map((datum) => datum[yField]);
 				const domainMin = Math.min(...yValues);
 				const domainMax = Math.max(...yValues);
-				encodingY.scale = {
-					domain: [domainMin, domainMax]
-				};
+				encodingY.scale.domain = [domainMin, domainMax];
 			}
 		}
 
+		if (options.yExtent) {
+			encodingY.scale.domain = options.yExtent;
+		}
+
 		const encoding = {
 			x: encodingX,
 			y: encodingY,
@@ -1140,7 +1143,7 @@ export function createSimulateSensitivityScatter(samplingLayer: SensitivityChart
 					type: 'quantitative',
 					axis: {
 						gridColor: '#EEE',
-						domain: options.yMinExtent ? [0, options.yMinExtent] : undefined
+						domain: options.yExtent
 					},
 					scale: {
 						zero: false,
diff --git a/packages/client/hmi-client/src/types/common.ts b/packages/client/hmi-client/src/types/common.ts
index c50e589f23..264da5e5fe 100644
--- a/packages/client/hmi-client/src/types/common.ts
+++ b/packages/client/hmi-client/src/types/common.ts
@@ -191,7 +191,11 @@ export enum ChartSettingType {
 	SENSITIVITY = 'sensitivity'
 }
 
-export type ChartSetting = ChartSettingBase | ChartSettingEnsembleVariable | ChartSettingSensitivity;
+export type ChartSetting =
+	| ChartSettingBase
+	| ChartSettingEnsembleVariable
+	| ChartSettingSensitivity
+	| ChartSettingComparison;
 
 export interface ChartSettingEnsembleVariable extends ChartSettingBase, ChartSettingEnsembleVariableOptions {
 	type: ChartSettingType.VARIABLE_ENSEMBLE;
@@ -201,6 +205,14 @@ export interface ChartSettingSensitivity extends ChartSettingBase, ChartSettingS
 	type: ChartSettingType.SENSITIVITY;
 }
 
+export interface ChartSettingComparison extends ChartSettingBase {
+	type: ChartSettingType.VARIABLE_COMPARISON;
+	smallMultiples?: boolean;
+	shareYAxis?: boolean;
+	/** If true, also plot the pre-calibration or base simulation (without the intervention) data */
+	showBeforeAfter?: boolean;
+}
+
 export interface ChartSettingEnsembleVariableOptions {
 	showIndividualModels: boolean;
 	relativeToEnsemble: boolean;
@@ -218,8 +230,6 @@ export interface ChartSettingBase {
 	type: ChartSettingType;
 	primaryColor?: string;
 	scale?: string;
-	smallMultiples?: boolean;
-	shareYAxis?: boolean;
 	showQuantiles?: boolean;
 	quantiles?: number[];
 }