مستند جامع تحلیل ApexOptions در ApexCharts

۱. مقدمه

مدل ApexOptions قلب تپنده کتابخانه ApexCharts است و تمام تنظیمات نمودار را در بر می‌گیرد. این مدل شامل ۲۵ فیلد اصلی است که هر کدام بخش خاصی از نمودار را کنترل می‌کنند. در این سند، هر فیلد به همراه زیرفیلدها، توضیحات و مثال‌های کاربردی بررسی شده است.

📌 نکته: تمام فیلدها اختیاری هستند و در صورت عدم تعریف، از مقادیر پیش‌فرض ApexCharts استفاده می‌شود.

۲. جدول کلی فیلدهای ApexOptions

ردیف	نام فیلد	توضیح
۱	`annotations`	حاشیه‌نویسی‌ها (خطوط، نقاط، متن‌ها)
۲	`chart`	تنظیمات اصلی نمودار (نوع، ابعاد، انیمیشن)
۳	`colors`	رنگ‌های سری‌های داده
۴	`dataLabels`	برچسب‌های داده روی نقاط
۵	`drilldown`	ناوبری عمیق (Drilldown)
۶	`fill`	پرکننده (رنگ، گرادیانت، الگو)
۷	`forecastDataPoints`	نقاط داده پیش‌بینی
۸	`grid`	شبکه‌بندی نمودار
۹	`labels`	برچسب‌های نمودار
۱۰	`legend`	راهنمای نمودار
۱۱	`markers`	نشانگرهای نقاط
۱۲	`noData`	پیام عدم وجود داده
۱۳	`plugins`	افزونه‌ها (Weave)
۱۴	`plotOptions`	گزینه‌های خاص هر نوع نمودار
۱۵	`responsive`	تنظیمات واکنش‌گرا
۱۶	`series`	سری‌های داده
۱۷	`states`	حالت‌های مختلف (hover, active)
۱۸	`stroke`	خطوط نمودار
۱۹	`subtitle`	زیرعنوان
۲۰	`theme`	تم (روشن/تاریک)
۲۱	`title`	عنوان نمودار
۲۲	`tooltip`	Tooltip (راهنمای شناور)
۲۳	`xaxis`	محور X
۲۴	`yaxis`	محور Y

۳. بررسی تفصیلی فیلدها

۳.۱. فیلد `annotations` - حاشیه‌نویسی‌ها

این فیلد برای اضافه کردن حاشیه‌نویسی‌های سفارشی (خطوط، نقاط، متن‌ها) به نمودار استفاده می‌شود.

زیرفیلدها:

xaxis: حاشیه‌نویسی‌های محور X (خطوط عمودی)
yaxis: حاشیه‌نویسی‌های محور Y (خطوط افقی)
points: حاشیه‌نویسی‌های نقطه‌ای
texts: متن‌های سفارشی
images: تصاویر سفارشی

ساختار XAxisAnnotations:

xaxis?: [
  {
    id?: number | string;
    x?: null | number | string;
    x2?: null | number | string;
    strokeDashArray?: number;
    fillColor?: string;
    borderColor?: string;
    borderWidth?: number;
    opacity?: number;
    offsetX?: number;
    offsetY?: number;
    label?: {
      text?: string | string[];
      textAnchor?: string;
      offsetX?: number;
      offsetY?: number;
      style?: {
        background?: string;
        color?: string;
        fontSize?: string;
        fontFamily?: string;
        fontWeight?: string | number;
        padding?: { left?: number; right?: number; top?: number; bottom?: number; };
      };
    };
  }
]

مثال کاربردی:

annotations: {
  xaxis: [{
    x: new Date('2024-06-01').getTime(),
    borderColor: '#FF0000',
    label: {
      borderColor: '#FF0000',
      style: { color: '#fff', background: '#FF0000' },
      text: 'تاریخ مهم'
    }
  }],
  yaxis: [{
    y: 50,
    borderColor: '#00FF00',
    label: { text: 'خط هدف', style: { color: '#00FF00' } }
  }],
  points: [{
    x: 'فروردین',
    y: 50,
    marker: { size: 8, fillColor: '#FF0000' },
    label: { text: 'نقطه مهم' }
  }]
}

۳.۲. فیلد `chart` - تنظیمات اصلی نمودار

این فیلد مهم‌ترین بخش تنظیمات است و رفتار کلی نمودار را کنترل می‌کند.

زیرفیلدهای اصلی:

width: عرض نمودار (عدد یا درصد)
height: ارتفاع نمودار (عدد یا درصد)
type: نوع نمودار (line, area, bar, pie, donut, radialBar, scatter, bubble, heatmap, candlestick, boxPlot, violin, histogram, radar, polarArea, rangeBar, rangeArea, treemap, waffle, sunburst, funnel, pyramid, gauge)
foreColor: رنگ متن پیش‌زمینه
fontFamily: فونت متن
background: رنگ پس‌زمینه
animations: تنظیمات انیمیشن
events: رویدادهای نمودار
toolbar: نوار ابزار
zoom: تنظیمات زوم
selection: تنظیمات انتخاب
stacked: نمودار پشته‌ای
stackType: نوع پشته (normal, 100%)

