diff --git a/@codexteam/ui/dev/pages/components/Chart.vue b/@codexteam/ui/dev/pages/components/Chart.vue
index 03e0de6d..ee008846 100644
--- a/@codexteam/ui/dev/pages/components/Chart.vue
+++ b/@codexteam/ui/dev/pages/components/Chart.vue
@@ -12,22 +12,39 @@
         lines
       </h4>
       <p class="chart-props__description">
-        An array of line objects to display on the chart.
+        An array of line objects to display on the chart. Each line has
+        <code>label</code>, <code>data</code> and optional <code>color</code>.
       </p>
     </div>
 
+    <div class="chart-props__item">
+      <h4 class="chart-props__name">
+        lines[].color
+      </h4>
+      <p class="chart-props__description">
+        Built-in palette token, or a hex override. Omit it and the line stays red.
+      </p>
+      <ul class="chart-props__list">
+        <li>
+          <code>red</code>, <code>light-grey</code>, <code>blue</code>,
+          <code>green</code>, <code>orange</code>, <code>violet</code>,
+          <code>yellow</code>, <code>cyan</code>, <code>pink</code>
+        </li>
+        <li>hex override: <code>'#7CFF6B'</code></li>
+      </ul>
+    </div>
+
     <div class="chart-props__item">
       <h4 class="chart-props__name">
         detalization
       </h4>
       <p class="chart-props__description">
-        Controls how timestamps are formatted on the X-axis legend and tooltip.
-        Does not affect data aggregation — only the display format.
+        Grain of the X-axis and tooltip timestamps. Preview data follows the selected step.
       </p>
       <ul class="chart-props__list">
-        <li><code>'days'</code> — shows day and month (e.g., "19 dec")</li>
-        <li><code>'hours'</code> — shows day, month, and time (e.g., "19 dec, 14:00")</li>
-        <li><code>'minutes'</code> — shows day, month, and time (e.g., "19 dec, 14:30")</li>
+        <li><code>'days'</code> — 30 daily points, labels like "19 dec"</li>
+        <li><code>'hours'</code> — 24 hourly points, labels like "19 dec, 14:00"</li>
+        <li><code>'minutes'</code> — 60 minute points, labels like "14:30"</li>
       </ul>
       <div class="chart-props__control">
         <span class="chart-props__control-label">Try it:</span>
@@ -39,16 +56,43 @@
         />
       </div>
     </div>
+
+    <div class="chart-props__item">
+      <h4 class="chart-props__name">
+        legend
+      </h4>
+      <p class="chart-props__description">
+        Static series legend under the chart: color dot + <code>label</code> for each line.
+        Off by default so existing layouts stay the same.
+      </p>
+      <div class="chart-props__control">
+        <span class="chart-props__control-label">Try it:</span>
+        <Switch
+          v-model="legendEnabled"
+          :value="legendEnabled"
+        />
+      </div>
+    </div>
   </div>
 
   <Heading :level="3">
     Single Line
   </Heading>
   <div class="chart-example">
+    <div class="chart-example__toolbar">
+      <span class="chart-props__control-label">color:</span>
+      <Select
+        v-model="singleLineColorSelected"
+        :align="{ vertically: 'below', horizontally: 'left' }"
+        :is-disabled="false"
+        :items="paletteColorItems"
+      />
+    </div>
     <div class="chart-example__showcase">
       <Chart
         :lines="[singleLineData]"
         :detalization="currentDetalization"
+        :legend="legendEnabled"
       />
     </div>
   </div>
@@ -61,6 +105,39 @@
       <Chart
         :lines="multipleLinesData"
         :detalization="currentDetalization"
+        :legend="legendEnabled"
+      />
+    </div>
+  </div>
+
+  <Heading :level="3">
+    Palette
+  </Heading>
+  <p class="chart-example-note">
+    Every hardcoded <code>ChartLineColor</code> token on one chart. No hex.
+  </p>
+  <div class="chart-example chart-example--tall">
+    <div class="chart-example__showcase">
+      <Chart
+        :lines="paletteSeriesData"
+        :detalization="currentDetalization"
+        :legend="legendEnabled"
+      />
+    </div>
+  </div>
+
+  <Heading :level="3">
+    Hex override
+  </Heading>
+  <p class="chart-example-note">
+    Same series as Single Line, but <code>color: '#7CFF6B'</code>.
+  </p>
+  <div class="chart-example">
+    <div class="chart-example__showcase">
+      <Chart
+        :lines="[hexLineData]"
+        :detalization="currentDetalization"
+        :legend="legendEnabled"
       />
     </div>
   </div>
@@ -69,7 +146,7 @@
 <script setup lang="ts">
 import { ref, computed } from 'vue';
 import PageHeader from '../../components/PageHeader.vue';
-import { Chart, ChartLineColor, Heading, Select } from '../../../src/vue';
+import { Chart, ChartLineColor, Heading, Select, Switch } from '../../../src/vue';
 import type { ChartItem, ChartLine } from '../../../src/vue/components/chart';
 import type { ContextMenuItem, DefaultItem } from '../../../src/vue/components/context-menu/ContextMenu.types';
 
@@ -88,17 +165,48 @@ const detalizationMap: Record<string, DetalizationValue> = {
 };
 
 /**
- * Generate sample chart data
+ * Axis step for each detalization
+ */
+const detalizationConfig: Record<DetalizationValue, {
+  points: number;
+  intervalSeconds: number;
+}> = {
+  days: {
+    points: 30,
+    intervalSeconds: 86400,
+  },
+  hours: {
+    points: 24,
+    intervalSeconds: 3600,
+  },
+  minutes: {
+    points: 60,
+    intervalSeconds: 60,
+  },
+};
+
+/**
+ * Shared timestamps aligned to the selected detalization bucket
  *
- * @param points - Number of data points to generate
- * @param intervalSeconds - Time interval between points in seconds
- * @param baseValue - Base value for random count generation
+ * @param points - Number of ticks
+ * @param intervalSeconds - Step between ticks
  */
