feat: simplify fork markline labels with vertical text at top of line

src/components/Charts/MultiLine/MultiLine.tsx

@@ -595,12 +595,16 @@ export function MultiLineChart({
               markLine: {
                 silent: true,
                 symbol: 'none',
+                animation: false,
                 data: markLines.map(ml => ({
                   xAxis: ml.xValue,
                   label: {
                     show: !!ml.label,
                     formatter: ml.label ?? '',
                     position: ml.labelPosition ?? 'end',
+                    rotate: -90,
+                    align: 'left',
+                    offset: [0, -2],
                     color: ml.color ?? themeColors.muted,
                     fontSize: 11,
                     backgroundColor: themeColors.surface,

src/components/Charts/MultiLine/MultiLine.types.ts

@@ -216,7 +216,16 @@ export interface MarkLineConfig {
    * Position of the label
    * @default 'end'
    */
-  labelPosition?: 'start' | 'middle' | 'end';
+  labelPosition?:
+    | 'start'
+    | 'middle'
+    | 'end'
+    | 'insideStartTop'
+    | 'insideStartBottom'
+    | 'insideMiddleTop'
+    | 'insideMiddleBottom'
+    | 'insideEndTop'
+    | 'insideEndBottom';
   /**
    * Line color (hex or rgb)
    */
@@ -231,6 +240,16 @@ export interface MarkLineConfig {
    * @default 1
    */
   lineWidth?: number;
+  /**
+   * Horizontal text alignment for label
+   * @default 'center'
+   */
+  align?: 'left' | 'center' | 'right';
+  /**
+   * Distance offset from the line [horizontal, vertical]
+   * Note: For vertical markLines, only vertical (index 1) works reliably
+   */
+  distance?: [number, number];
 }
 
 /**

src/components/Charts/MultiLine/utils.ts

@@ -1,4 +1,4 @@
-import type { SeriesData, MarkLineConfig } from './MultiLine.types';
+import type { MarkLineConfig, SeriesData } from './MultiLine.types';
 import type { ForkInfo } from '@/utils/forks';
 import type { ExecutionForks, BlobScheduleItem } from '@/hooks/useConfig';
 import { epochToTimestamp } from '@/utils/beacon';
@@ -179,9 +179,9 @@ export function createForkMarkLines(options: ForkMarkLinesOptions): MarkLineConf
     if (labels.includes(forkLabel)) {
       markLines.push({
         xValue: forkLabel,
-        label: fork.combinedName?.toUpperCase() ?? fork.displayName,
+        label: (fork.combinedName ?? fork.displayName).toUpperCase(),
         labelPosition: 'end',
-        color: '#9ca3af',
+        color: '#8b5cf6', // Purple for consensus forks
         lineStyle: 'dashed',
         lineWidth: 1,
       });
@@ -236,7 +236,7 @@ export function createExecutionForkMarkLines(options: ExecutionForkMarkLinesOpti
         xValue: forkLabel,
         label: displayName,
         labelPosition: 'end',
-        color: '#9ca3af',
+        color: '#f59e0b', // Amber for execution forks
         lineStyle: 'dashed',
         lineWidth: 1,
       });
@@ -291,7 +291,7 @@ export function createBlobScheduleMarkLines(options: BlobScheduleMarkLinesOption
         xValue: blobLabel,
         label: `BPO${index + 1}`,
         labelPosition: 'end',
-        color: '#9ca3af',
+        color: '#10b981', // Green for blob schedule
         lineStyle: 'dashed',
         lineWidth: 1,
       });

src/pages/ethereum/execution/overview/IndexPage.tsx

@@ -11,6 +11,7 @@ import {
 } from '@/components/Charts/MultiLine';
 import { useNetwork } from '@/hooks/useNetwork';
 import { useForks } from '@/hooks/useForks';
+import { Toggle } from '@/components/Forms/Toggle';
 import clsx from 'clsx';
 import {
   fctExecutionTpsHourlyServiceListOptions,
@@ -61,6 +62,7 @@ import {
  */
 export function IndexPage(): JSX.Element {
   const [timePeriod, setTimePeriod] = useState<TimePeriod>('7d');
+  const [showAnnotations, setShowAnnotations] = useState(true);
   const config = TIME_RANGE_CONFIG[timePeriod];
   const isDaily = config.dataType === 'daily';
 
@@ -696,6 +698,12 @@ export function IndexPage(): JSX.Element {
             </button>
           ))}
         </div>
+
+        {/* Annotations Toggle */}
+        <div className="flex items-center gap-2">
+          <span className="text-sm text-muted">Show Forks</span>
+          <Toggle checked={showAnnotations} onChange={setShowAnnotations} size="small" />
+        </div>
       </div>
 
       {isLoading && <ExecutionOverviewSkeleton />}
@@ -729,8 +737,8 @@ export function IndexPage(): JSX.Element {
                   legendPosition="top"
                   enableDataZoom
                   tooltipFormatter={tpsTooltipFormatter}
-                  markLines={forkMarkLines}
-                  syncGroup="execution-overview"
+                  markLines={showAnnotations ? forkMarkLines : []}
+                  syncGroup={inModal ? undefined : 'execution-overview'}
                 />
               )}
             </PopoutCard>
@@ -770,8 +778,8 @@ export function IndexPage(): JSX.Element {
                   legendPosition="top"
                   enableDataZoom
                   tooltipFormatter={transactionsTooltipFormatter}
-                  markLines={forkMarkLines}
-                  syncGroup="execution-overview"
+                  markLines={showAnnotations ? forkMarkLines : []}
+                  syncGroup={inModal ? undefined : 'execution-overview'}
                 />
               )}
             </PopoutCard>
@@ -809,8 +817,8 @@ export function IndexPage(): JSX.Element {
                   legendPosition="top"
                   enableDataZoom
                   tooltipFormatter={gasTooltipFormatter}
-                  markLines={forkMarkLines}
-                  syncGroup="execution-overview"
+                  markLines={showAnnotations ? forkMarkLines : []}
+                  syncGroup={inModal ? undefined : 'execution-overview'}
                 />
               )}
             </PopoutCard>
@@ -851,8 +859,8 @@ export function IndexPage(): JSX.Element {
                   legendPosition="top"
                   enableDataZoom
                   tooltipFormatter={signallingTooltipFormatter}
-                  markLines={signallingForkMarkLines}
-                  syncGroup="execution-overview"
+                  markLines={showAnnotations ? signallingForkMarkLines : []}
+                  syncGroup={inModal ? undefined : 'execution-overview'}
                 />
               )}
             </PopoutCard>