ساختار chart:

chart: {
  width?: string | number;
  height?: string | number;
  type?: 'line' | 'area' | 'bar' | 'pie' | 'donut' | 'radialBar' | 
         'scatter' | 'bubble' | 'heatmap' | 'candlestick' | 
         'boxPlot' | 'violin' | 'histogram' | 'radar' | 
         'polarArea' | 'rangeBar' | 'rangeArea' | 'treemap' | 
         'waffle' | 'sunburst' | 'funnel' | 'pyramid' | 'gauge';
  foreColor?: string;
  fontFamily?: string;
  background?: string;
  offsetX?: number;
  offsetY?: number;
  dropShadow?: {
    enabled?: boolean;
    top?: number;
    left?: number;
    blur?: number;
    opacity?: number;
    color?: string | string[];
  };
  events?: {
    animationEnd?(chart: ApexCharts, options?: any): void;
    beforeMount?(chart: ApexCharts, options?: any): void;
    mounted?(chart: ApexCharts, options?: any): void;
    updated?(chart: ApexCharts, options?: any): void;
    mouseMove?(e: MouseEvent, chart?: ApexCharts, options?: any): void;
    mouseLeave?(e: MouseEvent, chart?: ApexCharts, options?: any): void;
    click?(e: MouseEvent, chart?: ApexCharts, options?: any): void;
    legendClick?(chart: ApexCharts, seriesIndex?: number, options?: any): void;
    markerClick?(e: MouseEvent, chart?: ApexCharts, options?: any): void;
    selection?(chart: ApexCharts, options?: any): void;
    dataPointSelection?(e: MouseEvent, chart?: ApexCharts, options?: any): void;
    dataPointMouseEnter?(e: MouseEvent, chart?: ApexCharts, options?: any): void;
    dataPointMouseLeave?(e: MouseEvent, chart?: ApexCharts, options?: any): void;
    beforeZoom?(chart: ApexCharts, options?: any): boolean | void;
    beforeResetZoom?(chart: ApexCharts, options?: any): boolean | void;
    zoomed?(chart: ApexCharts, options?: any): void;
    scrolled?(chart: ApexCharts, options?: any): void;
    brushScrolled?(chart: ApexCharts, options?: any): void;
  };
  animations?: {
    enabled?: boolean;
    easing?: 'linear' | 'easeInSine' | 'easeOutSine' | 'easeInOutSine' | 
             'easeInQuad' | 'easeOutQuad' | 'easeInOutQuad' | 
             'easeInCubic' | 'easeOutCubic' | 'easeInOutCubic' | string | 
             [number, number, number, number] | ((t: number) => number);
    speed?: number;
    animateGradually?: { enabled?: boolean; delay?: number; };
    dynamicAnimation?: { enabled?: boolean; speed?: number; easing?: string; };
  };
  toolbar?: {
    show?: boolean;
    offsetX?: number;
    offsetY?: number;
    tools?: {
      download?: boolean | string;
      selection?: boolean | string;
      zoom?: boolean | string;
      zoomin?: boolean | string;
      zoomout?: boolean | string;
      pan?: boolean | string;
      reset?: boolean | string;
      measure?: boolean | string;
      customIcons?: Array<{
        icon?: string;
        title?: string;
        index?: number;
        class?: string;
        click?(chart: ApexCharts, options?: any, e?: MouseEvent): void;
      }>;
    };
    export?: {
      csv?: { filename?: string; columnDelimiter?: string; headerCategory?: string; headerValue?: string; };
      svg?: { filename?: string; };
      png?: { filename?: string; };
    };
    autoSelected?: 'zoom' | 'selection' | 'pan' | 'measure';
  };
  zoom?: {
    enabled?: boolean;
    type?: 'x' | 'y' | 'xy';
    autoScaleYaxis?: boolean;
    allowMouseWheelZoom?: boolean | 'auto';
    pinch?: boolean | 'auto';
    zoomedArea?: {
      fill?: { color?: string; opacity?: number; };
      stroke?: { color?: string; opacity?: number; width?: number; };
    };
  };
  selection?: {
    enabled?: boolean;
    type?: string;
    fill?: { color?: string; opacity?: number; };
    stroke?: { width?: number; color?: string; opacity?: number; dashArray?: number; };
    xaxis?: { min?: number; max?: number; };
    yaxis?: { min?: number; max?: number; };
  };
  stacked?: boolean;
  stackType?: 'normal' | '100%';
  id?: string;
  group?: string;
  locales?: Array<{ name?: string; options?: any; }>;
  defaultLocale?: string;
  parentHeightOffset?: number;
  redrawOnParentResize?: boolean;
  redrawOnWindowResize?: boolean | ((...args: any[]) => boolean);
  sparkline?: { enabled?: boolean; };
}

مثال کاربردی:

