last ...

src/app/pages/components/chart/chart.page.html

@@ -22,8 +22,8 @@
     ></x-markdown>
   </x-card>
 
-  <!-- Component -->
+  <!-- Simple Sample -->
-  <x-chart
+  <!-- <x-chart
     class="v-card"
     [type]="'line'"
     [isInPage]="true"
@@ -40,5 +40,27 @@
     [availableActionBarItems]="availableActionBarItems"
     (actionBarActionFired)="handleActionBarActionFired($event)"
   >
+  </x-chart> -->
+
+  <!-- Annotation Sample -->
+  <x-chart
+    class="v-card"
+    [isInPage]="true"
+    [wrapWithCard]="true"
+    [showActionBar]="true"
+    [type]="annSampleChartType"
+    [xAxis]="annSampleChartXAxis"
+    [yAxis]="annSampleChartYAxis"
+    [title]="annSampleChartTitle"
+    [series]="annSampleChartSeries"
+    (chartRendered)="onChartReady()"
+    [cardTitle]="annSampleChartTitle"
+    [gridColor]="ColorNames.LightShade"
+    [titleAlign]="annSampleChartTitleAlign"
+    [availableActionBarItems]="availableActionBarItems"
+    (actionBarActionFired)="handleActionBarActionFired($event)"
+    >
+    <!-- [annotations]="annSampleChartAnnotations" -->
   </x-chart>
+
 </v-page>

src/app/pages/components/chart/chart.page.ts

@@ -4,9 +4,14 @@ import {
   XChartActionBarItem,
   XActionBarActionFiredModel,
   XChartAvailableActionBarItem,
+  XChartType,
+  XChartAnnotations,
+  XChartTextAlign,
+  XChartXAxis,
+  XChartYAxis,
 } from 'x-framework-components';
 import { Component } from '@angular/core';
-import { isNullOrEmptyString } from 'x-framework-core';
+import { isNullOrEmptyString, XOneOrManyType } from 'x-framework-core';
 import { VPageComponent } from '../../../views/v-page/v-page.component';
 import { AppResourceIDs } from 'src/app/config/app.localization.config';
 
