diff --git a/.env b/.env
index f4689022..212ebbcd 100644
--- a/.env
+++ b/.env
@@ -31,7 +31,7 @@ TS_PUBLIC_TYPESENSE_API_URL=https://typesense2.tradingstrategy.ai
 TS_PUBLIC_TYPESENSE_API_KEY=npdPPJNELDhdr7v6IS9rQUpFG2VvdyAL
 TS_PUBLIC_DISCORD_URL=https://discord.gg/5M88m9nM8H
 TS_PUBLIC_WALLET_CONNECT_PROJECT_ID=9ee7efad98897eb60ba023db6aa72355
-TS_PUBLIC_STRATEGIES='[{"id":"enzyme-polygon-matic-eth-usdc","name":"ETH-MATIC-USDC momentum","url":"https://enzyme-polygon-matic-eth-usdc.tradingstrategy.ai","frontpage":true},{"id":"enzyme-arbitrum-eth-btc-rsi","name":"ETH-BTC price surge (Arbitrum)","url":"https://enzyme-arbitrum-eth-btc-rsi.tradingstrategy.ai/","frontpage":true},{"id":"enzyme-polygon-eth-rolling-ratio","name":"ETH/BTC rolling ratio","url":"https://enzyme-polygon-eth-rolling-ratio.tradingstrategy.ai/","frontpage":true},{"id":"enzyme-polygon-eth-btc-rsi","name":"ETH-BTC price surge","url":"https://enzyme-polygon-eth-btc-rsi.tradingstrategy.ai/","frontpage":true,"hiddenPositions":[4]},{"id":"enzyme-ethereum-btc-eth-stoch-rsi","name":"Stochastic ETH/BTC long","url":"https://enzyme-ethereum-btc-eth-stoch-rsi.tradingstrategy.ai","frontpage":true},{"id":"enzyme-polygon-eth-btc-usdc","name":"ETH-BTC-USDC momentum","url":"https://enzyme-polygon-eth-btc-usdc.tradingstrategy.ai","new_version_id":"enzyme-polygon-eth-btc-rsi","frontpage":true},{"id":"enzyme-polygon-matic-usdc","name":"MATIC breakout","url":"https://enzyme-polygon-matic-usdc.tradingstrategy.ai"},{"id":"enzyme-polygon-eth-breakout","name":"ETH breakout","url":"https://enzyme-polygon-eth-breakout.tradingstrategy.ai"},{"id":"enzyme-polygon-eth-usdc","name":"ETH Breakout bounce","url":"https://enzyme-polygon-eth-usdc.tradingstrategy.ai"},{"id":"enzyme-polygon-eth-usdc-sls","name":"ETH Balance snap","url":"https://enzyme-polygon-eth-usdc-sls.tradingstrategy.ai"},{"id":"polygon-eth-spot-short","name":"ETH mean reversion bounce","url":"https://polygon-eth-spot-short.tradingstrategy.ai"},{"id":"arbitrum-btc-breakout","name":"BTC Barrier Breach","url":"https://arbitrum-btc-breakout.tradingstrategy.ai"}]'
+TS_PUBLIC_STRATEGIES='[{"id":"enzyme-polygon-matic-eth-usdc","name":"ETH-MATIC-USDC momentum","url":"https://enzyme-polygon-matic-eth-usdc.tradingstrategy.ai","frontpage":true},{"id":"enzyme-arbitrum-eth-btc-rsi","name":"ETH-BTC long swing","url":"https://enzyme-arbitrum-eth-btc-rsi.tradingstrategy.ai/","frontpage":true},{"id":"enzyme-polygon-eth-rolling-ratio","name":"ETH/BTC rolling ratio","url":"https://enzyme-polygon-eth-rolling-ratio.tradingstrategy.ai/","frontpage":true},{"id":"enzyme-ethereum-btc-eth-stoch-rsi","name":"Stochastic ETH-BTC","url":"https://enzyme-ethereum-btc-eth-stoch-rsi.tradingstrategy.ai","frontpage":true},{"id":"enzyme-polygon-matic-usdc","name":"MATIC Level crush","url":"https://enzyme-polygon-matic-usdc.tradingstrategy.ai"},{"id":"enzyme-polygon-eth-breakout","name":"ETH breakout","url":"https://enzyme-polygon-eth-breakout.tradingstrategy.ai"},{"id":"enzyme-polygon-eth-usdc","name":"ETH Breakout bounce","url":"https://enzyme-polygon-eth-usdc.tradingstrategy.ai"},{"id":"enzyme-polygon-eth-usdc-sls","name":"ETH Balance snap","url":"https://enzyme-polygon-eth-usdc-sls.tradingstrategy.ai"},{"id":"polygon-eth-spot-short","name":"ETH Mean Flip","url":"https://polygon-eth-spot-short.tradingstrategy.ai"},{"id":"arbitrum-btc-breakout","name":"BTC Barrier Breach","url":"https://arbitrum-btc-breakout.tradingstrategy.ai"},{"id":"ethereum-memecoin-swing","name":"ETH Memecoin Social Trend Spotter","url":"https://ethereum-memecoin-swing.tradingstrategy.ai"},{"id":"ethereum-memecoin-vol-basket","name":"Memecoin volatility index","url":"https://ethereum-memecoin-vol-basket.tradingstrategy.ai"},{"id":"enzyme-polygon-eth-btc-rsi","name":"ETH-BTC price surge","url":"https://enzyme-polygon-eth-btc-rsi.tradingstrategy.ai/","newVersionId":"enzyme-arbitrum-eth-btc-rsi","hiddenPositions":[4],"frontpage":true},{"id":"enzyme-polygon-eth-btc-usdc","name":"ETH-BTC-USDC momentum","url":"https://enzyme-polygon-eth-btc-usdc.tradingstrategy.ai","newVersionId":"enzyme-polygon-eth-btc-rsi","frontpage":true}]'
 TS_PUBLIC_GEO_BLOCK='{"strategies:view":["CU","IR","KP","RU","SY"],"strategies:deposit":["CU","IR","KP","RU","SY","US","UK"]}'
 # Uncomment to test chain maintenance error
 # TS_PUBLIC_CHAINS_UNDER_MAINTENANCE='{ "binance": "BNB Chain" }'