chart: {
  type: 'line',
  height: 350,
  foreColor: '#333',
  fontFamily: 'Vazirmatn, sans-serif',
  animations: {
    enabled: true,
    easing: 'easeInOutCubic',
    speed: 800,
    animateGradually: { enabled: true, delay: 150 },
    dynamicAnimation: { enabled: true, speed: 350 }
  },
  toolbar: {
    show: true,
    tools: {
      download: true,
      zoom: true,
      zoomin: true,
      zoomout: true,
      reset: true,
      customIcons: [{
        icon: '<svg>...</svg>',
        title: 'دکمه سفارشی',
        index: 0,
        click: (chart, options, e) => { console.log('کلیک شد'); }
      }]
    }
  },
  zoom: {
    enabled: true,
    type: 'x',
    autoScaleYaxis: false
  },
  events: {
    mounted: (chart, options) => { console.log('نمودار نصب شد'); },
    dataPointSelection: (e, chart, options) => { console.log('نقطه انتخاب شد'); }
  }
}

۳.۳. فیلد `colors` - رنگ‌های سری‌های داده

آرایه‌ای از رنگ‌ها برای سری‌های داده. هر سری با یک رنگ متفاوت نمایش داده می‌شود.

ساختار:

colors?: Array<string | ((opts: {
  value: number;
  seriesIndex: number;
  dataPointIndex: number;
  w: any;
}) => string)>

مثال کاربردی:

// رنگ‌های ثابت
colors: ['#008FFB', '#00E396', '#FEB019', '#FF4560', '#775DD0']

// رنگ‌های داینامیک بر اساس مقدار
colors: [
  function({ value, seriesIndex, dataPointIndex }) {
    return value > 50 ? '#00E396' : '#FF4560';
  }
]

۳.۴. فیلد `dataLabels` - برچسب‌های داده

برچسب‌هایی که روی نقاط داده نمایش داده می‌شوند.

ساختار:

dataLabels?: {
  enabled?: boolean;
  enabledOnSeries?: number[];
  formatter?(val: string | number | number[], opts?: any): string | number | (string | number)[];
  textAnchor?: 'start' | 'middle' | 'end';
  distributed?: boolean;
  offsetX?: number;
  offsetY?: number;
  style?: {
    fontSize?: string;
    fontFamily?: string;
    fontWeight?: string | number;
    colors?: string[];
  };
  background?: {
    enabled?: boolean;
    foreColor?: string;
    borderRadius?: number;
    padding?: number;
    opacity?: number;
    borderWidth?: number;
    borderColor?: string;
    dropShadow?: { enabled?: boolean; top?: number; left?: number; blur?: number; opacity?: number; color?: string | string[]; };
  };
  dropShadow?: { enabled?: boolean; top?: number; left?: number; blur?: number; opacity?: number; color?: string | string[]; };
}

مثال کاربردی:

dataLabels: {
  enabled: true,
  formatter: (val) => val + '%',
  style: {
    fontSize: '12px',
    fontFamily: 'Vazirmatn',
    colors: ['#fff']
  },
  background: {
    enabled: true,
    foreColor: '#fff',
    borderRadius: 4,
    padding: 4,
    borderColor: '#000',
    borderWidth: 1
  }
}

۳.۵. فیلد `fill` - پرکننده

تنظیمات پرکننده (رنگ، گرادیانت، الگو، تصویر).

ساختار:

fill?: {
  colors?: string[];
  opacity?: number | number[];
  type?: string | string[];
  gradient?: {
    shade?: string;
    type?: string;
    shadeIntensity?: number;
    gradientToColors?: string[];
    inverseColors?: boolean;
    opacityFrom?: number | number[];
    opacityTo?: number | number[];
    stops?: number[];
    colorStops?: Array<{ offset: number; color: string; opacity: number; }> | Array<Array<{ offset: number; color: string; opacity: number; }>>;
  };
  image?: {
    src?: string | string[];
    width?: number;
    height?: number;
  };
  pattern?: {
    style?: string | string[];
    width?: number;
    height?: number;
    strokeWidth?: number;
  };
}

مثال کاربردی:

fill: {
  type: 'gradient',
  gradient: {
    shade: 'light',
    type: 'vertical',
    shadeIntensity: 0.5,
    gradientToColors: ['#008FFB', '#00E396'],
    opacityFrom: 1,
    opacityTo: 0.5,
    stops: [0, 50, 100]
  }
}

۳.۶. فیلد `grid` - شبکه‌بندی

تنظیمات شبکه‌بندی نمودار.

ساختار:

grid?: {
  show?: boolean;
  borderColor?: string;
  strokeDashArray?: number;
  position?: 'front' | 'back';
  xaxis?: { lines?: { show?: boolean; offsetX?: number; offsetY?: number; }; };
  yaxis?: { lines?: { show?: boolean; offsetX?: number; offsetY?: number; }; };
  row?: { colors?: string[]; opacity?: number; };
  column?: { colors?: string[]; opacity?: number; };
  padding?: { top?: number; right?: number; bottom?: number; left?: number; };
}

مثال کاربردی:

grid: {
  show: true,
  borderColor: '#e0e0e0',
  strokeDashArray: 4,
  position: 'back',
  row: { colors: ['#f3f3f3', 'transparent'], opacity: 0.5 },
  padding: { top: 0, right: 10, bottom: 0, left: 10 }
}