@@ -323,8 +328,193 @@ export class ChartPage extends VPageComponent {
   // Url: https://apexcharts.com/javascript-chart-demos/treemap-charts/color-scale/
   //#endregion
 
-  //#endregion
+  //
+  //#region Annotations Sample ....
+  annSampleChartType = XChartType.Line;
+  annSampleChartSeries: XChartSeriesType = [
+    {
+      name: 'فروش ماهانه',
+      data: [45, 52, 38, 65, 72, 85, 92, 88, 95, 102, 115, 125]
+    }
+  ];
+  annSampleChartAnnotations: XChartAnnotations = {
+    // خطوط افقی (محدوده‌های هدف)
+    yaxis: [
+      {
+        // خط هدف فروش
+        y: 100,
+        borderColor: '#00E396',
+        borderWidth: 2,
+        label: {
+          borderColor: '#00E396',
+          style: {
+            color: '#fff',
+            background: '#00E396',
+            fontSize: '12px',
+            fontWeight: 'bold'
+          },
+          text: 'هدف فروش: 100 میلیون'
+        }
+      },
+      {
+        // خط هشدار
+        y: 50,
+        borderColor: '#FF4560',
+        borderWidth: 2,
+        strokeDashArray: 5,
+        label: {
+          borderColor: '#FF4560',
+          style: {
+            color: '#fff',
+            background: '#FF4560',
+            fontSize: '12px'
+          },
+          text: 'حداقل فروش: 50 میلیون'
+        }
+      }
+    ],
 
+    // خطوط عمودی (رویدادهای خاص)
+    xaxis: [
+      {
+        // رویداد مهم: شروع کمپین تبلیغاتی
+        x: new Date('2024-04-01').getTime(),
+        borderColor: '#775DD0',
+        borderWidth: 2,
+        strokeDashArray: 0,
+        label: {
+          borderColor: '#775DD0',
+          style: {
+            color: '#fff',
+            background: '#775DD0',
+            fontSize: '11px',
+            fontWeight: 'bold'
+          },
+          orientation: 'horizontal',
+          text: 'شروع کمپین تبلیغاتی'
+        }
+      },
+      {
+        // محدوده زمانی خاص (جشنواره)
+        x: new Date('2024-07-01').getTime(),
+        x2: new Date('2024-07-15').getTime(),
+        fillColor: '#FEB019',
+        opacity: 0.2,
+        label: {
+          borderColor: '#FEB019',
+          style: {
+            color: '#FEB019',
+            background: '#FEB019',
+            fontSize: '11px'
+          },
+          text: 'جشنواره تابستانی'
+        }
+      },
+      {
+        // رویداد: پایان سال مالی
+        x: new Date('2024-12-31').getTime(),
+        borderColor: '#FF4560',
+        borderWidth: 3,
+        strokeDashArray: 5,
+        label: {
+          borderColor: '#FF4560',
+          style: {
+            color: '#fff',
+            background: '#FF4560',
+            fontSize: '11px',
+            fontWeight: 'bold'
+          },
+          orientation: 'horizontal',
+          text: 'پایان سال مالی'
+        }
+      }
+    ],
+
+    // نقاط مهم (Points)
+    points: [
+      {
+        // بیشترین فروش
+        x: new Date('2024-12-01').getTime(),
+        y: 125,
+        marker: {
+          size: 10,
+          fillColor: '#00E396',
+          strokeColor: '#00E396',
+          strokeWidth: 3
+        },
+        label: {
+          borderColor: '#00E396',
+          style: {
+            color: '#fff',
+            background: '#00E396',
+            fontSize: '11px',
+            fontWeight: 'bold'
+          },
+          text: 'بیشترین فروش: 125 میلیون',
+          orientation: 'horizontal'
+        }
+      },
+      {
+        // کمترین فروش
+        x: new Date('2024-03-01').getTime(),
+        y: 38,
+        marker: {
+          size: 10,
+          fillColor: '#FF4560',
+          strokeColor: '#FF4560',
+          strokeWidth: 3
+        },
+        label: {
+          borderColor: '#FF4560',
+          style: {
+            color: '#fff',
+            background: '#FF4560',
+            fontSize: '11px',
+            fontWeight: 'bold'
+          },
+          text: 'کمترین فروش: 38 میلیون',
+          orientation: 'horizontal'
+        }
+      }
+    ],
+
+    // متن‌های سفارشی
+    texts: [
+      {
+        x: 95,
+        y: 95,
+        text: 'رشد 180% در سال',
+        textAnchor: 'end',
+        fontSize: '14px',
+        fontWeight: 'bold',
+        foreColor: '#00E396'
+      }
+    ]
+  };
+  annSampleChartXAxis: XChartXAxis = {
+    type: 'datetime',
+    labels: {
+      datetimeUTC: false
+    }
+  };
+  annSampleChartYAxis: XOneOrManyType<XChartYAxis> = [
+    {
+      title: {
+        text: 'مبلغ (میلیون تومان)'
+      },
+      labels: {
+        formatter: (val) => `${val}M`
+      }
+    }
+  ];
+  annSampleChartTitleAlign = XChartTextAlign.Center;
+  annSampleChartTitle = 'نمودار فروش سالانه با رویدادهای مهم';
+  annSampleChartStroke = {
+    curve: 'smooth',
+    width: 3
+  };
+  //#endregion
+  //#endregion
   //#endregion
 
   //

src/theme/theme.scss

@@ -116,7 +116,7 @@ body {
   // white-space: pre;
   word-spacing: normal;
   word-break: normal;
-  background-color: black;
+  background-color: inherit;
 
   //
   overflow: hidden;