-function generateData(points: number, intervalSeconds: number, baseValue = 100): ChartItem[] {
+function generateTimestamps(points: number, intervalSeconds: number): number[] {
   const now = Math.floor(Date.now() / 1000);
+  const aligned = now - (now % intervalSeconds);
+
+  return Array.from({ length: points }, (_, i) => aligned - (points - 1 - i) * intervalSeconds);
+}
 
-  return Array.from({ length: points }, (_, i) => ({
-    timestamp: now - (points - i) * intervalSeconds,
+/**
+ * Generate sample chart data
+ *
+ * @param timestamps - Shared axis timestamps
+ * @param baseValue - Base value for random count generation
+ */
+function generateData(timestamps: number[], baseValue = 100): ChartItem[] {
+  return timestamps.map(timestamp => ({
+    timestamp,
     count: Math.floor(Math.random() * baseValue) + Math.floor(baseValue / 2),
   }));
 }
@@ -116,6 +224,11 @@ const detalizationSelected = ref<DefaultItem>({
   onActivate,
 });
 
+/**
+ * Toggle static series legend in the preview
+ */
+const legendEnabled = ref(true);
+
 /**
  * Available detalization options for the Select component
  */
@@ -136,29 +249,107 @@ const currentDetalization = computed<DetalizationValue>(() => {
 });
 
 /**
- * Single line chart data - 30 days of events
+ * One axis for all preview charts, matching the selected detalization
+ */
+const demoTimestamps = computed((): number[] => {
+  const { points, intervalSeconds } = detalizationConfig[currentDetalization.value];
+
+  return generateTimestamps(points, intervalSeconds);
+});
+
+/**
+ * Built-in palette tokens, same order as ChartLineColor
  */
-const singleLineData = computed<ChartLine>(() => ({
-  label: 'events',
-  data: generateData(30, 86400, 2000),
-  color: ChartLineColor.Red,
+const paletteTokens: ChartLineColor[] = Object.values(ChartLineColor);
+
+/**
+ * Fast lookup for Select titles
+ */
+const paletteTokenSet = new Set<string>(paletteTokens);
+
+/**
+ * Color picker for the single-line preview
+ */
+const singleLineColorSelected = ref<DefaultItem>({
+  title: ChartLineColor.Red,
+  onActivate,
+});
+
+/**
+ * Palette options for the Single Line select
+ */
+const paletteColorItems: ContextMenuItem[] = paletteTokens.map(title => ({
+  title,
+  onActivate,
 }));
 
+/**
+ * Keep points stable when only the color token changes
+ */
+const singleLinePoints = computed((): ChartItem[] => {
+  return generateData(demoTimestamps.value, 2000);
+});
+
+/**
+ * Single line chart data
+ */
+const singleLineData = computed<ChartLine>(() => {
+  const title = singleLineColorSelected.value.title;
+  const color = paletteTokenSet.has(title)
+    ? title as ChartLineColor
+    : ChartLineColor.Red;
+
+  return {
+    label: title,
+    data: singleLinePoints.value,
+    color,
+  };
+});
+
+/**
+ * Hex override demo — same points as Single Line
+ */
+const hexLineData = computed<ChartLine>(() => {
+  return {
+    label: '#7CFF6B',
+    data: singleLinePoints.value,
+    color: '#7CFF6B',
+  };
+});
+
 /**
  * Multiple lines chart data - accepted and filtered events
  */
-const multipleLinesData = computed<ChartLine[]>(() => [
-  {
-    label: 'accepted',
-    data: generateData(30, 86400, 150),
-    color: ChartLineColor.Red,
-  },
-  {
-    label: 'filtered',
-    data: generateData(30, 86400, 50),
-    color: ChartLineColor.LightGrey,
-  },
-]);
+const multipleLinesData = computed<ChartLine[]>(() => {
+  const timestamps = demoTimestamps.value;
+
+  return [
+    {
+      label: 'accepted',
+      data: generateData(timestamps, 150),
+      color: ChartLineColor.Red,
+    },
+    {
+      label: 'filtered',
+      data: generateData(timestamps, 50),
+      color: ChartLineColor.LightGrey,
+    },
+  ];
+});
+
+/**
+ * All hardcoded palette tokens stacked for comparison
+ */
+const paletteSeriesData = computed<ChartLine[]>(() => {
+  const timestamps = demoTimestamps.value;
+  const bases = [150, 130, 110, 95, 80, 70, 55, 40, 25];
+
+  return paletteTokens.map((color, index) => ({
+    label: color,
+    data: generateData(timestamps, bases[index] ?? 50),
+    color,
+  }));
+});
 </script>
 
 <style scoped>
@@ -181,14 +372,12 @@ const multipleLinesData = computed<ChartLine[]>(() => [
   &__description {
     margin: 0 0 var(--spacing-s);
     color: var(--base--text-secondary);
-  }
 
-  &__code {
-    margin: 0;
-    padding: var(--spacing-s);
-    background-color: var(--base--bg-primary);
-    border-radius: var(--radius-s);
-    overflow-x: auto;
+    code {
+      padding: var(--spacing-xxs) var(--spacing-ms);
+      background-color: var(--base--bg-primary);
+      border-radius: var(--radius-s);
+    }
   }
 
   &__list {
@@ -217,18 +406,37 @@ const multipleLinesData = computed<ChartLine[]>(() => [
   }
 }
 
+.chart-example-note {
+  margin: 0 0 var(--spacing-m);
+  color: var(--base--text-secondary);
+}
+
 .chart-example {
   display: grid;
   grid-template-columns: 1fr;
   gap: var(--spacing-l);
-  margin-bottom: var(--spacing-xl);
+  margin: 0 0 var(--spacing-xxl);
   position: relative;
 
+  &__toolbar {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-s);
+  }
+
   &__showcase {
     width: 100%;
     background-color: var(--base--bg-secondary);
     border-radius: var(--radius-m);
   }
 
+  &:last-child {
+    margin-bottom: 0;
+    padding-bottom: 180px;
+  }
+
+  &--tall {
+    padding-bottom: 240px;
+  }
 }
 </style>
diff --git a/@codexteam/ui/package.json b/@codexteam/ui/package.json
index 2550ce0f..d54b572f 100644
--- a/@codexteam/ui/package.json
+++ b/@codexteam/ui/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@codexteam/ui",
-  "version": "0.2.5",
+  "version": "0.2.6",
   "type": "module",
   "sideEffects": [
     "*.css",
diff --git a/@codexteam/ui/src/vue/components/chart/Chart.colors.ts b/@codexteam/ui/src/vue/components/chart/Chart.colors.ts
index 3dd1a96e..756b377e 100644
--- a/@codexteam/ui/src/vue/components/chart/Chart.colors.ts
+++ b/@codexteam/ui/src/vue/components/chart/Chart.colors.ts
@@ -1,5 +1,40 @@
 import { ChartLineColor } from './Chart.types';
-import type { ChartLineColors } from './Chart.types';
+import type { ChartLineColorToken, ChartLineColors } from './Chart.types';
+
+/**
+ * Max value of an RGB channel
+ */
+const RGB_CHANNEL_MAX = 255;
+
+/**
+ * Radix for hex color strings
+ */
+const HEX_RADIX = 16;
+
+/**
+ * Byte width in a #RRGGBB string (two hex digits)
+ */
+const HEX_BYTE_LENGTH = 2;
+
+/**
+ * Start of the green byte in #RRGGBB (without '#')
+ */
+const HEX_GREEN_OFFSET = 2;
+
+/**
+ * Start of the blue byte in #RRGGBB (without '#')
+ */
+const HEX_BLUE_OFFSET = 4;
+
+/**
+ * Length of the #RRGGBB payload (without '#')
+ */
+const HEX_RGB_LENGTH = 6;
+
+/**
+ * Palette name for the default series color
+ */
+const RED_TOKEN: string = ChartLineColor.Red;
 
 /**
  * Colors for dark color scheme.
@@ -21,6 +56,62 @@ export const chartColorsDark: ChartLineColors[] = [
     fillEnd: 'rgba(66, 69, 101, 0)',
     pointerColor: '#FF2E51',
   },
+  {
+    name: ChartLineColor.Blue,
+    strokeStart: '#3F88FF',
+    strokeEnd: '#424565',
+    fillStart: 'rgba(63, 136, 255, 0.22)',
+    fillEnd: 'rgba(66, 69, 101, 0)',
+    pointerColor: '#3F88FF',
+  },
+  {
+    name: ChartLineColor.Green,
+    strokeStart: '#00C853',
+    strokeEnd: '#424565',
+    fillStart: 'rgba(0, 200, 83, 0.22)',
+    fillEnd: 'rgba(66, 69, 101, 0)',
+    pointerColor: '#00C853',
+  },
+  {
+    name: ChartLineColor.Orange,
+    strokeStart: '#FF8A3D',
+    strokeEnd: '#424565',
+    fillStart: 'rgba(255, 138, 61, 0.22)',
+    fillEnd: 'rgba(66, 69, 101, 0)',
+    pointerColor: '#FF8A3D',
+  },
+  {
+    name: ChartLineColor.Violet,
+    strokeStart: '#913BE6',
+    strokeEnd: '#424565',
+    fillStart: 'rgba(145, 59, 230, 0.22)',
+    fillEnd: 'rgba(66, 69, 101, 0)',
+    pointerColor: '#913BE6',
+  },
+  {
+    name: ChartLineColor.Yellow,
+    strokeStart: '#F5C542',
+    strokeEnd: '#424565',
+    fillStart: 'rgba(245, 197, 66, 0.22)',
+    fillEnd: 'rgba(66, 69, 101, 0)',
+    pointerColor: '#F5C542',
+  },
+  {
+    name: ChartLineColor.Cyan,
+    strokeStart: '#2EC4B6',
+    strokeEnd: '#424565',
+    fillStart: 'rgba(46, 196, 182, 0.22)',
+    fillEnd: 'rgba(66, 69, 101, 0)',
+    pointerColor: '#2EC4B6',
+  },
+  {
+    name: ChartLineColor.Pink,
+    strokeStart: '#FF5CA8',
+    strokeEnd: '#424565',
+    fillStart: 'rgba(255, 92, 168, 0.22)',
+    fillEnd: 'rgba(66, 69, 101, 0)',
+    pointerColor: '#FF5CA8',
+  },
 ];
 
 /**
@@ -43,4 +134,159 @@ export const chartColorsLight: ChartLineColors[] = [
     fillEnd: 'rgba(255, 190, 198, 0)',
     pointerColor: '#FF4A68',
   },
+  {
+    name: ChartLineColor.Blue,
+    strokeStart: '#4F94FF',
+    strokeEnd: 'rgba(119, 136, 198, 0.4)',
+    fillStart: 'rgba(79, 148, 255, 0.28)',
+    fillEnd: 'rgba(190, 214, 255, 0)',
+    pointerColor: '#4F94FF',
+  },
+  {
+    name: ChartLineColor.Green,
+    strokeStart: '#26A15F',
+    strokeEnd: 'rgba(119, 136, 198, 0.4)',
+    fillStart: 'rgba(38, 161, 95, 0.28)',
+    fillEnd: 'rgba(168, 232, 198, 0)',
+    pointerColor: '#26A15F',
+  },
+  {
+    name: ChartLineColor.Orange,
+    strokeStart: '#F07828',
+    strokeEnd: 'rgba(119, 136, 198, 0.4)',
+    fillStart: 'rgba(240, 120, 40, 0.28)',
+    fillEnd: 'rgba(255, 210, 176, 0)',
+    pointerColor: '#F07828',
+  },
+  {
+    name: ChartLineColor.Violet,
+    strokeStart: '#8B4BCB',
+    strokeEnd: 'rgba(119, 136, 198, 0.4)',
+    fillStart: 'rgba(139, 75, 203, 0.28)',
+    fillEnd: 'rgba(234, 212, 255, 0)',
+    pointerColor: '#8B4BCB',
+  },
+  {
+    name: ChartLineColor.Yellow,
+    strokeStart: '#D9A82E',
+    strokeEnd: 'rgba(119, 136, 198, 0.4)',
+    fillStart: 'rgba(217, 168, 46, 0.28)',
+    fillEnd: 'rgba(255, 232, 176, 0)',
+    pointerColor: '#D9A82E',
+  },
+  {
+    name: ChartLineColor.Cyan,
+    strokeStart: '#1AA89C',
+    strokeEnd: 'rgba(119, 136, 198, 0.4)',
+    fillStart: 'rgba(26, 168, 156, 0.28)',
+    fillEnd: 'rgba(176, 232, 226, 0)',
+    pointerColor: '#1AA89C',
+  },
+  {
+    name: ChartLineColor.Pink,
+    strokeStart: '#E94B93',
+    strokeEnd: 'rgba(119, 136, 198, 0.4)',
+    fillStart: 'rgba(233, 75, 147, 0.28)',
+    fillEnd: 'rgba(255, 198, 222, 0)',
+    pointerColor: '#E94B93',
+  },
 ];
+
+/**
+ * Clamp a color channel to 0–255
+ * @param value - parsed channel
+ */
+function clampChannel(value: number): number {
+  if (!Number.isFinite(value)) {
+    return 0;
+  }
+
+  return Math.max(0, Math.min(RGB_CHANNEL_MAX, Math.round(value)));
+}
+
+/**
+ * Parse #RGB or #RRGGBB only. Anything else is rejected — never pass raw CSS through.
+ * @param color - hex color string
+ */
+function parseHexColor(color: string): { r: number; g: number; b: number } | null {
+  const value = color.trim();
+  const shortHex = /^#([0-9a-fA-F]{3})$/.exec(value);
+
+  if (shortHex) {
+    const [r, g, b] = shortHex[1].split('');
+
+    return {
+      r: parseInt(r + r, HEX_RADIX),
+      g: parseInt(g + g, HEX_RADIX),
+      b: parseInt(b + b, HEX_RADIX),
+    };
+  }
+
+  const longHex = /^#([0-9a-fA-F]{6})$/.exec(value);
+
+  if (longHex) {
+    const payload = longHex[1];
+
+    return {
+      r: parseInt(payload.slice(0, HEX_GREEN_OFFSET), HEX_RADIX),
+      g: parseInt(payload.slice(HEX_GREEN_OFFSET, HEX_BLUE_OFFSET), HEX_RADIX),
+      b: parseInt(payload.slice(HEX_BLUE_OFFSET, HEX_RGB_LENGTH), HEX_RADIX),
+    };
+  }
+
+  return null;
+}
+
+/**
+ * Format a 0–255 channel as two hex digits
+ * @param channel - clamped RGB channel
+ */
+function channelToHex(channel: number): string {
+  return channel.toString(HEX_RADIX)
+    .padStart(HEX_BYTE_LENGTH, '0');
+}
+
+/**
+ * Build a gradient set from a hex color. Returns null if the string is not a hex.
+ * @param color - hex color string
+ */
+export function createChartLineColorsFromCss(color: string): ChartLineColors | null {
+  const parsed = parseHexColor(color);
+
+  if (!parsed) {
+    return null;
+  }
+
+  const r = clampChannel(parsed.r);
+  const g = clampChannel(parsed.g);
+  const b = clampChannel(parsed.b);
+
+  return {
+    name: `#${channelToHex(r)}${channelToHex(g)}${channelToHex(b)}`,
+    strokeStart: `rgb(${r}, ${g}, ${b})`,
+    strokeEnd: `rgba(${r}, ${g}, ${b}, 0.22)`,
+    fillStart: `rgba(${r}, ${g}, ${b}, 0.26)`,
+    fillEnd: `rgba(${r}, ${g}, ${b}, 0)`,
+    pointerColor: `rgb(${r}, ${g}, ${b})`,
+  };
+}
+
+/**
+ * Resolve a line color: palette token or hex. Invalid values fall back to red.
+ * @param color - palette token or hex
+ * @param palette - dark/light chart palette
+ */
+export function resolveChartLineColor(
+  color: ChartLineColorToken | undefined,
+  palette: ChartLineColors[]
+): ChartLineColors {
+  const fallback = palette.find(item => item.name === RED_TOKEN) ?? palette[0];
+  const colorName: string = color ?? ChartLineColor.Red;
+  const fromPalette = palette.find(item => item.name === colorName);
+
+  if (fromPalette) {
+    return fromPalette;
+  }
+
+  return createChartLineColorsFromCss(colorName) ?? fallback;
+}
diff --git a/@codexteam/ui/src/vue/components/chart/Chart.types.ts b/@codexteam/ui/src/vue/components/chart/Chart.types.ts
index d29562e1..5c45ec83 100644
--- a/@codexteam/ui/src/vue/components/chart/Chart.types.ts
+++ b/@codexteam/ui/src/vue/components/chart/Chart.types.ts
@@ -10,9 +10,49 @@ export enum ChartLineColor {
   /**
    * Accent color for secondary line
    */
-  LightGrey = 'light-grey'
+  LightGrey = 'light-grey',
+
+  /**
+   * Blue series
+   */
+  Blue = 'blue',
+
+  /**
+   * Green series
+   */
+  Green = 'green',
+
+  /**
+   * Orange series
+   */
+  Orange = 'orange',
+
+  /**
+   * Violet series
+   */
+  Violet = 'violet',
+
+  /**
+   * Yellow series
+   */
+  Yellow = 'yellow',
+
+  /**
+   * Cyan series
+   */
+  Cyan = 'cyan',
+
+  /**
+   * Pink series
+   */
+  Pink = 'pink'
 }
 
+/**
+ * Palette token or a hex color (`#RGB` / `#RRGGBB`).
+ */
+export type ChartLineColorToken = ChartLineColor | `#${string}`;
+
 /**
  * Chart element in common case
  */
@@ -43,9 +83,10 @@ export interface ChartLine {
   data: ChartItem[];
 
   /**
-   * Name of the color for the line stroke and fill.
+   * Line color: a ChartLineColor token, or a hex string.
+   * Defaults to red when omitted.
    */
-  color?: ChartLineColor;
+  color?: ChartLineColorToken;
 }
 
 /**
@@ -53,9 +94,9 @@ export interface ChartLine {
  */
 export interface ChartLineColors {
   /**
-   * Name of the color
+   * Name of the color (palette token or hex)
    */
-  name: ChartLineColor;
+  name: string;
   /**
    * Starting color for stroke gradient (top)
    */
diff --git a/@codexteam/ui/src/vue/components/chart/Chart.vue b/@codexteam/ui/src/vue/components/chart/Chart.vue
index fe592be8..93bfe1ca 100644
--- a/@codexteam/ui/src/vue/components/chart/Chart.vue
+++ b/@codexteam/ui/src/vue/components/chart/Chart.vue
@@ -1,87 +1,114 @@
 <template>
-  <div
-    :class="$style.chart"
-    @mousemove.passive="moveTooltip"
-    @mouseleave.passive="hoveredIndex = -1"
-  >
-    <svg
-      ref="chart"
-      :class="$style.chart__body"
-    >
-      <ChartLine
-        v-for="(preparedLine, index) in preparedLines"
-        :key="`chart-line-${index}`"
-        :points="preparedLine.line.data"
-        :color="preparedLine.line.color"
-        :chart-width="chartWidth"
-        :chart-height="chartHeight"
-        :min-value="preparedLine.min"
-        :max-value="preparedLine.max"
-        :step-x="stepX"
-        :label="preparedLine.line.label"
-      />
-    </svg>
+  <div :class="$style.chart">
     <div
-      :class="$style.chart__ox"
+      ref="plot"
+      :class="$style.chart__plot"
+      @mousemove.passive="moveTooltip"
+      @mouseleave.passive="leavePlot"
     >
+      <svg
+        ref="chart"
+        :class="$style.chart__body"
+      >
+        <ChartLine
+          v-for="(preparedLine, index) in preparedLines"
+          :key="`chart-line-${index}`"
+          :points="preparedLine.line.data"
+          :color="preparedLine.line.color"
+          :chart-width="chartWidth"
+          :chart-height="chartHeight"
+          :min-value="preparedLine.min"
+          :max-value="preparedLine.max"
+          :step-x="stepX"
+          :label="preparedLine.line.label"
+        />
+      </svg>
       <div
-        :class="$style['chart__ox-inner']"
+        :class="$style.chart__ox"
       >
-        <span
-          v-for="item in visibleLegendPoints"
-          :key="item.index"
-          :class="$style['chart__ox-item']"
-          :style="{ left: `${item.index * stepX}px`, transform: 'translateX(-50%)' }"
+        <div
+          :class="$style['chart__ox-inner']"
         >
-          {{ formatTimestamp(item.point.timestamp * 1000) }}
-        </span>
+          <span
+            v-for="item in visibleLegendPoints"
+            :key="item.index"
+            :class="$style['chart__ox-item']"
+            :style="{ left: `${item.index * stepX}px`, transform: 'translateX(-50%)' }"
+          >
+            {{ formatAxisTimestamp(item.point.timestamp * 1000, item.includeDate) }}
+          </span>
+        </div>
       </div>
-    </div>
-    <div
-      v-if="hoveredIndex >= 0 && hoveredIndex < firstLineData.length"
-      :style="{ transform: `translateX(${pointerLeft}px)` }"
-      :class="$style.chart__pointer"
-    >
-      <template
-        v-for="(preparedLine, index) in preparedLines"
-      >
-        <div
-          v-if="!preparedLine.allZeros"
-          :key="`cursor-${preparedLine.line.label}-${index}`"
-          :style="{
-            transform: `translateY(${getLinePointerTop(preparedLine)}px)`,
-            backgroundColor: getCursorColor(preparedLine.line)
-          }"
-          :class="$style['chart__pointer-cursor']"
-        />
-      </template>
       <div
-        :class="[
-          $style['chart__pointer-tooltip'],
-          tooltipAlignment === 'left' && $style['chart__pointer-tooltip--left'],
-          tooltipAlignment === 'right' && $style['chart__pointer-tooltip--right']
-        ]"
-        :style="{ minWidth: `${(String(firstLineData[hoveredIndex].count).length + ' events'.length) * 6.4 + 12}px` }"
+        v-if="hoveredIndex >= 0 && hoveredIndex < firstLineData.length"
+        :style="{ transform: `translateX(${pointerLeft}px)` }"
+        :class="$style.chart__pointer"
       >
-        <div :class="$style['chart__pointer-tooltip-date']">
-          {{ formatTimestamp(firstLineData[hoveredIndex].timestamp * 1000) }}
-        </div>
         <template
           v-for="(preparedLine, index) in preparedLines"
+          :key="`cursor-${preparedLine.line.label}-${index}`"
         >
           <div
             v-if="!preparedLine.allZeros"
-            :key="`tooltip-line-${preparedLine.line.label}-${index}`"
+            :style="{
+              transform: `translateY(${getLinePointerTop(preparedLine)}px)`,
+              backgroundColor: getCursorColor(preparedLine.line)
+            }"
+            :class="$style['chart__pointer-cursor']"
+          />
+        </template>
+        <div
+          :class="[
+            $style['chart__pointer-tooltip'],
+            tooltipAlignment === 'left' && $style['chart__pointer-tooltip--left'],
+            tooltipAlignment === 'right' && $style['chart__pointer-tooltip--right']
+          ]"
+          :style="{ minWidth: `${tooltipMinWidth}px` }"
+          @mousemove.stop
+          @mouseenter="pinTooltip"
+          @mouseleave="unpinTooltip"
+        >
+          <div :class="$style['chart__pointer-tooltip-date']">
+            {{ formatTimestamp(firstLineData[hoveredIndex].timestamp * 1000) }}
+          </div>
+          <div
+            v-for="item in tooltipLines"
+            :key="`tooltip-line-${item.prepared.index}`"
             :class="$style['chart__pointer-tooltip-number']"
           >
-            <AnimatedCounter :value="formatSpacedNumber(getLineValueAtHoveredIndex(preparedLine.line, hoveredIndex))" />
-            {{ preparedLine.line.label }}
             <span
               :class="$style['chart__pointer-tooltip-dot']"
-              :style="{ backgroundColor: getCursorColor(preparedLine.line) }"
+              :style="{ backgroundColor: getCursorColor(item.prepared.line) }"
             />
+            <span :class="$style['chart__pointer-tooltip-metrics']">
+              <span
+                :key="`tooltip-value-${item.prepared.index}-${item.value}`"
+                :class="$style['chart__pointer-tooltip-value']"
+              >
+                {{ formatSpacedNumber(item.value) }}
+              </span>
+              <span :class="$style['chart__pointer-tooltip-label']">
+                {{ item.prepared.line.label }}
+              </span>
+            </span>
           </div>
-        </template>
+        </div>
+      </div>
+    </div>
+    <div
+      v-if="legend"
+      :class="$style.chart__legend"
+    >
+      <div
+        v-for="(preparedLine, index) in preparedLines"
+        :key="`legend-${preparedLine.line.label}-${index}`"
+        :class="$style['chart__legend-item']"
+      >
+        <span
+          :class="$style['chart__legend-dot']"
+          :style="{ backgroundColor: getCursorColor(preparedLine.line) }"
+        />
+        {{ preparedLine.line.label }}
       </div>
     </div>
   </div>
@@ -90,9 +117,8 @@
 <script setup lang="ts">
 import { computed, onBeforeUnmount, onMounted, ref } from 'vue';
 import { ChartItem, ChartLineColors, ChartLine as ChartLineInterface } from './Chart.types';
-import { chartColorsDark, chartColorsLight } from './Chart.colors';
+import { chartColorsDark, chartColorsLight, resolveChartLineColor } from './Chart.colors';
 import { ColorScheme, useTheme } from '../../composables/useTheme';
-import AnimatedCounter from '../counter/Counter.vue';
 import ChartLine from './ChartLine.vue';
 import { throttle } from '../../utils';
 
@@ -104,6 +130,7 @@ interface PreparedLine {
   min: number;
   max: number;
   allZeros: boolean;
+  index: number;
 }
 
 interface Props {
@@ -113,14 +140,20 @@ interface Props {
   lines?: ChartLineInterface[];
 
   /**
-   * Detalization of the chart affects the legend and tooltip display
+   * Detalization of the chart affects the X-axis and tooltip display
    */
   detalization?: 'minutes' | 'hours' | 'days';
+
+  /**
+   * Show a static color legend below the chart (dots + series labels)
+   */
+  legend?: boolean;
 }
 
 const props = withDefaults(defineProps<Props>(), {
   lines: () => [] as ChartLineInterface[],
   detalization: 'days',
+  legend: false,
 });
 
 /**
@@ -157,6 +190,16 @@ const hoveredIndex = ref(-1);
  */
 const chart = ref<SVGElement | null>(null);
 
+/**
+ * Plot wrapper — used to know whether the cursor left the chart or just entered the tooltip
+ */
+const plot = ref<HTMLElement | null>(null);
+
+/**
+ * Cursor is over the tooltip: keep the last point, do not scrub
+ */
+const tooltipPinned = ref(false);
+
 /**
  * Cached chart left position for performance
  */
@@ -167,7 +210,7 @@ const chartLeft = ref(0);
  * This avoids recalculating O(n_data) on every render/mousemove
  */
 const preparedLines = computed((): PreparedLine[] => {
-  return props.lines.map((line) => {
+  return props.lines.map((line, index) => {
     let min = Infinity;
     let max = 0;
     let allZeros = true;
@@ -192,7 +235,8 @@ const preparedLines = computed((): PreparedLine[] => {
     return { line,
       min: safeMin,
       max: safeMax,
-      allZeros };
+      allZeros,
+      index };
   });
 });
 
@@ -204,9 +248,9 @@ const xLegendWidth = computed((): number => {
     case 'days':
       return 50;
     case 'hours':
-      return 75;
+      return 56;
     case 'minutes':
-      return 90;
+      return 50;
     default:
       return 55;
   }
@@ -267,6 +311,7 @@ const visibleXLegendItems = computed((): number => {
 const visibleLegendPoints = computed((): Array<{
   point: ChartItem;
   index: number;
+  includeDate: boolean;
 }> => {
   const step = visibleXLegendItems.value;
   const result: Array<{
@@ -291,7 +336,24 @@ const visibleLegendPoints = computed((): Array<{
     });
   }
 
-  return result;
+  /*
+   * First/last ticks are hidden in CSS. For minutes, put the calendar day
+   * on the first actually visible tick, and again if the day changes.
+   */
+  return result.map((item, i) => {
+    const date = new Date(item.point.timestamp * 1000);
+    const prev = i > 0 ? new Date(result[i - 1].point.timestamp * 1000) : null;
+    const dayChanged = prev !== null && (
+      prev.getFullYear() !== date.getFullYear()
+      || prev.getMonth() !== date.getMonth()
+      || prev.getDate() !== date.getDate()
+    );
+
+    return {
+      ...item,
+      includeDate: props.detalization === 'minutes' && (i === 1 || dayChanged),
+    };
+  });
 });
 
 /**
@@ -301,11 +363,58 @@ const pointerLeft = computed((): number => {
   return hoveredIndex.value * stepX.value;
 });
 
+/**
+ * Tooltip rows sorted by value desc (highest first)
+ */
+const tooltipLines = computed((): Array<{
+  prepared: PreparedLine;
+  value: number;
+}> => {
+  if (hoveredIndex.value < 0) {
+    return [];
+  }
+
+  return preparedLines.value
+    .filter(prepared => !prepared.allZeros)
+    .map(prepared => ({
+      prepared,
+      value: getLineValueAtHoveredIndex(prepared.line, hoveredIndex.value),
+    }))
+    .sort((a, b) => b.value - a.value);
+});
+
+/**
+ * Tooltip min-width based on the longest visible series row
+ */
+const tooltipMinWidth = computed((): number => {
+  if (hoveredIndex.value < 0 || !firstLineData.value[hoveredIndex.value]) {
+    return 100;
+  }
+
+  const dateLabel = formatTimestamp(firstLineData.value[hoveredIndex.value].timestamp * 1000);
+  let maxLength = dateLabel.length;
+
+  for (const prepared of preparedLines.value) {
+    if (prepared.allZeros) {
+      continue;
+    }
+
+    const value = formatSpacedNumber(getLineValueAtHoveredIndex(prepared.line, hoveredIndex.value));
+    const row = `${value} ${prepared.line.label}`;
+
+    if (row.length > maxLength) {
+      maxLength = row.length;
+    }
+  }
+
+  return maxLength * 5.6 + 28;
+});
+
 /**
  * Tooltip alignment class based on position to prevent overflow
  */
 const tooltipAlignment = computed((): string => {
-  const estimatedTooltipWidth = 100;
+  const estimatedTooltipWidth = tooltipMinWidth.value;
   const pointerX = hoveredIndex.value * stepX.value;
 
   if (pointerX < estimatedTooltipWidth / 2) {
@@ -358,6 +467,10 @@ const onResize = throttle(windowResized, 200);
  * @param event - mousemove
  */
 function moveTooltip(event: MouseEvent): void {
+  if (tooltipPinned.value) {
+    return;
+  }
+
   if (firstLineData.value.length === 0) {
     hoveredIndex.value = -1;
 
@@ -379,6 +492,39 @@ function moveTooltip(event: MouseEvent): void {
   hoveredIndex.value = clampedIndex;
 }
 
+/**
+ * Hide hover UI when the cursor leaves the plot, unless it entered the tooltip
+ */
+function leavePlot(): void {
+  if (tooltipPinned.value) {
+    return;
+  }
+
+  hoveredIndex.value = -1;
+}
+
+/**
+ * Freeze the hovered point while the cursor is on the tooltip
+ */
+function pinTooltip(): void {
+  tooltipPinned.value = true;
+}
+
+/**
+ * Resume scrubbing if the cursor returned to the plot, otherwise hide
+ *
+ * @param event - tooltip mouseleave
+ */
+function unpinTooltip(event: MouseEvent): void {
+  tooltipPinned.value = false;
+
+  const next = event.relatedTarget;
+
+  if (!(next instanceof Node) || plot.value?.contains(next) !== true) {
+    hoveredIndex.value = -1;
+  }
+}
+
 /**
  * Get the Y coordinate for a line's pointer cursor at the hovered index
  * Uses precomputed min/max from PreparedLine
@@ -426,58 +572,68 @@ function getLineValueAtHoveredIndex(line: ChartLineInterface, index: number): nu
 }
 
 /**
- * Return colors set for a particular chart line
+ * Pointer / legend / tooltip dot color for a series
  *
  * @param line - the chart line
  */
-function getLineColor(line: ChartLineInterface): ChartLineColors {
-  const colorName = line.color ?? 'red';
-
-  const color = chartColorsPalette.value.find(c => c.name === colorName);
-
-  if (!color) {
-    throw new Error(`Color ${colorName} not found in chartColors`);
-  }
-
-  return color;
+function getCursorColor(line: ChartLineInterface): string {
+  return resolveChartLineColor(line.color, chartColorsPalette.value).pointerColor;
 }
 
+const shortMonths = ['jan', 'feb', 'mar', 'apr', 'may', 'jun', 'jul', 'aug', 'sep', 'oct', 'nov', 'dec'];
+
 /**
- * Cursor is a pointer on the chart line appearing when hovering over it
+ * Compact axis label. Minutes get the date on the first visible tick (and on day change).
  *
- * @param line - the chart line
+ * @param timestamp - timestamp in milliseconds
+ * @param includeDate - prepend day + month
  */
-function getCursorColor(line: ChartLineInterface): string {
-  const color = getLineColor(line);
+function formatAxisTimestamp(timestamp: number, includeDate = false): string {
+  const date = new Date(timestamp);
+  const paddedHours = date.getHours()
+    .toString()
+    .padStart(2, '0');
+  const paddedMinutes = date.getMinutes()
+    .toString()
+    .padStart(2, '0');
+  const time = `${paddedHours}:${paddedMinutes}`;
+  const dayMonth = `${date.getDate()} ${shortMonths[date.getMonth()]}`;
+
+  if (props.detalization === 'days') {
+    return dayMonth;
+  }
 
-  return color.pointerColor;
+  if (includeDate) {
+    return `${dayMonth}, ${time}`;
+  }
+
+  return time;
 }
 
 /**
- * Formats timestamp based on detalization prop
+ * Tooltip timestamp: date+time for hours and minutes, date for days.
  *
  * @param timestamp - timestamp in milliseconds
  */
 function formatTimestamp(timestamp: number): string {
   const date = new Date(timestamp);
-  const shortMonths = ['jan', 'feb', 'mar', 'apr', 'may', 'jun', 'jul', 'aug', 'sep', 'oct', 'nov', 'dec'];
+  const day = date.getDate();
+  const month = shortMonths[date.getMonth()];
+  const paddedHours = date.getHours()
+    .toString()
+    .padStart(2, '0');
+  const paddedMinutes = date.getMinutes()
+    .toString()
+    .padStart(2, '0');
+  const time = `${paddedHours}:${paddedMinutes}`;
 
-  if (props.detalization === 'days') {
-    /* For days, show only day and month */
-    const day = date.getDate();
-    const month = date.getMonth();
-
-    return `${day} ${shortMonths[month]}`;
-  } else {
-    /* For hours and minutes, show day, month, hours:minutes */
-    const day = date.getDate();
-    const month = date.getMonth();
-    const hours = date.getHours();
-    const minutes = date.getMinutes();
-    const paddedHours = hours.toString().padStart(2, '0');
-    const paddedMinutes = minutes.toString().padStart(2, '0');
-
-    return `${day} ${shortMonths[month]}, ${paddedHours}:${paddedMinutes}`;
+  switch (props.detalization) {
+    case 'minutes':
+    case 'hours':
+      return `${day} ${month}, ${time}`;
+    case 'days':
+    default:
+      return `${day} ${month}`;
   }
 }
 
@@ -504,40 +660,28 @@ onBeforeUnmount(() => {
 });
 </script>
 
-<style module>
+<style module lang="postcss">
+@import '@/styles/typography.pcss';
+
 .chart {
   position: relative;
-  z-index: 0;
+  isolation: isolate;
   display: flex;
   flex-direction: column;
-  height: 215px;
+  overflow: visible;
   background-color: var(--base--bg-secondary);
   border-radius: var(--radius-s);
 
-  --legend-height: 40px;
-  --legend-line-height: 11px;
-  --legend-block-padding: 15px;
-}
-
-.chart__info {
-  position: absolute;
-  top: var(--spacing-ml);
-  right: var(--spacing-ml);
-  padding: var(--spacing-xs) var(--spacing-ms);
-  color: var(--base--text);
-  font-size: 13px;
-  white-space: nowrap;
-  background: color-mod(var(--base--bg-primary) alpha(50%));
-  border-radius: var(--radius-s);
-}
-
-.chart__info-today {
-  color: var(--base--text-secondary);
+  --legend-height: var(--spacing-xxl);
+  --legend-block-padding: var(--spacing-s);
 }
 
-.chart__info-highlight {
-  margin-left: var(--spacing-xs);
-  font-weight: bold;
+.chart__plot {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  height: 215px;
+  overflow: visible;
 }
 
 .chart__body {
@@ -560,10 +704,8 @@ onBeforeUnmount(() => {
   position: absolute;
   left: 0;
   color: var(--base--text);
-  font-size: 11px;
-  line-height: var(--legend-line-height);
+  @apply --text-ui-small;
   text-align: center;
-  transform-origin: center;
   opacity: 0.3;
   white-space: nowrap;
 }
@@ -577,7 +719,7 @@ onBeforeUnmount(() => {
   position: absolute;
   top: 0;
   left: 0;
-  z-index: 0;
+  z-index: var(--z-popover);
   width: 3px;
   height: 100%;
   margin-left: -1.5px;
@@ -589,33 +731,32 @@ onBeforeUnmount(() => {
 .chart__pointer-cursor {
   position: absolute;
   top: 0;
-  width: 7px;
-  height: 7px;
-  margin-top: -3.5px;
-  margin-left: -2px;
+  left: 50%;
+  width: var(--spacing-xs);
+  height: var(--spacing-xs);
+  margin-top: calc(var(--spacing-xs) / -2);
+  margin-left: calc(var(--spacing-xs) / -2);
   border-radius: 50%;
-  opacity: 1;
   will-change: transform;
 }
 
 .chart__pointer-tooltip {
-  --tooltip-block-padding: var(--spacing-xs);
+  --tooltip-block-padding: var(--spacing-xxs);
 
   position: absolute;
-  top: calc(100% - var(--legend-height) + var(--legend-block-padding) - var(--tooltip-block-padding) - 1px);
+  top: calc(100% - var(--legend-height) + var(--legend-block-padding) - var(--tooltip-block-padding) - var(--delimiter-height));
   left: 50%;
-  z-index: 500;
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-xs);
   padding-block: var(--tooltip-block-padding);
-  padding-inline: var(--spacing-s);
+  padding-inline: var(--spacing-xs);
   color: var(--base--text);
-  font-size: 12px;
-  line-height: 1.4;
-  letter-spacing: 0.2px;
+  @apply --text-ui-small;
   white-space: nowrap;
-  text-align: center;
   background: var(--base--bg-primary);
-  border-radius: var(--radius-m);
-  box-shadow: 0 7px 12px 0 rgba(0, 0, 0, 0.12);
+  border-radius: var(--radius-s);
+  box-shadow: 0 var(--spacing-s) var(--spacing-m) 0 rgba(0, 0, 0, 0.12);
   transform: translateX(-50%);
   transition: min-width 150ms ease;
 }
@@ -631,24 +772,69 @@ onBeforeUnmount(() => {
   transform: translateX(0);
 }
 
+.chart__legend {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--spacing-s) var(--spacing-ml);
+  padding: 0 var(--spacing-ml) var(--spacing-m);
+}
+
+.chart__legend-item {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+  color: var(--base--text-secondary);
+  @apply --text-ui-small;
+  white-space: nowrap;
+}
+
 .chart__pointer-tooltip-date {
-  margin-bottom: var(--spacing-very-x);
   color: var(--base--text-secondary);
-  font-size: 11px;
+  text-align: center;
 }
 
 .chart__pointer-tooltip-number {
-  font-weight: 500;
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+}
+
+.chart__pointer-tooltip-metrics {
+  display: flex;
+  align-items: baseline;
+  gap: var(--spacing-xs);
+}
+
+.chart__pointer-tooltip-value,
+.chart__pointer-tooltip-label {
+  line-height: 1;
+}
+
+.chart__pointer-tooltip-value {
+  color: var(--base--text);
+  animation: tooltip-value-in 500ms ease;
 }
 
+.chart__pointer-tooltip-label {
+  color: var(--base--text-secondary);
+}
+
+.chart__legend-dot,
 .chart__pointer-tooltip-dot {
-  display: inline-block;
-  width: 5px;
-  height: 5px;
+  flex-shrink: 0;
+  width: var(--spacing-xs);
+  height: var(--spacing-xs);
   border-radius: 50%;
-  vertical-align: middle;
-  margin-left: 2px;
-  margin-top: -1px;
+}
+
+@keyframes tooltip-value-in {
+  from {
+    transform: translateY(-5px);
+  }
+
+  to {
+    transform: none;
+  }
 }
 
 @keyframes pointer-in {
diff --git a/@codexteam/ui/src/vue/components/chart/ChartLine.vue b/@codexteam/ui/src/vue/components/chart/ChartLine.vue
index 9e7501bb..e103962e 100644
--- a/@codexteam/ui/src/vue/components/chart/ChartLine.vue
+++ b/@codexteam/ui/src/vue/components/chart/ChartLine.vue
@@ -11,7 +11,7 @@
         />
         <stop
           offset="100%"
-          :style="`stop-color:${colorSet.strokeEnd};`"
+          :style="{ 'stop-color': colorSet.strokeEnd }"
         />
       </linearGradient>
       <linearGradient
@@ -20,11 +20,11 @@
       >
         <stop
           offset="0%"
-          :style="`stop-color:${colorSet.fillStart};`"
+          :style="{ 'stop-color': colorSet.fillStart }"
         />
         <stop
           offset="100%"
-          :style="`stop-color:${colorSet.fillEnd};`"
+          :style="{ 'stop-color': colorSet.fillEnd }"
         />
       </linearGradient>
     </defs>
@@ -45,8 +45,8 @@
 
 <script setup lang="ts">
 import { computed } from 'vue';
-import { ChartItem, ChartLineColor, ChartLineColors } from './Chart.types';
-import { chartColorsDark, chartColorsLight } from './Chart.colors';
+import { ChartItem, ChartLineColor, ChartLineColorToken, ChartLineColors } from './Chart.types';
+import { chartColorsDark, chartColorsLight, resolveChartLineColor } from './Chart.colors';
 import { ColorScheme, useTheme } from '../../composables/useTheme';
 
 interface Props {
@@ -61,9 +61,9 @@ interface Props {
   label?: string;
 
   /**
-   * Name of the color for the chart line
+   * Palette token or hex (`#RGB` / `#RRGGBB`)
    */
-  color?: ChartLineColor;
+  color?: ChartLineColorToken;
 
   /**
    * Chart SVG clientWidth
@@ -245,7 +245,7 @@ const smoothPathFill = computed((): string => {
  * Color for the chart line
  */
 const colorSet = computed((): ChartLineColors => {
-  return chartColorsPalette.value.find(c => c.name === props.color) as ChartLineColors;
+  return resolveChartLineColor(props.color, chartColorsPalette.value);
 });
 </script>