۳.۷. فیلد `legend` - راهنمای نمودار

تنظیمات راهنمای نمودار (Legend).

ساختار:

legend?: {
  show?: boolean;
  showForSingleSeries?: boolean;
  showForNullSeries?: boolean;
  showForZeroSeries?: boolean;
  floating?: boolean;
  inverseOrder?: boolean;
  position?: 'top' | 'right' | 'bottom' | 'left';
  horizontalAlign?: 'left' | 'center' | 'right';
  fontSize?: string;
  fontFamily?: string;
  fontWeight?: string | number;
  width?: number;
  height?: number;
  formatter?(legendName: string, opts?: { seriesIndex: number; w: any; }): string;
  tooltipHoverFormatter?(legendName: string, opts?: { seriesIndex: number; w: any; }): string;
  customLegendItems?: string[];
  labels?: { colors?: string | string[]; useSeriesColors?: boolean; };
  markers?: {
    width?: number;
    height?: number;
    strokeColor?: string;
    strokeWidth?: number;
    radius?: number;
    customHTML?(): any;
    onClick?(): void;
    offsetX?: number;
    offsetY?: number;
  };
  itemMargin?: { horizontal?: number; vertical?: number; };
  onItemClick?: { toggleDataSeries?: boolean; };
  onItemHover?: { highlightDataSeries?: boolean; };
}

مثال کاربردی:

legend: {
  show: true,
  position: 'top',
  horizontalAlign: 'center',
  fontSize: '14px',
  fontFamily: 'Vazirmatn',
  markers: { width: 12, height: 12, radius: 6 },
  onItemClick: { toggleDataSeries: true },
  onItemHover: { highlightDataSeries: true }
}

۳.۸. فیلد `markers` - نشانگرها

تنظیمات نشانگرهای نقاط داده.

ساختار:

markers?: {
  size?: number | number[];
  colors?: string | string[];
  strokeColors?: string | string[];
  strokeWidth?: number | number[];
  strokeOpacity?: number | number[];
  strokeDashArray?: number | number[];
  fillOpacity?: number | number[];
  discrete?: Array<{
    seriesIndex?: number;
    dataPointIndex?: number;
    fillColor?: string;
    strokeColor?: string;
    size?: number;
  }>;
  shape?: 'circle' | 'square' | 'rect';
  offsetX?: number;
  offsetY?: number;
  hover?: { size?: number; sizeOffset?: number; };
  onClick?(e?: any): void;
  onDblClick?(e?: any): void;
  showNullDataPoints?: boolean;
}

مثال کاربردی:

markers: {
  size: 6,
  colors: ['#008FFB'],
  strokeColors: '#fff',
  strokeWidth: 2,
  hover: { size: 8, sizeOffset: 3 },
  discrete: [{
    seriesIndex: 0,
    dataPointIndex: 3,
    fillColor: '#FF0000',
    size: 10
  }]
}

۳.۹. فیلد `plotOptions` - گزینه‌های خاص هر نوع نمودار

این فیلد تنظیمات خاص هر نوع نمودار را شامل می‌شود.

ساختار (خلاصه):

