diff --git a/package-lock.json b/package-lock.json
index 28b37e690..fbf4525c8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -19,8 +19,7 @@
         "bignumber.js": "^9.1.2",
         "cheerio": "^1.0.0-rc.12",
         "cookie": "^0.5.0",
-        "d3-array": "^3.2.3",
-        "d3-scale": "^4.0.2",
+        "d3-time": "^3.1.0",
         "date-fns": "^2.29.3",
         "dd-trace": "^4.15.0",
         "devalue": "^4.3.2",
@@ -43,6 +42,7 @@
         "@testing-library/jest-dom": "^6.1.2",
         "@testing-library/svelte": "^4.0.3",
         "@testing-library/user-event": "^14.4.3",
+        "@types/d3-time": "^3.0.2",
         "@types/plotly.js": "^2.12.21",
         "@typescript-eslint/eslint-plugin": "^5.62.0",
         "@typescript-eslint/parser": "^5.62.0",
@@ -2851,6 +2851,12 @@
       "resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.5.1.tgz",
       "integrity": "sha512-COUnqfB2+ckwXXSFInsFdOAWQzCCx+a5hq2ruyj+Vjund94RJQd4LG2u9hnvJrTgunKAaax7ancBYlDrNYxA0g=="
     },
+    "node_modules/@types/d3-time": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@types/d3-time/-/d3-time-3.0.2.tgz",
+      "integrity": "sha512-kbdRXTmUgNfw5OTE3KZnFQn6XdIc4QGroN5UixgdrXATmYsdlPQS6pEut9tVlIojtzuFD4txs/L+Rq41AHtLpg==",
+      "dev": true
+    },
     "node_modules/@types/debug": {
       "version": "4.1.8",
       "resolved": "https://registry.npmjs.org/@types/debug/-/debug-4.1.8.tgz",
@@ -4987,48 +4993,6 @@
         "node": ">=12"
       }
     },
-    "node_modules/d3-color": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-3.1.0.tgz",
-      "integrity": "sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==",
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/d3-format": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/d3-format/-/d3-format-3.1.0.tgz",
-      "integrity": "sha512-YyUI6AEuY/Wpt8KWLgZHsIU86atmikuoOmCfommt0LYHiQSPjvX2AcFc38PX0CBpr2RCyZhjex+NS/LPOv6YqA==",
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/d3-interpolate": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-3.0.1.tgz",
-      "integrity": "sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==",
-      "dependencies": {
-        "d3-color": "1 - 3"
-      },
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/d3-scale": {
-      "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-4.0.2.tgz",
-      "integrity": "sha512-GZW464g1SH7ag3Y7hXjf8RoUuAFIqklOAq3MRl4OaWabTFJY9PN/E1YklhXLh+OQ3fM9yS2nOkCoS+WLZ6kvxQ==",
-      "dependencies": {
-        "d3-array": "2.10.0 - 3",
-        "d3-format": "1 - 3",
-        "d3-interpolate": "1.2.0 - 3",
-        "d3-time": "2.1.1 - 3",
-        "d3-time-format": "2 - 4"
-      },
-      "engines": {
-        "node": ">=12"
-      }
-    },
     "node_modules/d3-time": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/d3-time/-/d3-time-3.1.0.tgz",
@@ -5040,17 +5004,6 @@
         "node": ">=12"
       }
     },
-    "node_modules/d3-time-format": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/d3-time-format/-/d3-time-format-4.1.0.tgz",
-      "integrity": "sha512-dJxPBlzC7NugB2PDLwo9Q8JiTR3M3e4/XANkreKSUxF8vvXKqm1Yfq4Q5dl8budlunRVlUUaDUgFt7eA8D6NLg==",
-      "dependencies": {
-        "d3-time": "1 - 3"
-      },
-      "engines": {
-        "node": ">=12"
-      }
-    },
     "node_modules/data-urls": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/data-urls/-/data-urls-4.0.0.tgz",
diff --git a/package.json b/package.json
index 72ed5ecdf..f6ffe751f 100644
--- a/package.json
+++ b/package.json
@@ -28,6 +28,7 @@
     "@testing-library/jest-dom": "^6.1.2",
     "@testing-library/svelte": "^4.0.3",
     "@testing-library/user-event": "^14.4.3",
+    "@types/d3-time": "^3.0.2",
     "@types/plotly.js": "^2.12.21",
     "@typescript-eslint/eslint-plugin": "^5.62.0",
     "@typescript-eslint/parser": "^5.62.0",
@@ -61,8 +62,7 @@
     "bignumber.js": "^9.1.2",
     "cheerio": "^1.0.0-rc.12",
     "cookie": "^0.5.0",
-    "d3-array": "^3.2.3",
-    "d3-scale": "^4.0.2",
+    "d3-time": "^3.1.0",
     "date-fns": "^2.29.3",
     "dd-trace": "^4.15.0",
     "devalue": "^4.3.2",