diff --git a/src/lib/chart/PerformanceChart.svelte b/src/lib/chart/PerformanceChart.svelte
index 594a7423..861ac191 100644
--- a/src/lib/chart/PerformanceChart.svelte
+++ b/src/lib/chart/PerformanceChart.svelte
@@ -15,51 +15,57 @@ Display a peformance line chart for a given (static) dataset.
 ```
 -->
 <script lang="ts">
-	import type { Quote, Periodicity } from '$lib/chart';
-	import { createEventDispatcher } from 'svelte';
+	import type { Quote } from '$lib/chart';
 	import { differenceInCalendarDays } from 'date-fns';
 	import { ChartIQ, Marker } from '$lib/chart';
 	import { Timestamp, UpDownCell } from '$lib/components';
 	import { determinePriceChangeClass } from '$lib/helpers/price';
+	import { relativeProfitability } from 'trade-executor/helpers/profit';
 	import { merge } from '$lib/helpers/object';
 
-	export let loading = false;
-	export let data: Quote[] = [];
-	export let options: any = undefined;
-	export let formatValue: Formatter<MaybeNumber>;
-	export let spanDays: MaybeNumber;
-	export let studies: any[] = [];
-	let initCallback: Function | undefined = undefined;
-	export { initCallback as init };
-	export let invalidate: any[] = [];
-
-	const dispatch = createEventDispatcher<{
-		change: {
-			first: Maybe<Quote>;
-			last: Maybe<Quote>;
-			firstTickPosition: number;
-		};
-	}>();
+	type Props = {
+		loading?: boolean;
+		data?: Quote[];
+		options?: object;
+		formatValue: Formatter<MaybeNumber>;
+		spanDays: MaybeNumber;
+		studies?: any[];
+		invalidate?: any[];
+		init?: (arg: any) => () => void;
+		onPeriodPerformanceChange?: (value: MaybeNumber) => void;
+	};
+
+	let {
+		loading = false,
+		data = [],
+		options,
+		formatValue,
+		spanDays,
+		studies = [],
+		invalidate = [],
+		init: initCallback,
+		onPeriodPerformanceChange
+	}: Props = $props();
 
 	let chartWrapper: HTMLElement;
 
-	let viewportWidth: number;
-	$: hideYAxis = viewportWidth <= 576;
+	let viewportWidth = $state() as number;
+	let hideYAxis = $derived(viewportWidth <= 576);
 
-	// if spanDays is not set, assume "max" (full data range)
-	$: if (spanDays === undefined) {
+	// set displayDays to spanDays if set; otherwise max data range
+	let displayDays = $derived.by(() => {
+		if (spanDays) return spanDays;
 		const start = data[0]?.DT;
-		spanDays = start ? differenceInCalendarDays(new Date(), start) : 0;
-	}
-
-	$: periodicity = getPeriodicity(spanDays!);
-
-	function getPeriodicity(days: number): Periodicity {
-		if (days <= 7) return { period: 1, interval: 1, timeUnit: 'hour' };
-		if (days <= 30) return { period: 4, interval: 1, timeUnit: 'hour' };
-		if (days <= 365) return { period: 1, interval: 1, timeUnit: 'day' };
+		return start ? differenceInCalendarDays(new Date(), start) : 0;
+	});
+
+	// dynamically set periodicity based on number of days displayed
+	let periodicity = $derived.by(() => {
+		if (displayDays <= 7) return { period: 1, interval: 1, timeUnit: 'hour' };
+		if (displayDays <= 30) return { period: 4, interval: 1, timeUnit: 'hour' };
+		if (displayDays <= 365) return { period: 1, interval: 1, timeUnit: 'day' };
 		return { period: 7, interval: 1, timeUnit: 'day' };
-	}
+	});
 
 	const defaultOptions = {
 		layout: { chartType: 'mountain' },
@@ -79,11 +85,22 @@ Display a peformance line chart for a given (static) dataset.
 		// update chart colors based on change in value (+/-) for visible data set
 		chartEngine.append('createDataSegment', () => {
 			const dataSegment = chartEngine.getDataSegment();
-			const first = chartEngine.getFirstLastDataRecord(dataSegment, 'Close');
-			const last = chartEngine.getFirstLastDataRecord(dataSegment, 'Close', true);
-			const direction = determinePriceChangeClass(last?.Close - first?.Close);
+			const first = chartEngine.getFirstLastDataRecord(dataSegment, 'Value');
+			const last = chartEngine.getFirstLastDataRecord(dataSegment, 'Value', true);
 			const firstTickPosition = chartEngine.pixelFromTick(0);
 
+			let initialValue = first?.Value;
+
+			// if max timeframe OR first tick is after start of displayed chart window
+			// use initial value of 0 instead of first quote value (since chart data does
+			// not always start at 0)
+			if (!spanDays || firstTickPosition > 0) {
+				initialValue = 0;
+			}
+
+			const direction = determinePriceChangeClass(last?.Value - initialValue);
+			const periodPerformance = relativeProfitability(initialValue, last?.Value);
+
 			// NOTE: setting attribute selector on HTML element rather than declaratively via
 			// Svelte template; needed to prevent race condition / ensure colors update correctly.
 			if (chartWrapper.dataset.direction !== direction) {
@@ -91,7 +108,7 @@ Display a peformance line chart for a given (static) dataset.
 				chartEngine.clearStyles();
 			}
 
-			dispatch('change', { first, last, firstTickPosition });
+			onPeriodPerformanceChange?.(periodPerformance);
 		});
 
 		const updateCallback = initCallback?.(chartEngine);
@@ -105,7 +122,7 @@ Display a peformance line chart for a given (static) dataset.
 
 			chartEngine.setSpan({
 				base: 'day',
-				multiplier: spanDays,
+				multiplier: displayDays,
 				goIntoPast: true
 			});
 
diff --git a/src/lib/chart/helpers.ts b/src/lib/chart/helpers.ts
index 024defac..ea1e2b1a 100644
--- a/src/lib/chart/helpers.ts
+++ b/src/lib/chart/helpers.ts
@@ -50,7 +50,7 @@ export function isCandleTimeBucket(value: MaybeString): value is CandleTimeBucke
  * @param interval A d3 time interval
  */
 export function normalizeDataForInterval(data: RawTick[], interval: TimeInterval) {
-	return data.reduce((acc, [ts, Value]) => {
+	const normalized = data.reduce((acc, [ts, Value]) => {
 		const date = parseDate(ts);
 		if (!date) return acc;
 		const normalizedDate = interval.floor(date);
@@ -61,6 +61,14 @@ export function normalizeDataForInterval(data: RawTick[], interval: TimeInterval
 		acc.push({ DT: normalizedDate, Value });
 		return acc;
 	}, [] as Quote[]);
+
+	// prepend entry for prior interval (if needed) so starting value doesn't get swallowed
+	if (data[0] && normalized[0] && data[0][1] !== normalized[0].Value) {
+		const priorInterval = interval.offset(normalized[0].DT as Date, -1);
+		normalized.unshift({ DT: priorInterval, Value: data[0][1] });
+	}
+
+	return normalized;
 }
 
 export function rawTicksToQuotes(data: RawTick[]): Quote[] {
diff --git a/src/lib/trade-executor/components/StrategyIcon.svelte b/src/lib/trade-executor/components/StrategyIcon.svelte
index dfc04cee..9121595c 100644
--- a/src/lib/trade-executor/components/StrategyIcon.svelte
+++ b/src/lib/trade-executor/components/StrategyIcon.svelte
@@ -6,7 +6,7 @@
 	const localIconUrl = `/avatars/${strategy.id}.webp`;
 	const strategyIconUrl = strategy.icon_url?.replace(/^http:/, 'https:');
 	const dataUrl = strategy.connected ? localIconUrl : strategyIconUrl;
-	const outdated = Boolean(strategy.new_version_id);
+	const outdated = Boolean(strategy.newVersionId);
 </script>
 
 <div class="strategy-icon" class:outdated>
diff --git a/src/lib/trade-executor/schemas/configuration.ts b/src/lib/trade-executor/schemas/configuration.ts
index cb8111f5..aa587ecb 100644
--- a/src/lib/trade-executor/schemas/configuration.ts
+++ b/src/lib/trade-executor/schemas/configuration.ts
@@ -6,7 +6,7 @@ export const strategyConfigurationSchema = z.object({
 	id: z.string(),
 	name: z.string(),
 	url: z.string().url(),
-	new_version_id: z.string().optional(),
+	newVersionId: z.string().optional(),
 	hiddenPositions: primaryKey.array().default([]),
 	frontpage: z.boolean().default(false),
 	microsite: z.boolean().default(false),
diff --git a/src/lib/wallet/MyDeposits.svelte b/src/lib/wallet/MyDeposits.svelte
index ed212734..f84f155e 100644
--- a/src/lib/wallet/MyDeposits.svelte
+++ b/src/lib/wallet/MyDeposits.svelte
@@ -39,7 +39,7 @@
 		contracts.fund_value_calculator
 	].every(Boolean);
 
-	const isOutdated = Boolean(strategy.new_version_id);
+	const isOutdated = Boolean(strategy.newVersionId);
 
 	$: connected = $wallet.isConnected;
 	$: wrongNetwork = connected && $wallet.chain?.id !== chain.id;
diff --git a/src/routes/strategies/StrategyTile.svelte b/src/routes/strategies/StrategyTile.svelte
index e69a9f95..edb4ac79 100644
--- a/src/routes/strategies/StrategyTile.svelte
+++ b/src/routes/strategies/StrategyTile.svelte
@@ -78,7 +78,7 @@
 					<DataBadge status="success">live</DataBadge>
 				{/if}
 
-				{#if isNew && !strategy.new_version_id}
+				{#if isNew && !strategy.newVersionId}
 					<DataBadge status="success">new</DataBadge>
 				{/if}
 
@@ -88,12 +88,12 @@
 					{/each}
 				{/if}
 
-				{#if !simplified && strategy.new_version_id}
+				{#if !simplified && strategy.newVersionId}
 					<Tooltip>
 						<DataBadge slot="trigger" status="error">Outdated</DataBadge>
 						<svelte:fragment slot="popup">
 							This is an outdated strategy. An updated version is available
-							<a href="/strategies/{strategy.new_version_id}">here</a>.
+							<a href="/strategies/{strategy.newVersionId}">here</a>.
 						</svelte:fragment>
 					</Tooltip>
 				{/if}
diff --git a/src/routes/strategies/[strategy]/+layout.svelte b/src/routes/strategies/[strategy]/+layout.svelte
index eeaf6984..b03bd9ab 100644
--- a/src/routes/strategies/[strategy]/+layout.svelte
+++ b/src/routes/strategies/[strategy]/+layout.svelte
@@ -20,7 +20,7 @@
 	$: isPrivate = !strategy.tags.includes('live');
 	$: isOverviewPage = $page.url.pathname.endsWith(strategy.id);
 	$: hasError = shouldDisplayError(strategy, admin);
-	$: isOutdated = Boolean(strategy.new_version_id);
+	$: isOutdated = Boolean(strategy.newVersionId);
 	$: displayWarning = isOverviewPage && (hasError || isOutdated);
 
 	$: breadcrumbs = {
@@ -73,9 +73,9 @@
 					<AlertList status="warning" size="md" let:AlertItem>
 						<AlertItem title="Outdated strategy" displayWhen={isOutdated}>
 							You are viewing an outdated version of this strategy. An updated version is available
-							<a href="/strategies/{strategy.new_version_id}" data-sveltekit-reload>here</a>. To maximize future
-							returns, participants should consider tranfering deposits to the latest version (though there is no
-							guarantee of better performance).
+							<a href="/strategies/{strategy.newVersionId}" data-sveltekit-reload>here</a>. To maximize future returns,
+							participants should consider tranfering deposits to the latest version (though there is no guarantee of
+							better performance).
 						</AlertItem>
 						<AlertItem title="Ongoing execution issues" displayWhen={hasError}>
 							<StrategyError {strategy} />
diff --git a/src/routes/strategies/[strategy]/+page.svelte b/src/routes/strategies/[strategy]/+page.svelte
index ad4b3f82..128ddc1d 100644
--- a/src/routes/strategies/[strategy]/+page.svelte
+++ b/src/routes/strategies/[strategy]/+page.svelte
@@ -1,24 +1,8 @@
 <script lang="ts">
-	import type { CIQ } from 'chartiq/js/standard';
-	import type { ComponentEvents } from 'svelte';
-	import type { Candle, Quote, QuoteFeed, RawTick } from '$lib/chart';
-	import {
-		quoteFeed,
-		normalizeDataForInterval,
-		periodicityToTimeBucket,
-		ChartContainer,
-		PerformanceChart
-	} from '$lib/chart';
-	import { getChartClient } from 'trade-executor/chart';
 	import MyDeposits from '$lib/wallet/MyDeposits.svelte';
-	import { UpDownCell } from '$lib/components';
 	import SummaryMetrics from './SummaryMetrics.svelte';
-	import { formatPercent } from '$lib/helpers/formatters';
-	import { formatProfitability } from 'trade-executor/helpers/formatters';
-	import { relativeProfitability } from 'trade-executor/helpers/profit';
+	import StrategyPerformanceChart from './StrategyPerformanceChart.svelte';
 	import { isGeoBlocked } from '$lib/helpers/geo';
-	import { type BenchmarkToken, getBenchmarkTokens } from 'trade-executor/helpers/benchmarks';
-	import { differenceInCalendarDays } from 'date-fns';
 
 	export let data;
 	const { chain, strategy, admin, ipCountry } = data;
@@ -26,139 +10,6 @@
 	const backtestLink = `/strategies/${strategy.id}/backtest`;
 	const keyMetrics = strategy.summary_statistics.key_metrics;
 	const geoBlocked = !admin && isGeoBlocked('strategies:deposit', ipCountry);
-	const periodPerformance: Record<string, MaybeNumber> = {};
-
-	type ChartChangeDetail = ComponentEvents<PerformanceChart>['change']['detail'];
-
-	function getPeriodPerformance({ first, last, firstTickPosition }: ChartChangeDetail, spanDays: MaybeNumber) {
-		if (!first) return undefined;
-
-		let initialValue = first.Close;
-
-		// if max timeframe OR first tick is after start of displayed chart window
-		// use initial value of 0 instead of first quote value (since chart data does
-		// not always start at 0)
-		if (!spanDays || firstTickPosition > 0) {
-			initialValue = 0;
-		}
-
-		return relativeProfitability(initialValue, last?.Close);
-	}
-
-	const chartClient = getChartClient(fetch, strategy.url);
-
-	chartClient.fetch({
-		type: 'compounding_unrealised_trading_profitability_sampled',
-		source: 'live_trading'
-	});
-
-	$: initialTimeframe = getInitialTimeframe($chartClient.data);
-
-	function getInitialTimeframe(data: RawTick[] | undefined) {
-		const firstTs = data?.[0]?.[0] as number | undefined;
-		if (firstTs === undefined) return '3M';
-		const age = differenceInCalendarDays(new Date(), firstTs * 1000);
-		return age <= 7 ? '1W' : age <= 30 ? '1M' : '3M';
-	}
-
-	const benchmarkTokens = getBenchmarkTokens(strategy);
-	let selectedBenchmarks = benchmarkTokens.map((t) => t.symbol);
-	let benchmarksUpdating = 0;
-
-	$: loading = $chartClient.loading || benchmarksUpdating > 0;
-
-	function updateBenchmark(chartEngine: CIQ.ChartEngine, feed: QuoteFeed, token: BenchmarkToken) {
-		// remove benchmark series if it exists
-		chartEngine.removeSeries(token.symbol);
-
-		// clear benchmark period performance and abort if benchmark not selected
-		if (!selectedBenchmarks.includes(token.symbol)) {
-			periodPerformance[token.symbol] = undefined;
-			return;
-		}
-
-		benchmarksUpdating++;
-
-		const periodicity = chartEngine.getPeriodicity();
-		const timeBucket = periodicityToTimeBucket(periodicity)!;
-
-		const symbolObject = {
-			symbol: token.symbol,
-			urlParams: { pair_id: token.pairId, exchange_type: 'uniswap_v3', time_bucket: timeBucket }
-		};
-
-		chartEngine.attachQuoteFeed(feed, {});
-
-		chartEngine.addSeries(
-			token.symbol,
-			{
-				symbolObject,
-				shareYAxis: true,
-				color: token.color,
-				opacity: 0.5,
-				overChart: false,
-				fillGaps: true
-			},
-			(_: any, { lastQuote }: { lastQuote?: Quote }) => {
-				benchmarksUpdating--;
-
-				// update benchmark period performance
-				if (lastQuote) {
-					periodPerformance[token.symbol] = lastQuote?.percentChange;
-				}
-			}
-		);
-
-		chartEngine.detachQuoteFeed(feed);
-	}
-
-	function init(chartEngine: any) {
-		// disable series highlighting on-hover
-		chartEngine.findHighlights = () => {};
-
-		// create quote feed to be used for updating benchmarks
-		const feed = quoteFeed('candles', { candle_type: 'price' }, (data: Record<string, Candle[]>) => {
-			const dataSegment = chartEngine.getDataSegment();
-			const first = chartEngine.getFirstLastDataRecord(dataSegment, 'Close')!;
-			const last = chartEngine.getFirstLastDataRecord(dataSegment, 'Close', true)!;
-
-			let candles = Object.values(data)[0] ?? [];
-
-			// filter candles to match date range of strategy series
-			candles = candles.filter(({ ts }) => {
-				const d = new Date(`${ts}Z`);
-				return d >= first.DT && d <= last.DT;
-			});
-
-			const initialValue = candles[0]?.c ?? 0;
-
-			return candles.map(({ ts, c }: Candle) => {
-				const percentChange = (c - initialValue) / initialValue;
-				return {
-					DT: `${ts}Z`,
-					percentChange: percentChange,
-					Close: percentChange + first.Close
-				};
-			});
-		});
-
-		return () => {
-			if ($chartClient.loading) return;
-			benchmarksUpdating = 0;
-			benchmarkTokens.forEach((token) => updateBenchmark(chartEngine, feed, token));
-		};
-	}
-
-	const chartOptions = {
-		controls: { home: null },
-		allowScroll: false,
-		allowZoom: false,
-		xaxisHeight: 20,
-		chart: {
-			xAxis: { displayBorder: false, fitLeftToRight: true },
-			yAxis: { noDraw: true }
-		}
-	};
 </script>
 
 <svelte:head>
@@ -168,41 +19,7 @@
 
 <div class="strategy-overview-page">
 	<MyDeposits {strategy} {chain} {geoBlocked} {ipCountry} />
-
-	<div class="chart">
-		<ChartContainer selected={initialTimeframe} let:timeSpan={{ spanDays, interval }}>
-			<div class="period-performance" slot="title" let:timeSpan={{ performanceLabel }}>
-				{#if periodPerformance[strategy.id] !== undefined}
-					<UpDownCell value={periodPerformance[strategy.id]} formatter={formatProfitability} />
-					{performanceLabel}
-				{/if}
-			</div>
-
-			<PerformanceChart
-				options={chartOptions}
-				{loading}
-				data={normalizeDataForInterval($chartClient.data ?? [], interval)}
-				formatValue={formatPercent}
-				{spanDays}
-				{init}
-				invalidate={[selectedBenchmarks]}
-				on:change={(e) => (periodPerformance[strategy.id] = getPeriodPerformance(e.detail, spanDays))}
-			/>
-
-			<footer class="benchmark-tokens" slot="footer">
-				{#each benchmarkTokens as { symbol, color }}
-					<label style:color>
-						<input type="checkbox" name="benchmarks" value={symbol} bind:group={selectedBenchmarks} />
-						{symbol}
-						<span class="performance" class:skeleton={loading && selectedBenchmarks.includes(symbol)}>
-							{formatPercent(periodPerformance[symbol], 1, 1, { signDisplay: 'exceptZero' })}
-						</span>
-					</label>
-				{/each}
-			</footer>
-		</ChartContainer>
-	</div>
-
+	<StrategyPerformanceChart {strategy} />
 	<SummaryMetrics {keyMetrics} {backtestLink} />
 </div>
 
@@ -227,72 +44,5 @@
 				grid-column: 1 / -1;
 			}
 		}
-
-		.chart {
-			:global([data-css-props]) {
-				--chart-aspect-ratio: 3.25;
-
-				@media (--viewport-sm-down) {
-					--chart-aspect-ratio: 2.25;
-				}
-
-				@media (--viewport-xs) {
-					--chart-aspect-ratio: 1.75;
-				}
-			}
-
-			:global(.stx_xaxis) {
-				color: transparent;
-			}
-
-			:global(.stx_xaxis_dark) {
-				color: var(--c-text-extra-light);
-			}
-		}
-
-		.period-performance {
-			:global([data-css-props]) {
-				--up-down-font: var(--f-ui-lg-medium);
-				--up-down-letter-spacing: var(--ls-ui-lg);
-
-				@media (--viewport-md-down) {
-					--up-down-font: var(--f-ui-md-medium);
-					--up-down-letter-spacing: var(--ls-ui-md);
-				}
-			}
-
-			display: flex;
-			gap: 1em;
-			align-items: center;
-			font: var(--f-ui-sm-medium);
-			letter-spacing: var(--ls-ui-sm);
-			color: var(--c-text-extra-light);
-		}
-
-		.benchmark-tokens {
-			margin-top: 0.75rem;
-			margin-bottom: -0.25rem;
-			display: flex;
-			gap: 1rem;
-			justify-content: center;
-
-			label {
-				display: flex;
-				gap: 0.25rem;
-				align-items: center;
-				font: var(--f-ui-sm-medium);
-				letter-spacing: var(--ls-ui-sm);
-			}
-
-			input[type='checkbox'] {
-				color: inherit;
-				accent-color: currentColor;
-			}
-
-			.performance {
-				font: var(--f-ui-sm-roman);
-				min-width: 4ch;
-			}
-		}
 	}
 </style>
diff --git a/src/routes/strategies/[strategy]/StrategyPerformanceChart.svelte b/src/routes/strategies/[strategy]/StrategyPerformanceChart.svelte
new file mode 100644
index 00000000..d587e109
--- /dev/null
+++ b/src/routes/strategies/[strategy]/StrategyPerformanceChart.svelte
@@ -0,0 +1,242 @@
+<script lang="ts">
+	import type { ConnectedStrategyInfo } from 'trade-executor/models/strategy-info';
+	import type { CIQ } from 'chartiq/js/standard';
+	import type { Candle, Quote, QuoteFeed } from '$lib/chart';
+	import {
+		quoteFeed,
+		normalizeDataForInterval,
+		periodicityToTimeBucket,
+		ChartContainer,
+		PerformanceChart
+	} from '$lib/chart';
+	import { getChartClient } from 'trade-executor/chart';
+	import { type BenchmarkToken, getBenchmarkTokens } from 'trade-executor/helpers/benchmarks';
+	import { differenceInCalendarDays } from 'date-fns';
+	import { UpDownCell } from '$lib/components';
+	import { formatPercent } from '$lib/helpers/formatters';
+	import { formatProfitability } from 'trade-executor/helpers/formatters';
+
+	type Props = {
+		strategy: ConnectedStrategyInfo;
+	};
+
+	let { strategy }: Props = $props();
+
+	const chartClient = getChartClient(fetch, strategy.url);
+
+	const periodPerformance: Record<string, MaybeNumber> = $state({});
+
+	const benchmarkTokens = getBenchmarkTokens(strategy);
+	let selectedBenchmarks = $state(benchmarkTokens.map((t) => t.symbol));
+	let benchmarksUpdating = $state(0);
+
+	let loading = $derived($chartClient.loading || benchmarksUpdating > 0);
+
+	let initialTimeframe = $derived.by(() => {
+		const firstTs = $chartClient.data?.[0]?.[0] as number | undefined;
+		if (firstTs === undefined) return '3M';
+		const age = differenceInCalendarDays(new Date(), firstTs * 1000);
+		return age <= 7 ? '1W' : age <= 30 ? '1M' : '3M';
+	});
+
+	chartClient.fetch({
+		type: 'compounding_unrealised_trading_profitability_sampled',
+		source: 'live_trading'
+	});
+
+	function updateBenchmark(chartEngine: CIQ.ChartEngine, feed: QuoteFeed, token: BenchmarkToken) {
+		// remove benchmark series if it exists
+		chartEngine.removeSeries(token.symbol);
+
+		// clear benchmark period performance and abort if benchmark not selected
+		if (!selectedBenchmarks.includes(token.symbol)) {
+			periodPerformance[token.symbol] = undefined;
+			return;
+		}
+
+		benchmarksUpdating++;
+
+		const periodicity = chartEngine.getPeriodicity();
+		const timeBucket = periodicityToTimeBucket(periodicity)!;
+
+		const symbolObject = {
+			symbol: token.symbol,
+			urlParams: { pair_id: token.pairId, exchange_type: 'uniswap_v3', time_bucket: timeBucket }
+		};
+
+		chartEngine.attachQuoteFeed(feed, {});
+
+		chartEngine.addSeries(
+			token.symbol,
+			{
+				symbolObject,
+				shareYAxis: true,
+				color: token.color,
+				opacity: 0.5,
+				overChart: false,
+				fillGaps: true
+			},
+			(_: any, { lastQuote }: { lastQuote?: Quote }) => {
+				benchmarksUpdating--;
+
+				// update benchmark period performance
+				if (lastQuote) {
+					periodPerformance[token.symbol] = lastQuote?.percentChange;
+				}
+			}
+		);
+
+		chartEngine.detachQuoteFeed(feed);
+	}
+
+	function init(chartEngine: any) {
+		// disable series highlighting on-hover
+		chartEngine.findHighlights = () => {};
+
+		// create quote feed to be used for updating benchmarks
+		const feed = quoteFeed('candles', { candle_type: 'price' }, (data: Record<string, Candle[]>) => {
+			const dataSegment = chartEngine.getDataSegment();
+			const first = chartEngine.getFirstLastDataRecord(dataSegment, 'Close')!;
+			const last = chartEngine.getFirstLastDataRecord(dataSegment, 'Close', true)!;
+
+			let candles = Object.values(data)[0] ?? [];
+
+			// filter candles to match date range of strategy series
+			candles = candles.filter(({ ts }) => {
+				const d = new Date(`${ts}Z`);
+				return d >= first.DT && d <= last.DT;
+			});
+
+			const initialValue = candles[0]?.c ?? 0;
+
+			return candles.map(({ ts, c }: Candle) => {
+				const percentChange = (c - initialValue) / initialValue;
+				return {
+					DT: `${ts}Z`,
+					percentChange: percentChange,
+					Close: percentChange + first.Close
+				};
+			});
+		});
+
+		return () => {
+			if ($chartClient.loading) return;
+			benchmarksUpdating = 0;
+			benchmarkTokens.forEach((token) => updateBenchmark(chartEngine, feed, token));
+		};
+	}
+
+	const chartOptions = {
+		controls: { home: null },
+		allowScroll: false,
+		allowZoom: false,
+		xaxisHeight: 20,
+		chart: {
+			xAxis: { displayBorder: false, fitLeftToRight: true },
+			yAxis: { noDraw: true }
+		}
+	};
+</script>
+
+<div class="strategy-performance-chart">
+	<ChartContainer selected={initialTimeframe} let:timeSpan={{ spanDays, interval }}>
+		<div class="period-performance" slot="title" let:timeSpan={{ performanceLabel }}>
+			{#if periodPerformance[strategy.id] !== undefined}
+				<UpDownCell value={periodPerformance[strategy.id]} formatter={formatProfitability} />
+				{performanceLabel}
+			{/if}
+		</div>
+
+		<PerformanceChart
+			options={chartOptions}
+			{loading}
+			data={normalizeDataForInterval($chartClient.data ?? [], interval)}
+			formatValue={formatPercent}
+			{spanDays}
+			{init}
+			invalidate={[selectedBenchmarks]}
+			onPeriodPerformanceChange={(value) => (periodPerformance[strategy.id] = value)}
+		/>
+
+		<footer class="benchmark-tokens" slot="footer">
+			{#each benchmarkTokens as { symbol, color }}
+				<label style:color>
+					<input type="checkbox" name="benchmarks" value={symbol} bind:group={selectedBenchmarks} />
+					{symbol}
+					<span class="performance" class:skeleton={loading && selectedBenchmarks.includes(symbol)}>
+						{formatPercent(periodPerformance[symbol], 1, 1, { signDisplay: 'exceptZero' })}
+					</span>
+				</label>
+			{/each}
+		</footer>
+	</ChartContainer>
+</div>
+
+<style>
+	.strategy-performance-chart {
+		:global([data-css-props]) {
+			--chart-aspect-ratio: 3.25;
+
+			@media (--viewport-sm-down) {
+				--chart-aspect-ratio: 2.25;
+			}
+
+			@media (--viewport-xs) {
+				--chart-aspect-ratio: 1.75;
+			}
+		}
+
+		:global(.stx_xaxis) {
+			color: transparent;
+		}
+
+		:global(.stx_xaxis_dark) {
+			color: var(--c-text-extra-light);
+		}
+	}
+
+	.period-performance {
+		:global([data-css-props]) {
+			--up-down-font: var(--f-ui-lg-medium);
+			--up-down-letter-spacing: var(--ls-ui-lg);
+
+			@media (--viewport-md-down) {
+				--up-down-font: var(--f-ui-md-medium);
+				--up-down-letter-spacing: var(--ls-ui-md);
+			}
+		}
+
+		display: flex;
+		gap: 1em;
+		align-items: center;
+		font: var(--f-ui-sm-medium);
+		letter-spacing: var(--ls-ui-sm);
+		color: var(--c-text-extra-light);
+	}
+
+	.benchmark-tokens {
+		margin-top: 0.75rem;
+		margin-bottom: -0.25rem;
+		display: flex;
+		gap: 1rem;
+		justify-content: center;
+
+		label {
+			display: flex;
+			gap: 0.25rem;
+			align-items: center;
+			font: var(--f-ui-sm-medium);
+			letter-spacing: var(--ls-ui-sm);
+		}
+
+		input[type='checkbox'] {
+			color: inherit;
+			accent-color: currentColor;
+		}
+
+		.performance {
+			font: var(--f-ui-sm-roman);
+			min-width: 4ch;
+		}
+	}
+</style>