last config ...

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

@@ -25,13 +25,16 @@
   <!-- Component -->
   <x-chart
     class="v-card"
-    [type]="'bar'"
+    [type]="'line'"
     [isInPage]="true"
     [cardTitle]="'Chart'"
     [wrapWithCard]="true"
+    [showActionBar]="true"
     [series]="chartSeries"
     [options]="chartOptions"
     (chartRendered)="onChartReady()"
+    [availableActionBarItems]="availableActionBarItems"
+    (actionBarActionFired)="handleActionBarActionFired($event)"
   >
   </x-chart>
 </v-page>

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

@@ -1,8 +1,14 @@
-import { Component, ViewChild } from '@angular/core';
+import {
+  XChartOptions,
+  XChartSeriesType,
+  XChartAvailableActionBarItem,
+  XChartActionBarItem,
+  XActionBarActionFiredModel,
+} from 'x-framework-components';
+import { Component } from '@angular/core';
 import { isNullOrEmptyString } from 'x-framework-core';
 import { VPageComponent } from '../../../views/v-page/v-page.component';
 import { AppResourceIDs } from 'src/app/config/app.localization.config';
-import { XChartOptions, XChartSeriesType } from 'x-framework-components';
 
 @Component({
   selector: 'app-chart',
@@ -17,6 +23,46 @@ export class ChartPage extends VPageComponent {
   toolbarTitle = this.resourceProvider(this.titleRes);
   toolbarSubTitle = this.resourceProvider(AppResourceIDs.form_description);
 
+  //
+  availableActionBarItems: Array<XChartAvailableActionBarItem> = [
+    {
+      actionId: XChartActionBarItem.Pan,
+    },
+    {
+      actionId: XChartActionBarItem.ZoomIn,
+    },
+    {
+      actionId: XChartActionBarItem.ZoomOut,
+    },
+    {
+      actionId: XChartActionBarItem.ZoomSelection,
+    },
+    {
+      actionId: XChartActionBarItem.ToggleFullScreen,
+    },
+    {
+      actionId: XChartActionBarItem.Print,
+    },
+    {
+      actionId: XChartActionBarItem.ExportAsCSV,
+    },
+    {
+      actionId: XChartActionBarItem.ExportAsPNG,
+    },
+    {
+      actionId: XChartActionBarItem.ExportAsSVG,
+    },
+    {
+      actionId: XChartActionBarItem.XSelection,
+    },
+    {
+      actionId: XChartActionBarItem.YSelection,
+    },
+    {
+      actionId: XChartActionBarItem.XYSelection,
+    },
+  ];
+
   readonly contentFa = `
   # ${this.toolbarTitle}
 
@@ -66,10 +112,8 @@ export class ChartPage extends VPageComponent {
   //
   chartOptions: XChartOptions = {
     chart: {
-      type: 'line',
       height: 350,
       fontFamily: 'Vazirmatn, sans-serif', // فونت فارسی
-      toolbar: { show: true },
     },
     xaxis: {
       categories: [
@@ -94,6 +138,190 @@ export class ChartPage extends VPageComponent {
     tooltip: { theme: 'dark' },
     dataLabels: { enabled: false },
   };
+
+  //
+  //#region Chart Samples ...
+
+  //
+  //#region Sample 1 ...
+  // Title: Basic Line Chart
+  // Description:
+  // Url: https://apexcharts.com/javascript-chart-demos/line-charts/basic-line/
+  sample1_options = {
+    series: [
+      {
+        name: 'Sign-ups',
+        data: [210, 380, 340, 520, 480, 610, 700, 880, 820, 1040, 1180, 1520],
+      },
+    ],
+    chart: {
+      height: 350,
+      type: 'line',
+      zoom: {
+        enabled: false,
+      },
+    },
+    dataLabels: {
+      enabled: false,
+    },
+    stroke: {
+      curve: 'straight',
+    },
+    title: {
+      text: 'New Sign-ups by Month',
+      align: 'left',
+    },
+    xaxis: {
+      categories: [
+        'Jan',
+        'Feb',
+        'Mar',
+        'Apr',
+        'May',
+        'Jun',
+        'Jul',
+        'Aug',
+        'Sep',
+        'Oct',
+        'Nov',
+        'Dec',
+      ],
+    },
+  };
+  //#endregion
+
+  //
+  //#region Sample 2 ...
+  // Title: Line with Data Labels
+  // Description:
+  // Url: https://apexcharts.com/javascript-chart-demos/line-charts/line-with-data-labels/
+  sample2_options = {
+    series: [
+      {
+        name: 'High - 2025',
+        data: [28, 29, 33, 36, 32, 32, 33],
+      },
+      {
+        name: 'Low - 2025',
+        data: [12, 11, 14, 18, 17, 13, 13],
+      },
+    ],
+    chart: {
+      height: 350,
+      type: 'line',
+      dropShadow: {
+        enabled: true,
+        color: '#000',
+        top: 18,
+        left: 7,
+        blur: 10,
+        opacity: 0.2,
+      },
+      zoom: {
+        enabled: false,
+      },
+      toolbar: {
+        show: false,
+      },
+    },
+    colors: ['#77B6EA', '#545454'],
+    dataLabels: {
+      enabled: true,
+    },
+    stroke: {
+      curve: 'smooth',
+    },
+    title: {
+      text: 'Average High & Low Temperature',
+      align: 'left',
+    },
+    grid: {
+      borderColor: '#e7e7e7',
+    },
+    markers: {
+      size: 1,
+    },
+    xaxis: {
+      categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'],
+      title: {
+        text: 'Month',
+      },
+    },
+    yaxis: {
+      title: {
+        text: 'Temperature (°C)',
+      },
+      min: 5,
+      max: 40,
+    },
+    legend: {
+      position: 'top',
+      horizontalAlign: 'right',
+      floating: true,
+      offsetY: -25,
+      offsetX: -5,
+    },
+  };
+  //#endregion
+
+  //
+  //#region Sample 3 ...
+  // Title: Zoomable Timeseries
+  // Description:
+  // Url: https://apexcharts.com/javascript-chart-demos/line-charts/zoomable-timeseries/
+  //#endregion
+
+  //
+  //#region Sample 4 ...
+  // Title: Line with Annotations
+  // Description:
+  // Url: https://apexcharts.com/javascript-chart-demos/line-charts/line-with-annotations/
+  //#endregion
+
+  //
+  //#region Sample 5 ...
+  // Title: Annotations with Tooltips
+  // Description:
+  // Url: https://apexcharts.com/javascript-chart-demos/line-charts/line-with-annotation-tooltips/
+  //#endregion
+
+  //
+  //#region Sample 6 ...
+  // Title: Basic Candlestick
+  // Description:
+  // Url: https://apexcharts.com/javascript-chart-demos/candlestick-charts/basic/
+  //#endregion
+
+  //
+  //#region Sample 7 ...
+  // Title: Candlestick + Bar
+  // Description:
+  // Url: https://apexcharts.com/javascript-chart-demos/candlestick-charts/candlestick-bar/
+  //#endregion
+
+  //
+  //#region Sample 8 ...
+  // Title: Candlestick + Line
+  // Description:
+  // Url: https://apexcharts.com/javascript-chart-demos/candlestick-charts/candlestick-line/
+  //#endregion
+
+  //
+  //#region Sample 9 ...
+  // Title: Slope Multi Group
+  // Description:
+  // Url: https://apexcharts.com/javascript-chart-demos/slope-charts/multi-group/
+  //#endregion
+
+  //
+  //#region Sample 10 ...
+  // Title: Color Scale
+  // Description:
+  // Url: https://apexcharts.com/javascript-chart-demos/treemap-charts/color-scale/
+  //#endregion
+
+  //#endregion
+
   //#endregion
 
   //
@@ -139,5 +367,10 @@ export class ChartPage extends VPageComponent {
     //   dissmissable: true,
     // });
   }
+
+  async handleActionBarActionFired(event: XActionBarActionFiredModel) {
+    //
+    console.log('actionBar Fired: ', event.action);
+  }
   //#endregion
 }