diff --git a/src/lib/chart/ChartIQ.svelte b/src/lib/chart/ChartIQ.svelte
index 19ed8218d..8c241bb7f 100644
--- a/src/lib/chart/ChartIQ.svelte
+++ b/src/lib/chart/ChartIQ.svelte
@@ -59,6 +59,7 @@ Dynamically ChartIQ modules (if available) and render chart element.
 <script lang="ts">
 	import { fade } from 'svelte/transition';
 	import { lightFormat as formatDate } from 'date-fns';
+	import { floorUTCDate, addUTCDays } from '$lib/helpers/date';
 	import { type ChartLinker, type QuoteFeed, ChartActivityTracker } from '$lib/chart';
 	import { Alert } from '$lib/components';
 	import Spinner from 'svelte-spinner';
@@ -125,7 +126,12 @@ Dynamically ChartIQ modules (if available) and render chart element.
 
 			// ChartIQ doesn't preserve original UTC date; restore it from tz-adjusted DT value
 			if (data) {
-				data.originalDate = new Date(data.DT.getTime() - data.DT.getTimezoneOffset() * 60000);
+				const { timeUnit } = chartEngine.getPeriodicity();
+				if (timeUnit === 'day') {
+					data.adjustedDate = addUTCDays(floorUTCDate(data.DT), 1);
+				} else {
+					data.adjustedDate = new Date(data.DT);
+				}
 			}
 
 			cursor = { position, data };