plotOptions?: {
  bar?: {
    horizontal?: boolean;
    columnWidth?: string | number;
    barHeight?: string | number;
    distributed?: boolean;
    borderRadius?: number;
    borderRadiusApplication?: 'around' | 'end';
    borderRadiusWhenStacked?: 'all' | 'last';
    hideZeroBarsWhenGrouped?: boolean;
    rangeBarOverlap?: boolean;
    rangeBarGroupRows?: boolean;
    isDumbbell?: boolean;
    dumbbellColors?: string[][];
    colors?: {
      ranges?: Array<{ from?: number; to?: number; color?: string; }>;
      backgroundBarColors?: string[];
      backgroundBarOpacity?: number;
      backgroundBarRadius?: number;
    };
    dataLabels?: {
      maxItems?: number;
      hideOverflowingLabels?: boolean;
      position?: string;
      orientation?: 'horizontal' | 'vertical';
      total?: {
        enabled?: boolean;
        formatter?(val?: string, opts?: any): string;
        offsetX?: number;
        offsetY?: number;
        style?: { color?: string; fontSize?: string; fontFamily?: string; fontWeight?: string | number; };
      };
    };
  };
  bubble?: { minBubbleRadius?: number; maxBubbleRadius?: number; };
  candlestick?: {
    colors?: { upward?: string | string[]; downward?: string | string[]; };
    wick?: { useFillColor?: boolean; };
  };
  boxPlot?: {
    colors?: { upper?: string | string[]; lower?: string | string[]; };
  };
  heatmap?: {
    radius?: number;
    enableShades?: boolean;
    shadeIntensity?: number;
    reverseNegativeShade?: boolean;
    distributed?: boolean;
    useFillColorAsStroke?: boolean;
    colorScale?: {
      ranges?: Array<{ from?: number; to?: number; color?: string; foreColor?: string; name?: string; }>;
      inverse?: boolean;
      min?: number;
      max?: number;
    };
  };
  treemap?: {
    enableShades?: boolean;
    shadeIntensity?: number;
    distributed?: boolean;
    reverseNegativeShade?: boolean;
    useFillColorAsStroke?: boolean;
    dataLabels?: { format?: 'scale' | 'truncate'; };
    borderRadius?: number;
    colorScale?: {
      inverse?: boolean;
      ranges?: Array<{ from?: number; to?: number; color?: string; foreColor?: string; name?: string; }>;
      min?: number;
      max?: number;
    };
  };
  pie?: {
    startAngle?: number;
    endAngle?: number;
    customScale?: number;
    offsetX?: number;
    offsetY?: number;
    expandOnClick?: boolean;
    expandOffset?: number;
    dataLabels?: { offset?: number; };
  };
  donut?: {
    size?: string;
    background?: string;
    labels?: {
      show?: boolean;
      name?: { show?: boolean; fontSize?: string; fontFamily?: string; fontWeight?: string | number; offsetY?: number; color?: string; formatter?(val: string): string; };
      value?: { show?: boolean; fontSize?: string; fontFamily?: string; fontWeight?: string | number; offsetY?: number; color?: string; formatter?(val: number | string): string; };
      total?: { show?: boolean; showAlways?: boolean; label?: string; color?: string; fontFamily?: string; fontWeight?: string | number; fontSize?: string; formatter?(w: any): string; };
    };
  };
  radialBar?: {
    inverseOrder?: boolean;
    startAngle?: number;
    endAngle?: number;
    offsetX?: number;
    offsetY?: number;
    hollow?: {
      margin?: number;
      size?: string;
      background?: string;
      image?: string;
      imageWidth?: number;
      imageHeight?: number;
      imageOffsetX?: number;
      imageOffsetY?: number;
      imageClipped?: boolean;
      position?: 'front' | 'back';
      dropShadow?: { enabled?: boolean; top?: number; left?: number; blur?: number; opacity?: number; color?: string | string[]; };
    };
    track?: {
      show?: boolean;
      startAngle?: number;
      endAngle?: number;
      background?: string | string[];
      strokeWidth?: string;
      opacity?: number;
      margin?: number;
      dropShadow?: { enabled?: boolean; top?: number; left?: number; blur?: number; opacity?: number; color?: string | string[]; };
    };
    dataLabels?: {
      show?: boolean;
      name?: { show?: boolean; fontSize?: string; fontFamily?: string; fontWeight?: string | number; offsetY?: number; color?: string; };
      value?: { show?: boolean; fontSize?: string; fontFamily?: string; fontWeight?: string | number; offsetY?: number; color?: string; formatter?(val: number): string; };
      total?: { show?: boolean; label?: string; color?: string; fontFamily?: string; fontWeight?: string | number; fontSize?: string; formatter?(w: any): string; };
    };
  };
  radar?: {
    size?: number;
    offsetX?: number;
    offsetY?: number;
    polygons?: {
      strokeColors?: string | string[];
      strokeWidth?: string | number[];
      connectorColors?: string | string[];
      fill?: { colors?: string[]; };
    };
  };
  polarArea?: {
    rings?: { strokeColor?: string; strokeWidth?: number; };
    spokes?: { connectorColors?: string | string[]; strokeWidth?: number; };
  };
}

مثال کاربردی (Bar):

plotOptions: {
  bar: {
    horizontal: false,
    columnWidth: '70%',
    borderRadius: 4,
    borderRadiusApplication: 'end',
    distributed: false,
    dataLabels: {
      position: 'top',
      maxItems: 100,
      hideOverflowingLabels: true
    }
  }
}

مثال کاربردی (Pie):

plotOptions: {
  pie: {
    startAngle: 0,
    endAngle: 360,
    expandOnClick: true,
    expandOffset: 10,
    dataLabels: { offset: 0 }
  }
}

۳.۱۰. فیلد `responsive` - تنظیمات واکنش‌گرا

تنظیمات واکنش‌گرا برای اندازه‌های مختلف صفحه.

ساختار:

responsive?: Array<{
  breakpoint?: number;
  options?: ApexOptions;
}>

مثال کاربردی:

responsive: [
  {
    breakpoint: 480,
    options: {
      chart: { width: '100%', height: 250 },
      legend: { position: 'bottom' }
    }
  },
  {
    breakpoint: 768,
    options: {
      chart: { width: '100%', height: 300 },
      legend: { position: 'bottom' }
    }
  }
]

۳.۱۱. فیلد `states` - حالت‌های مختلف

تنظیمات حالت‌های مختلف (hover, active).

ساختار:

states?: {
  hover?: {
    filter?: {
      type?: 'none' | 'lighten' | 'darken';
      value?: number;
    };
  };
  active?: {
    allowMultipleDataPointsSelection?: boolean;
    filter?: {
      type?: 'none' | 'lighten' | 'darken';
      value?: number;
    };
  };
}

مثال کاربردی:

states: {
  hover: {
    filter: { type: 'darken', value: 0.15 }
  },
  active: {
    allowMultipleDataPointsSelection: false,
    filter: { type: 'darken', value: 0.35 }
  }
}

