diff --git a/src/components/ECharts/UnlocksChart/index.tsx b/src/components/ECharts/UnlocksChart/index.tsx
index a1ee469d6..15bd093d4 100644
--- a/src/components/ECharts/UnlocksChart/index.tsx
+++ b/src/components/ECharts/UnlocksChart/index.tsx
@@ -5,6 +5,7 @@ import { useDarkModeManager } from '~/contexts/LocalStorage'
 import type { IChartProps } from '../types'
 import { useDefaults } from '../useDefaults'
 import { mergeDeep, stringToColour } from '../utils'
+import useWindowSize from '~/hooks/useWindowSize'
 
 // TODO remove color prop and use stackColors by default
 export default function AreaChart({
@@ -34,6 +35,8 @@ export default function AreaChart({
 	const chartsStack = stacks || customLegendOptions
 
 	const [isThemeDark] = useDarkModeManager()
+	const windowSize = useWindowSize()
+	const isMobile = windowSize.width && windowSize.width < 768
 
 	const defaultChartSettings = useDefaults({
 		color,
@@ -83,62 +86,17 @@ export default function AreaChart({
 				},
 				data: [],
 				...(hallmarks && {
-					markLine:
-						hallmarks.length > 8
-							? {
-									symbol: 'none',
-									data: hallmarks.map(([date, event]) => [
-										{
-											name: event,
-											xAxis: +date * 1e3,
-											yAxis: 0,
-											label: {
-												show: false,
-												color: isThemeDark ? 'rgba(255, 255, 255, 1)' : 'rgba(0, 0, 0, 1)',
-												fontFamily: 'sans-serif',
-												fontSize: 14,
-												fontWeight: 500,
-												position: 'insideEndTop'
-											},
-											emphasis: {
-												label: {
-													show: true, // Show on hover
-													color: isThemeDark ? 'rgba(255, 255, 255, 1)' : 'rgba(0, 0, 0, 1)',
-													fontFamily: 'sans-serif',
-													fontSize: 14,
-													fontWeight: 500,
-													position: 'insideEndTop'
-												}
-											}
-										},
-										{
-											name: 'end',
-											xAxis: +date * 1e3,
-											yAxis: 'max',
-											y: 0
-										}
-									])
-								}
-							: {
-									data: hallmarks.map(([date, event], index) => [
-										{
-											name: event,
-											xAxis: +date * 1e3,
-											yAxis: 0,
-											label: {
-												color: isThemeDark ? 'rgba(255, 255, 255, 1)' : 'rgba(0, 0, 0, 1)',
-												fontFamily: 'sans-serif',
-												fontSize: 14,
-												fontWeight: 500
-											}
-										},
-										{
-											name: 'end',
-											xAxis: +date * 1e3,
-											yAxis: 'max',
-											y: Math.max(hallmarks.length * 40 - index * 40, 40)
-										}
-									])
+					markLine: {
+						data: hallmarks.map(([date, event], index) => [
+							{
+								name: event,
+								xAxis: +date * 1e3,
+								yAxis: 0,
+								label: {
+									color: isThemeDark ? 'rgba(255, 255, 255, 1)' : 'rgba(0, 0, 0, 1)',
+									fontFamily: 'sans-serif',
+									fontSize: isMobile ? 10 : 14,
+									fontWeight: 500
 								}
 				})
 			}
@@ -188,62 +146,17 @@ export default function AreaChart({
 									} as { color?: echarts.graphic.LinearGradient }),
 					data: [],
 					...(hallmarks && {
-						markLine:
-							hallmarks.length > 8
-								? {
-										symbol: 'none',
-										data: hallmarks.map(([date, event]) => [
-											{
-												name: event,
-												xAxis: +date * 1e3,
-												yAxis: 0,
-												label: {
-													show: false,
-													color: isThemeDark ? 'rgba(255, 255, 255, 1)' : 'rgba(0, 0, 0, 1)',
-													fontFamily: 'sans-serif',
-													fontSize: 14,
-													fontWeight: 500,
-													position: 'insideEndTop'
-												},
-												emphasis: {
-													label: {
-														show: true, // Show on hover
-														color: isThemeDark ? 'rgba(255, 255, 255, 1)' : 'rgba(0, 0, 0, 1)',
-														fontFamily: 'sans-serif',
-														fontSize: 14,
-														fontWeight: 500,
-														position: 'insideEndTop'
-													}
-												}
-											},
-											{
-												name: 'end',
-												xAxis: +date * 1e3,
-												yAxis: 'max',
-												y: 0
-											}
-										])
-									}
-								: {
-										data: hallmarks.map(([date, event], index) => [
-											{
-												name: event,
-												xAxis: +date * 1e3,
-												yAxis: 0,
-												label: {
-													color: isThemeDark ? 'rgba(255, 255, 255, 1)' : 'rgba(0, 0, 0, 1)',
-													fontFamily: 'sans-serif',
-													fontSize: 14,
-													fontWeight: 500
-												}
-											},
-											{
-												name: 'end',
-												xAxis: +date * 1e3,
-												yAxis: 'max',
-												y: Math.max(hallmarks.length * 40 - index * 40, 40)
-											}
-										])
+						markLine: {
+							data: hallmarks.map(([date, event], index) => [
+								{
+									name: event,
+									xAxis: +date * 1e3,
+									yAxis: 0,
+									label: {
+										color: isThemeDark ? 'rgba(255, 255, 255, 1)' : 'rgba(0, 0, 0, 1)',
+										fontFamily: 'sans-serif',
+										fontSize: isMobile ? 10 : 14,
+										fontWeight: 500
 									}
 					})
 				}
@@ -286,7 +199,8 @@ export default function AreaChart({
 		hideGradient,
 		customLegendName,
 		legendOptions,
-		expandTo100Percent
+		expandTo100Percent,
+		isMobile
 	])
 
 	const createInstance = useCallback(() => {
diff --git a/src/containers/ProtocolOverview/Chart/Chart.tsx b/src/containers/ProtocolOverview/Chart/Chart.tsx
index c48504737..db5eca469 100644
--- a/src/containers/ProtocolOverview/Chart/Chart.tsx
+++ b/src/containers/ProtocolOverview/Chart/Chart.tsx
@@ -5,6 +5,7 @@ import { useDefaults } from '~/components/ECharts/useDefaults'
 import { mergeDeep } from '~/components/ECharts/utils'
 import { formattedNum } from '~/utils'
 import { BAR_CHARTS, ProtocolChartsLabels, yAxisByChart } from './constants'
+import useWindowSize from '~/hooks/useWindowSize'
 
 const customOffsets = {
 	Contributors: 60,
@@ -32,6 +33,8 @@ export default function ProtocolLineBarChart({
 }) {
 	const id = useId()
 	const isCumulative = groupBy === 'cumulative'
+	const windowSize = useWindowSize()
+	const isMobile = windowSize.width && windowSize.width < 768
 
 	const defaultChartSettings = useDefaults({
 		color,
@@ -138,7 +141,7 @@ export default function ProtocolLineBarChart({
 							label: {
 								color: isThemeDark ? 'rgba(255, 255, 255, 1)' : 'rgba(0, 0, 0, 1)',
 								fontFamily: 'sans-serif',
-								fontSize: 14,
+								fontSize: isMobile ? 10 : 14,
 								fontWeight: 500
 							}
 						},
@@ -163,7 +166,7 @@ export default function ProtocolLineBarChart({
 			series,
 			allYAxis: Object.entries(indexByYAxis) as Array<[ProtocolChartsLabels, number | undefined]>
 		}
-	}, [chartData, chartColors, hallmarks, isThemeDark, isCumulative, rangeHallmarks])
+	}, [chartData, chartColors, hallmarks, isThemeDark, isCumulative, rangeHallmarks, isMobile])
 
 	const createInstance = useCallback(() => {
 		const instance = echarts.getInstanceByDom(document.getElementById(id))