last ...

angular.json

@@ -18,7 +18,7 @@
       "prefix": "app",
       "architect": {
         "build": {
-          "builder": "@angular-devkit/build-angular:browser",
+          "builder": "@angular-builders/custom-webpack:browser",
           "options": {
             "outputPath": "www",
             "index": "src/index.html",
@@ -149,4 +149,4 @@
       "styleext": "scss"
     }
   }
-}
+}

package.json

@@ -58,6 +58,7 @@
     "zone.js": "~0.11.4"
   },
   "devDependencies": {
+    "@angular-builders/custom-webpack": "^12.1.1",
     "@angular-devkit/build-angular": "~12.1.3",
     "@angular/cdk": "^12.1.3",
     "@angular/cli": "~12.1.3",
@@ -106,6 +107,7 @@
     "ng-packagr": "^12.1.2",
     "ngx-device-detector": "^2.1.1",
     "ngx-markdown": "^12.0.1",
+    "node-polyfill-webpack-plugin": "^1.1.4",
     "ol": "^6.6.1",
     "shx": "^0.3.3",
     "typescript": "~4.3.5",

polyfill-webpack.config.js

@@ -0,0 +1,14 @@
+const NodePolyfillPlugin = require("node-polyfill-webpack-plugin")
+
+module.exports = {
+  plugins: [
+    new NodePolyfillPlugin({
+      excludeAliases: ["console"]
+    })
+  ],
+  resolve: {
+    fallback: {
+        fs: false,
+    }
+  }
+};

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

@@ -1,9 +1,9 @@
 import {
   XChartOptions,
   XChartSeriesType,
-  XChartAvailableActionBarItem,
   XChartActionBarItem,
   XActionBarActionFiredModel,
+  XChartAvailableActionBarItem,
 } from 'x-framework-components';
 import { Component } from '@angular/core';
 import { isNullOrEmptyString } from 'x-framework-core';
@@ -112,6 +112,9 @@ export class ChartPage extends VPageComponent {
     },
   ];
 
+  //
+  chartTitle = 'نمودار فروش ماهانه';
+
   //
   chartOptions: XChartOptions = {
     chart: {
@@ -227,7 +230,7 @@ export class ChartPage extends VPageComponent {
         show: false,
       },
     },
-    colors: ['#77B6EA', '#545454'],
+    // colors: ['#77B6EA', '#545454'],
     dataLabels: {
       enabled: true,
     },
@@ -238,9 +241,6 @@ export class ChartPage extends VPageComponent {
       text: 'Average High & Low Temperature',
       align: 'left',
     },
-    grid: {
-      borderColor: '#e7e7e7',
-    },
     markers: {
       size: 1,
     },
@@ -327,6 +327,10 @@ export class ChartPage extends VPageComponent {
 
   //#endregion
 
+  //
+  //#region LifeCycles ...
+  //#endregion
+
   //
   //#region UI Providers ...
   /**