۳.۱۲. فیلد `stroke` - خطوط نمودار

تنظیمات خطوط نمودار.

ساختار:

stroke?: {
  show?: boolean;
  curve?: 'smooth' | 'straight' | 'stepline' | 'linestep' | 'monotoneCubic' | 
          ('smooth' | 'straight' | 'stepline' | 'linestep' | 'monotoneCubic')[];
  lineCap?: 'butt' | 'square' | 'round';
  colors?: string[];
  width?: number | number[];
  dashArray?: number | number[];
}

مثال کاربردی:

stroke: {
  show: true,
  curve: 'smooth',
  lineCap: 'round',
  colors: ['#008FFB'],
  width: 3,
  dashArray: 0
}

۳.۱۳. فیلد `theme` - تم

تنظیمات تم (روشن/تاریک).

ساختار:

theme?: {
  mode?: 'light' | 'dark' | '';
  palette?: string;
  monochrome?: {
    enabled?: boolean;
    color?: string;
    shadeTo?: 'light' | 'dark';
    shadeIntensity?: number;
  };
}

مثال کاربردی:

theme: {
  mode: 'light',
  palette: 'palette1',
  monochrome: {
    enabled: false,
    color: '#008FFB',
    shadeTo: 'light',
    shadeIntensity: 0.65
  }
}

۳.۱۴. فیلدهای `title` و `subtitle` - عنوان و زیرعنوان

تنظیمات عنوان و زیرعنوان نمودار.

ساختار:

title?: {
  text?: string;
  align?: 'left' | 'center' | 'right';
  margin?: number;
  offsetX?: number;
  offsetY?: number;
  floating?: boolean;
  style?: {
    fontSize?: string;
    fontFamily?: string;
    fontWeight?: string | number;
    color?: string;
  };
}

subtitle?: {
  text?: string;
  align?: 'left' | 'center' | 'right';
  margin?: number;
  offsetX?: number;
  offsetY?: number;
  floating?: boolean;
  style?: {
    fontSize?: string;
    fontFamily?: string;
    fontWeight?: string | number;
    color?: string;
  };
}

مثال کاربردی:

title: {
  text: 'نمودار فروش ماهانه',
  align: 'center',
  margin: 10,
  style: {
    fontSize: '18px',
    fontFamily: 'Vazirmatn',
    fontWeight: 'bold',
    color: '#333'
  }
},
subtitle: {
  text: 'آمار فروش سال ۱۴۰۳',
  align: 'center',
  style: {
    fontSize: '14px',
    color: '#666'
  }
}

۳.۱۵. فیلد `tooltip` - Tooltip

تنظیمات Tooltip (راهنمای شناور).

ساختار:

tooltip?: {
  enabled?: boolean;
  enabledOnSeries?: number[];
  shared?: boolean;
  followCursor?: boolean;
  intersect?: boolean;
  inverseOrder?: boolean;
  arrow?: boolean;
  custom?: Array<(opts: {
    series: number[][];
    seriesIndex: number;
    dataPointIndex: number;
    y1?: number;
    y2?: number;
    w: any;
  }) => string>;
  fillSeriesColor?: boolean;
  theme?: 'light' | 'dark';
  style?: {
    fontSize?: string;
    fontFamily?: string;
  };
  onDatasetHover?: { highlightDataSeries?: boolean; };
  x?: {
    show?: boolean;
    format?: string;
    formatter?(value: string | number, opts?: any): string;
  };
  y?: Array<{
    title?: { title?: string; formatter?(seriesName: string, opts?: any): string; };
    formatter?(value: number, opts?: any): string;
  }>;
  marker?: { show?: boolean; fillColors?: string[]; };
  items?: { display?: string; };
  fixed?: {
    enabled?: boolean;
    position?: string;
    offsetX?: number;
    offsetY?: number;
  };
}

مثال کاربردی:

tooltip: {
  enabled: true,
  shared: true,
  followCursor: false,
  intersect: false,
  theme: 'light',
  style: { fontSize: '12px', fontFamily: 'Vazirmatn' },
  x: { show: true, format: 'dd MMM' },
  y: [{
    title: { title: 'فروش: ' },
    formatter: (val) => val.toLocaleString('fa-IR') + ' تومان'
  }],
  marker: { show: true }
}

۳.۱۶. فیلد `xaxis` - محور X

تنظیمات محور X.

ساختار:

xaxis?: {
  type?: 'category' | 'datetime' | 'numeric';
  categories?: Array<string | number> | Array<Array<string | number>>;
  overwriteCategories?: number[] | string[];
  offsetX?: number;
  offsetY?: number;
  sorted?: boolean;
  labels?: {
    show?: boolean;
    rotate?: number;
    rotateAlways?: boolean;
    hideOverlappingLabels?: boolean;
    showDuplicates?: boolean;
    trim?: boolean;
    minHeight?: number;
    maxHeight?: number;
    style?: {
      colors?: string | string[];
      fontSize?: string;
      fontFamily?: string;
      fontWeight?: string | number;
      cssClass?: string;
    };
    offsetX?: number;
    offsetY?: number;
    format?: string;
    formatter?(value: string | number, timestamp?: number, opts?: any): string | string[];
    datetimeUTC?: boolean;
    datetimeFormatter?: {
      year?: string;
      month?: string;
      day?: string;
      hour?: string;
      minute?: string;
      second?: string;
    };
  };
  group?: {
    groups?: Array<{ title: string; cols: number }>;
    style?: {
      colors?: string | string[];
      fontSize?: string;
      fontFamily?: string;
      fontWeight?: string | number;
      cssClass?: string;
    };
  };
  axisBorder?: {
    show?: boolean;
    color?: string;
    width?: string | number;
    height?: number;
    offsetX?: number;
    offsetY?: number;
  };
  axisTicks?: {
    show?: boolean;
    borderType?: 'solid' | 'dotted';
    color?: string;
    width?: number;
    offsetX?: number;
    offsetY?: number;
  };
  tickPlacement?: string;
  tickAmount?: number | 'dataPoints';
  stepSize?: number;
  min?: number;
  max?: number;
  range?: number;
  floating?: boolean;
  position?: string;
  title?: {
    text?: string;
    offsetX?: number;
    offsetY?: number;
    style?: {
      color?: string;
      fontFamily?: string;
      fontWeight?: string | number;
      fontSize?: string;
      cssClass?: string;
    };
  };
  crosshairs?: {
    show?: boolean;
    width?: number | string;
    position?: string;
    opacity?: number;
    stroke?: { color?: string; width?: number; dashArray?: number; };
    fill?: {
      type?: string;
      color?: string;
      gradient?: {
        colorFrom?: string;
        colorTo?: string;
        stops?: number[];
        opacityFrom?: number;
        opacityTo?: number;
      };
    };
    dropShadow?: { enabled?: boolean; top?: number; left?: number; blur?: number; opacity?: number; color?: string | string[]; };
  };
  tooltip?: {
    enabled?: boolean;
    offsetY?: number;
    formatter?(value: string | number, opts?: any): string;
    style?: { fontSize?: string; fontFamily?: string; };
  };
}

مثال کاربردی:

xaxis: {
  type: 'category',
  categories: ['فروردین', 'اردیبهشت', 'خرداد', 'تیر', 'مرداد', 'شهریور', 'مهر'],
  labels: {
    show: true,
    rotate: -45,
    style: {
      fontSize: '12px',
      fontFamily: 'Vazirmatn',
      colors: ['#333']
    }
  },
  title: {
    text: 'ماه',
    style: { fontSize: '14px', fontWeight: 'bold' }
  },
  crosshairs: {
    show: true,
    stroke: { color: '#000', width: 1, dashArray: 0 }
  }
}

۳.۱۷. فیلد `yaxis` - محور Y

تنظیمات محور Y.

ساختار:

yaxis?: {
  show?: boolean;
  showAlways?: boolean;
  showForNullSeries?: boolean;
  seriesName?: string | string[];
  opposite?: boolean;
  reversed?: boolean;
  logarithmic?: boolean;
  logBase?: number;
  tickAmount?: number;
  stepSize?: number;
  forceNiceScale?: boolean;
  min?: number | ((min: number) => number);
  max?: number | ((max: number) => number);
  floating?: boolean;
  decimalsInFloat?: number;
  labels?: {
    show?: boolean;
    showDuplicates?: boolean;
    minWidth?: number;
    maxWidth?: number;
    style?: {
      colors?: string | string[];
      fontSize?: string;
      fontWeight?: string | number;
      fontFamily?: string;
      cssClass?: string;
    };
    offsetX?: number;
    offsetY?: number;
    rotate?: number;
    align?: 'left' | 'center' | 'right';
    padding?: number;
    formatter?(value: number, opts?: any): string | string[];
  };
  axisBorder?: {
    show?: boolean;
    color?: string;
    width?: number;
    offsetX?: number;
    offsetY?: number;
  };
  axisTicks?: {
    show?: boolean;
    borderType?: 'solid' | 'dotted';
    color?: string;
    width?: number;
    offsetX?: number;
    offsetY?: number;
  };
  title?: {
    text?: string;
    rotate?: number;
    offsetX?: number;
    offsetY?: number;
    style?: {
      color?: string;
      fontFamily?: string;
      fontWeight?: string | number;
      fontSize?: string;
      cssClass?: string;
    };
  };
  crosshairs?: {
    show?: boolean;
    position?: string;
    stroke?: { color?: string; width?: number; dashArray?: number; };
  };
  tooltip?: {
    enabled?: boolean;
    offsetX?: number;
  };
}

مثال کاربردی:

yaxis: {
  show: true,
  title: {
    text: 'مبلغ (تومان)',
    style: { fontSize: '14px', fontWeight: 'bold' }
  },
  labels: {
    show: true,
    formatter: (val) => val.toLocaleString('fa-IR'),
    style: { fontSize: '12px', fontFamily: 'Vazirmatn' }
  },
  min: 0,
  max: 100,
  tickAmount: 5
}

۳.۱۸. فیلد `noData` - پیام عدم وجود داده