diff --git a/src/routes/strategies/ChartThumbnail.svelte b/src/routes/strategies/ChartThumbnail.svelte
index 9908dc1b4..58e771942 100644
--- a/src/routes/strategies/ChartThumbnail.svelte
+++ b/src/routes/strategies/ChartThumbnail.svelte
@@ -36,14 +36,8 @@
 			update() {
 				chartEngine.loadChart('strategy-thumbnail', {
 					periodicity: { period: 1, timeUnit: 'day' },
-					masterData: data.map(([date, value]) => ({
-						// passing ISO date (w/out time) to prevent buggy ChartIQ tz conversions
-						DT: date.toISOString().slice(0, 10),
-						Value: value,
-						// add baseline data for drawing a simple 0 basline series (see above)
-						Baseline: 0
-					})),
-					span: { base: 'day', multiplier: 90 }
+					span: { base: 'day', multiplier: 90 },
+					masterData: data.map(([DT, Value]) => ({ DT, Value, Baseline: 0 }))
 				});
 
 				const { yAxis } = chartEngine.chart;
@@ -62,7 +56,7 @@
 			<Marker x={position.DateX} y={position.CloseY} size={4} />
 			<div class="chart-hover-info" style:--x="{position.cx}px" style:--y="{position.CloseY}px">
 				<UpDownCell value={data.Close - data.iqPrevClose}>
-					<Timestamp date={data.originalDate} />
+					<Timestamp date={data.adjustedDate} />
 					<div class="value">{formatPercent(data.Close, 2)}</div>
 				</UpDownCell>
 			</div>
diff --git a/src/routes/strategies/[strategy]/(nav)/performance/+page.svelte b/src/routes/strategies/[strategy]/(nav)/performance/+page.svelte
index d8bb3ac9c..aca400959 100644
--- a/src/routes/strategies/[strategy]/(nav)/performance/+page.svelte
+++ b/src/routes/strategies/[strategy]/(nav)/performance/+page.svelte
@@ -4,7 +4,6 @@
 <script lang="ts">
 	import { getPortfolioLatestStats } from 'trade-executor/state/stats';
 	import SummaryStatistics from './SummaryStatistics.svelte';
-	import WebChart from '../../WebChart.svelte';
 	import PortfolioPerformanceChart from './PortfolioPerformanceChart.svelte';
 
 	export let data;
@@ -18,17 +17,7 @@
 
 <section class="performance">
 	{#if profitabilityChart}
-		<!-- We cannot do fill here, because protability chart goes below zero -->
-		<WebChart
-			name="Profitability"
-			description="Compounded profitability of realised trading positions."
-			webChart={profitabilityChart}
-			yType="percent"
-			yAxisTitle="Realised profit"
-			fillMode="none"
-		/>
-
-		<PortfolioPerformanceChart data={profitabilityChart.data} />
+		<PortfolioPerformanceChart data={profitabilityChart.data} helpLink={profitabilityChart.help_link} />
 	{/if}
 
 	<SummaryStatistics {oldLatestStats} {summaryStatistics} />
diff --git a/src/routes/strategies/[strategy]/(nav)/performance/PortfolioPerformanceChart.svelte b/src/routes/strategies/[strategy]/(nav)/performance/PortfolioPerformanceChart.svelte
index 689e6ec11..12435f9d7 100644
--- a/src/routes/strategies/[strategy]/(nav)/performance/PortfolioPerformanceChart.svelte
+++ b/src/routes/strategies/[strategy]/(nav)/performance/PortfolioPerformanceChart.svelte
@@ -5,30 +5,58 @@ Render the portfolio performance chart using ChartIQ.
 - Y-axis: portfolio value
 -->
 <script lang="ts">
+	import { utcHour, utcDay } from 'd3-time';
 	import { formatPercent } from '$lib/helpers/formatters';
 	import { determinePriceChangeClass } from '$lib/helpers/price';
 	import { SegmentedControl, Timestamp, UpDownCell } from '$lib/components';
 	import { ChartIQ, Marker } from '$lib/chart';
 
 	export let data: [number, number][];
+	export let helpLink: string;
+
+	type ChartTick = [Date, number];
+	const rawData: ChartTick[] = data.map(([ts, val]) => [new Date(ts * 1000), val]);
 
 	let chartWrapper: HTMLElement;
 
 	const timeSpanOptions = {
-		'1W': { hours: 1, spanDays: 7, withTime: true },
-		'1M': { hours: 4, spanDays: 30, withTime: true },
-		'3M': { hours: 24, spanDays: 90, withTime: false }
+		'1W': {
+			spanDays: 7,
+			interval: utcHour.every(1),
+			periodicity: { period: 1, interval: 60, timeUnit: 'minute' }
+		},
+		'1M': {
+			spanDays: 30,
+			interval: utcHour.every(4),
+			periodicity: { period: 1, interval: 4 * 60, timeUnit: 'minute' }
+		},
+		'3M': {
+			spanDays: 90,
+			interval: utcDay.every(1),
+			periodicity: { period: 1, interval: 1, timeUnit: 'day' }
+		}
 	} as const;
 
 	let timeSpan: keyof typeof timeSpanOptions = '3M';
 
-	$: ({ hours, spanDays, withTime } = timeSpanOptions[timeSpan]);
+	$: ({ spanDays, interval, periodicity } = timeSpanOptions[timeSpan]);
+
+	function getNormalizedIntervalData() {
+		return rawData.reduce((acc: ChartTick[], [date, value]) => {
+			const normalizedDate = interval!.floor(date);
+			const replace = Number(normalizedDate.valueOf() === acc.at(-1)?.[0].valueOf());
+			acc.splice(acc.length - replace, replace, [normalizedDate, value]);
+			return acc;
+		}, []);
+	}
 
 	const options = {
 		layout: { chartType: 'mountain' },
 		controls: { chartControls: null },
+		dontRoll: true,
 
 		chart: {
+			tension: 1,
 			xAxis: { displayGridLines: false },
 			yAxis: {
 				displayGridLines: false,
@@ -56,12 +84,9 @@ Render the portfolio performance chart using ChartIQ.
 		return {
 			update() {
 				chartEngine.loadChart('strategy-profitability', {
-					periodicity: { period: hours, interval: 60, timeUnit: 'minute' },
+					periodicity,
 					span: { base: 'day', multiplier: spanDays },
-					masterData: data.map(([ts, Value]) => ({
-						DT: ts * 1000,
-						Value
-					}))
+					masterData: getNormalizedIntervalData().map(([DT, Value]) => ({ DT, Value }))
 				});
 			}
 		};
@@ -70,10 +95,12 @@ Render the portfolio performance chart using ChartIQ.
 
 <div class="portfolio-performance-chart">
 	<header>
-		<h2>Total Equity</h2>
+		<h2>Profitability</h2>
 		<SegmentedControl options={Object.keys(timeSpanOptions)} bind:selected={timeSpan} />
 	</header>
-	<p>Cash and market valued tokens in the strategy (USD)</p>
+	<p>
+		Compounded <a class="body-link" href={helpLink}>profitability</a> of realised trading positions.
+	</p>
 	<div bind:this={chartWrapper}>
 		<ChartIQ {init} {options} invalidate={[timeSpan]} let:cursor>
 			{@const { position, data } = cursor}
@@ -81,7 +108,7 @@ Render the portfolio performance chart using ChartIQ.
 				<Marker x={position.DateX} y={position.CloseY} size={4.5} />
 				<div class="chart-hover-info" style:--x="{position.cx}px" style:--y="{position.CloseY}px">
 					<UpDownCell value={data.Close - data.iqPrevClose}>
-						<Timestamp date={data.originalDate} {withTime} />
+						<Timestamp date={data.adjustedDate} withTime={periodicity.timeUnit === 'minute'} />
 						<div class="value">{formatPercent(data.Close, 2)}</div>
 					</UpDownCell>
 				</div>
@@ -120,15 +147,10 @@ Render the portfolio performance chart using ChartIQ.
 		h2 {
 			font: var(--f-heading-md-medium);
 			letter-spacing: var(--f-heading-md-spacing, normal);
-
-			@media (--viewport-sm-down) {
-				font: var(--f-heading-sm-medium);
-				letter-spacing: var(--f-heading-sm-spacing, normal);
-			}
 		}
 
 		p {
-			color: hsla(var(--hsl-text-extra-light));
+			color: hsla(var(--hsl-text-light));
 			font: var(--f-ui-md-medium);
 			letter-spacing: var(--f-ui-md-spacing, normal);