last woks fo x-chart component testing ...

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

@@ -27,12 +27,16 @@
     class="v-card"
     [type]="'line'"
     [isInPage]="true"
+    [title]="chartTitle"
     [cardTitle]="'Chart'"
     [wrapWithCard]="true"
     [showActionBar]="true"
     [series]="chartSeries"
+    [subTitleAlign]="'start'"
+    [subTitle]="'Sub Title'"
     [options]="chartOptions"
     (chartRendered)="onChartReady()"
+    [gridColor]="ColorNames.LightShade"
     [availableActionBarItems]="availableActionBarItems"
     (actionBarActionFired)="handleActionBarActionFired($event)"
   >

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

@@ -6,7 +6,13 @@ import {
   XActionBarActionFiredModel,
 } from 'x-framework-components';
 import { Component } from '@angular/core';
-import { isNullOrEmptyString } from 'x-framework-core';
+import {
+  getXColorCssVariableName,
+  getXColorValue,
+  isNullOrEmptyString,
+  parseXColor,
+  XColorWithBrightness,
+} from 'x-framework-core';
 import { VPageComponent } from '../../../views/v-page/v-page.component';
 import { AppResourceIDs } from 'src/app/config/app.localization.config';
 
@@ -112,6 +118,9 @@ export class ChartPage extends VPageComponent {
     },
   ];
 
+  //
+  chartTitle = 'نمودار فروش ماهانه';
+
   //
   chartOptions: XChartOptions = {
     chart: {
@@ -227,7 +236,7 @@ export class ChartPage extends VPageComponent {
         show: false,
       },
     },
-    colors: ['#77B6EA', '#545454'],
+    // colors: ['#77B6EA', '#545454'],
     dataLabels: {
       enabled: true,
     },
@@ -238,9 +247,6 @@ export class ChartPage extends VPageComponent {
       text: 'Average High & Low Temperature',
       align: 'left',
     },
-    grid: {
-      borderColor: '#e7e7e7',
-    },
     markers: {
       size: 1,
     },
@@ -327,6 +333,10 @@ export class ChartPage extends VPageComponent {
 
   //#endregion
 
+  //
+  //#region LifeCycles ...
+  //#endregion
+
   //
   //#region UI Providers ...
   /**