تنظیمات پیام نمایش داده شده در صورت عدم وجود داده.

ساختار:

noData?: {
  text?: string;
  align?: 'left' | 'center' | 'right';
  verticalAlign?: 'top' | 'middle' | 'bottom';
  offsetX?: number;
  offsetY?: number;
  style?: {
    color?: string;
    fontSize?: string;
    fontFamily?: string;
  };
}

مثال کاربردی:

noData: {
  text: 'داده‌ای برای نمایش وجود ندارد',
  align: 'center',
  verticalAlign: 'middle',
  style: {
    color: '#999',
    fontSize: '16px',
    fontFamily: 'Vazirmatn'
  }
}

۴. خلاصه و جمع‌بندی

مدل ApexOptions با ۲۵ فیلد اصلی، کنترل کاملی بر تمام جنبه‌های نمودار ارائه می‌دهد. با استفاده از این فیلدها می‌توانید نمودارهای کاملاً سفارشی و حرفه‌ای ایجاد کنید.

💡 نکته مهم: برای استفاده بهینه، همیشه از مستندات رسمی ApexCharts (apexcharts.com/docs/options) استفاده کنید و مقادیر پیش‌فرض را بررسی کنید.

⚠️ هشدار: برخی فیلدها فقط برای انواع خاصی از نمودار کاربرد دارند. قبل از استفاده، مطمئن شوید که فیلد مورد نظر با نوع نمودار شما سازگار است.

طراحی و توسعه: هادی خزاعی اصل | وب‌سایت: https://saherelm.ir

📅 تاریخ تهیه: دوشنبه ۱۱ شهریور ۱۴۰۴

مستند جامع تحلیل ApexOptions در ApexCharts

۱. مقدمه

۲. جدول کلی فیلدهای ApexOptions

۳. بررسی تفصیلی فیلدها

۳.۱. فیلد annotations - حاشیه‌نویسی‌ها

زیرفیلدها:

ساختار XAxisAnnotations:

مثال کاربردی:

۳.۲. فیلد chart - تنظیمات اصلی نمودار

زیرفیلدهای اصلی:

ساختار chart:

مثال کاربردی:

۳.۳. فیلد colors - رنگ‌های سری‌های داده

ساختار:

مثال کاربردی:

۳.۴. فیلد dataLabels - برچسب‌های داده

ساختار:

مثال کاربردی:

۳.۵. فیلد fill - پرکننده

ساختار:

مثال کاربردی:

۳.۶. فیلد grid - شبکه‌بندی

ساختار:

مثال کاربردی:

۳.۷. فیلد legend - راهنمای نمودار

ساختار:

مثال کاربردی:

۳.۸. فیلد markers - نشانگرها

ساختار:

مثال کاربردی:

۳.۹. فیلد plotOptions - گزینه‌های خاص هر نوع نمودار

ساختار (خلاصه):

مثال کاربردی (Bar):

مثال کاربردی (Pie):

۳.۱۰. فیلد responsive - تنظیمات واکنش‌گرا

ساختار:

مثال کاربردی:

۳.۱۱. فیلد states - حالت‌های مختلف

ساختار:

مثال کاربردی:

۳.۱۲. فیلد stroke - خطوط نمودار

ساختار:

مثال کاربردی:

۳.۱۳. فیلد theme - تم

ساختار:

مثال کاربردی:

۳.۱۴. فیلدهای title و subtitle - عنوان و زیرعنوان

ساختار:

مثال کاربردی:

۳.۱۵. فیلد tooltip - Tooltip

ساختار:

مثال کاربردی:

۳.۱۶. فیلد xaxis - محور X

ساختار:

مثال کاربردی:

۳.۱۷. فیلد yaxis - محور Y

ساختار:

مثال کاربردی:

۳.۱۸. فیلد noData - پیام عدم وجود داده

ساختار:

مثال کاربردی:

۴. خلاصه و جمع‌بندی

۳.۱. فیلد `annotations` - حاشیه‌نویسی‌ها

۳.۲. فیلد `chart` - تنظیمات اصلی نمودار

۳.۳. فیلد `colors` - رنگ‌های سری‌های داده

۳.۴. فیلد `dataLabels` - برچسب‌های داده

۳.۵. فیلد `fill` - پرکننده

۳.۶. فیلد `grid` - شبکه‌بندی

۳.۷. فیلد `legend` - راهنمای نمودار

۳.۸. فیلد `markers` - نشانگرها

۳.۹. فیلد `plotOptions` - گزینه‌های خاص هر نوع نمودار

۳.۱۰. فیلد `responsive` - تنظیمات واکنش‌گرا

۳.۱۱. فیلد `states` - حالت‌های مختلف

۳.۱۲. فیلد `stroke` - خطوط نمودار

۳.۱۳. فیلد `theme` - تم

۳.۱۴. فیلدهای `title` و `subtitle` - عنوان و زیرعنوان

۳.۱۵. فیلد `tooltip` - Tooltip

۳.۱۶. فیلد `xaxis` - محور X

۳.۱۷. فیلد `yaxis` - محور Y

۳.۱۸. فیلد `noData` - پیام عدم وجود داده