@syncfusion/react-grid-chart 35.1.37

package/src/grid-chart/types/grid-chart.interfaces.d.ts

@@ -0,0 +1,1066 @@
+import { Chart, IChart, IPieChart, PieChart } from '@syncfusion/react-charts';
+import { Dialog } from '@syncfusion/react-popups';
+import { ComponentProps, ComponentType, Dispatch, ReactElement, ReactNode, RefObject, SetStateAction, SVGProps } from 'react';
+/**
+ * Defines the context type for the GridChart component.
+ * Provides centralized state management for chart configuration, formatting, and UI state.
+ * Used throughout the GridChart component tree via React Context API.
+ *
+ * @interface GridChartContextType
+ * @private
+ *
+ * @example
+ * ```tsx
+ * const context = useGridChartSettings();
+ * context.setChartInfo({ chart: 'Column', isChart: true, isPieChart: false });
+ * context.setFormat({ ...context.format, titleText: 'Sales Report' });
+ * ```
+ */
+export interface GridChartContextType {
+    /**
+     * Reference to the current GridChart settings.
+     * Contains the chart configuration, data source, category, and series information.
+     *
+     * @type {RefObject<GridChartSettings>}
+     */
+    settings: RefObject<GridChartSettings>;
+    /**
+     * Current chart information including chart type and classification.
+     * Determines which UI elements and formatting options are available.
+     *
+     * @type {ChartInfo}
+     * @default { chart: 'Column', isChart: true, isPieChart: false }
+     */
+    chartInfo: ChartInfo;
+    /**
+     * State setter for updating chart information.
+     * Use to change the chart type and related metadata.
+     *
+     * @type {Dispatch<SetStateAction<ChartInfo>>}
+     */
+    setChartInfo: Dispatch<SetStateAction<ChartInfo>>;
+    /**
+     * Current field selected for the category (X-axis) of the chart.
+     * Used by column, bar, line, and area charts.
+     *
+     * @type {string}
+     * @default ''
+     */
+    categoryAxis: string;
+    /**
+     * State setter for updating the category axis field.
+     * Triggers chart re-render when changed.
+     *
+     * @type {Dispatch<SetStateAction<string>>}
+     */
+    setCategoryAxis: Dispatch<SetStateAction<string>>;
+    /**
+     * Array of field names selected as data series for the chart.
+     * Multiple series can be displayed simultaneously for comparison.
+     *
+     * @type {string[]}
+     * @default []
+     */
+    series: string[];
+    /**
+     * State setter for updating the series array.
+     * Used to add or remove data series from the chart.
+     *
+     * @type {Dispatch<SetStateAction<string[]>>}
+     */
+    setSeries: Dispatch<SetStateAction<string[]>>;
+    /**
+     * Current field selected for the value (Y-axis) of the chart.
+     * Used by pie charts and scatter charts.
+     *
+     * @type {string}
+     * @default ''
+     */
+    valueAxis: string;
+    /**
+     * State setter for updating the value axis field.
+     * Used primarily for pie and scatter chart configurations.
+     *
+     * @type {Dispatch<SetStateAction<string>>}
+     */
+    setValueAxis: Dispatch<SetStateAction<string>>;
+    /**
+     * Reference to the Syncfusion Chart component (for non-pie charts).
+     * Provides access to chart methods and properties for column, bar, line, area, and scatter charts.
+     *
+     * @type {RefObject<IChart>}
+     * @default null
+     */
+    chartRef: RefObject<IChart>;
+    /**
+     * Reference to the Syncfusion PieChart component (for pie charts).
+     * Provides access to pie chart-specific methods and properties.
+     *
+     * @type {RefObject<IPieChart>}
+     * @default null
+     */
+    pieChartRef: RefObject<IPieChart>;
+    /**
+     * Controls visibility of the property panel (side panel with formatting options).
+     * When true, the Format tab and other configuration options are displayed.
+     *
+     * @type {boolean}
+     * @default false
+     */
+    showSidePanel: boolean;
+    /**
+     * State setter for toggling the side panel visibility.
+     * Used to show/hide the property panel with formatting controls.
+     *
+     * @type {Dispatch<SetStateAction<boolean>>}
+     */
+    setShowSidePanel: Dispatch<SetStateAction<boolean>>;
+    /**
+     * Current formatting configuration for the chart.
+     * Includes margins, colors, fonts, and axis settings.
+     * Updated through the FormatTab component.
+     *
+     * @type {Format}
+     */
+    format: Format;
+    /**
+     * State setter for updating the chart format settings.
+     * Used to apply styling changes like colors, fonts, margins, and axis labels.
+     *
+     * @type {Dispatch<SetStateAction<Format>>}
+     */
+    setFormat: Dispatch<SetStateAction<Format>>;
+}
+/**
+ * Props for the GridChartProvider component.
+ * Wraps child components with GridChart context and provides initial settings.
+ *
+ * @interface GridChartProviderProps
+ * @private
+ *
+ * @example
+ * ```tsx
+ * <GridChartProvider settings={settingsRef}>
+ *   <GridChartPanel />
+ * </GridChartProvider>
+ * ```
+ */
+export interface GridChartProviderProps {
+    /**
+     * React elements to be wrapped with GridChart context.
+     * All child components have access to the GridChart context API.
+     *
+     * @type {ReactElement}
+     */
+    children: ReactElement;
+    /**
+     * Reference to the GridChart settings object.
+     * Shared with all child components via context.
+     *
+     * @type {RefObject<GridChartSettings>}
+     */
+    settings: RefObject<GridChartSettings>;
+}
+/**
+ * Supported chart types for the GridChart component.
+ * Each type renders different visual representations of the data.
+ *
+ * Chart Categories:
+ * * **Column/Bar**: Traditional vertical/horizontal bar charts with optional stacking
+ * * **Line/Area**: Trend visualization with optional stacking
+ * * **Pie**: Categorical data distribution
+ * * **Scatter**: Correlation between two numeric series
+ *
+ * @typedef {'Bar' | 'StackingBar' | 'StackingBar100' | 'Pie' | 'Column' | 'StackingColumn' | 'StackingColumn100' | 'Line' | 'StackingLine' | 'StackingLine100' | 'Area' | 'StackingArea' | 'StackingArea100' | 'Scatter'} ChartType
+ *
+ * @example
+ * ```tsx
+ * // Column chart (default)
+ * const settings: GridChartSettings = { chart: 'Column', ... };
+ *
+ * // Stacked column chart
+ * const stackedSettings: GridChartSettings = { chart: 'StackingColumn', ... };
+ *
+ * // Pie chart
+ * const pieSettings: GridChartSettings = { chart: 'Pie', ... };
+ * ```
+ */
+export type ChartType = 'Bar' | 'StackingBar' | 'StackingBar100' | 'Pie' | 'Column' | 'StackingColumn' | 'StackingColumn100' | 'Line' | 'StackingLine' | 'StackingLine100' | 'Area' | 'StackingArea' | 'StackingArea100' | 'Scatter';
+/**
+ * Supported export formats for the chart.
+ * Users can export charts in multiple file formats through the ExportPanel.
+ *
+ * Export Formats:
+ * * **Print**: Print to physical printer or PDF printer
+ * * **JPEG/PNG**: Raster image formats
+ * * **SVG**: Scalable vector graphics
+ * * **PDF**: Portable document format
+ * * **XLSX/CSV**: Spreadsheet and comma-separated values
+ *
+ * @typedef {'Print' | 'JPEG' | 'PNG' | 'SVG' | 'PDF' | 'XLSX' | 'CSV'} ChartExportItem
+ *
+ * @example
+ * ```tsx
+ * const settings: GridChartSettings = {
+ *   enableExport: true,
+ *   chartExportItems: ['PNG', 'PDF', 'XLSX', 'CSV']
+ * };
+ * ```
+ */
+export type ChartExportItem = 'Print' | 'JPEG' | 'PNG' | 'SVG' | 'PDF' | 'XLSX' | 'CSV';
+/**
+ * Configuration settings for the GridChart component.
+ * Defines the chart type, data source, display options, and customizations.
+ *
+ * @interface GridChartSettings
+ *
+ * @example
+ * ```tsx
+ * const gridChartRef = useRef<GridChartRef>(null);
+ *
+ * const settings: GridChartSettings = {
+ *   chart: 'Column',
+ *   dataSource: salesData,
+ *   category: ['OrderDate'],
+ *   series: ['Sales', 'Quantity'],
+ *   enablePropertyPanel: true,
+ *   enableExport: true,
+ *   chartExportItems: ['PNG', 'PDF', 'XLSX']
+ * };
+ *
+ * gridChartRef.current?.show(settings);
+ * ```
+ */
+export interface GridChartSettings {
+    /**
+     * The type of chart to display.
+     * Determines the visualization style and available formatting options.
+     *
+     * @type {ChartType}
+     * @required
+     *
+     * @example
+     * chart: 'Column' // or 'Bar', 'Pie', 'Line', etc.
+     */
+    chart: ChartType;
+    /**
+     * Array of data objects to populate the chart. Each object represents a data point in the chart.
+     *
+     * @type {Object[]}
+     * @required
+     *
+     * @example
+     * dataSource: [
+     *   { OrderID: 10248, Sales: 32.38, OrderDate: '2024-01-01', Category: 'Electronics' },
+     *   { OrderID: 10249, Sales: 11.61, OrderDate: '2024-01-02', Category: 'Furniture' }
+     * ]
+     */
+    dataSource: Object[];
+    /**
+     * Array of field names to use as categories on the chart's X-axis (or for pie charts, the category legend).
+     * Must reference valid fields from the dataSource objects.
+     *
+     * @type {string[]}
+     * @required
+     *
+     * @example
+     * category: ['OrderDate'] // or ['Category', 'Region']
+     */
+    category: string[];
+    /**
+     * Array of field names representing data series to visualize in the chart.
+     * Multiple series are displayed simultaneously for comparison.
+     *
+     * @type {string[]}
+     * @required
+     *
+     * @example
+     * series: ['Sales', 'Quantity'] // Display two metrics
+     */
+    series: string[];
+    /**
+     * Enables the property panel with chart types, data operations and format options (margins, colors, fonts, axes).
+     * When enabled, users can customize the chart appearance through the Format tab.
+     *
+     * @type {boolean}
+     * @default false
+     *
+     * @example
+     * enablePropertyPanel: true
+     */
+    enablePropertyPanel?: boolean;
+    /**
+     * Enables the export panel for exporting the chart in multiple formats.
+     * When enabled, users can export the chart as PNG, PDF, XLSX, etc.
+     *
+     * @type {boolean}
+     * @default false
+     *
+     * @example
+     * enableExport: true
+     */
+    enableExport?: boolean;
+    /**
+     * Array of export formats to make available in the export panel.
+     * Ignored if enableExport is false.
+     *
+     * @type {ChartExportItem[]}
+     * @default ['Print', 'PNG', 'JPEG', 'SVG', 'PDF', 'XLSX', 'CSV']
+     *
+     * @example
+     * chartExportItems: ['PNG', 'PDF', 'XLSX']
+     */
+    chartExportItems?: ChartExportItem[];
+    /**
+     * Custom props to pass directly to the Syncfusion Chart component.
+     * Applies to non-pie charts (Column, Bar, Line, Area, Scatter).
+     *
+     * @type {Partial<ComponentProps<typeof Chart>>}
+     * @default {}
+     *
+     * @example
+     * chartSettings: {
+     *   border: { width: 2, color: '#000' }
+     * }
+     */
+    chartSettings?: Partial<ComponentProps<typeof Chart>>;
+    /**
+     * Custom ReactNode to render instead of the default chart.
+     * Overrides chart rendering for advanced customization.
+     *
+     * @type {ReactNode}
+     * @default null
+     */
+    chartNode?: ReactNode;
+    /**
+     * Custom props to pass directly to the Syncfusion PieChart component.
+     * Applies only to pie charts.
+     *
+     * @type {Partial<ComponentProps<typeof PieChart>>}
+     * @default {}
+     *
+     * @example
+     * pieChartSettings: {
+     *   width: '100%',
+     *   height: '100%'
+     * }
+     */
+    pieChartSettings?: Partial<ComponentProps<typeof PieChart>>;
+    /**
+     * Custom ReactNode to render instead of the default pie chart.
+     * Overrides pie chart rendering for advanced customization.
+     *
+     * @type {ReactNode}
+     * @default null
+     */
+    pieChartNode?: ReactNode;
+    /**
+     * Custom props to pass to the Dialog component wrapping the GridChart.
+     * Allows customization of dialog appearance, position, and behavior.
+     *
+     * @type {Partial<ComponentProps<typeof Dialog>>}
+     * @default { draggable: true, modal: true, width: '90%', height: '90%' }
+     *
+     * @example
+     * dialogSettings: {
+     *   width: '1200px',
+     *   height: '800px'
+     * }
+     */
+    dialogSettings?: Partial<ComponentProps<typeof Dialog>>;
+}
+/**
+ * Reference interface for the GridChart component.
+ * Provides imperative methods to control the GridChart from a parent component.
+ *
+ * @interface GridChartRef
+ *
+ * @example
+ * ```tsx
+ * const gridChartRef = useRef<GridChartRef>(null);
+ *
+ * // Show the chart with settings
+ * gridChartRef.current?.show({
+ *   chart: 'Column',
+ *   dataSource: data,
+ *   category: ['Date'],
+ *   series: ['Revenue']
+ * });
+ * ```
+ */
+export interface GridChartRef {
+    /**
+     * Displays the GridChart dialog with the provided settings.
+     * Opens the dialog and configures the chart, data, and formatting options.
+     *
+     * @param {GridChartSettings} settings - Configuration settings for the chart
+     * @returns {void}
+     *
+     * @example
+     * ```tsx
+     * gridChartRef.current?.show({
+     *   chart: 'Column',
+     *   dataSource: salesData,
+     *   category: ['OrderDate'],
+     *   series: ['Sales', 'Quantity'],
+     *   enablePropertyPanel: true,
+     *   enableExport: true
+     * });
+     * ```
+     */
+    show: (settings: GridChartSettings) => void;
+}
+/**
+ * Props for the GridChart component.
+ *
+ * @interface GridChartProps
+ * @private
+ *
+ * @example
+ * ```tsx
+ * const gridChartRef = useRef<GridChartRef>(null);
+ * <GridChart ref={gridChartRef} />
+ * ```
+ */
+export interface GridChartProps {
+}
+/**
+ * Represents a single chart option in the chart selection interface.
+ * Used to display chart choices in the ChartTab component.
+ *
+ * @interface ChartItem
+ * @private
+ *
+ * @example
+ * ```tsx
+ * const columnChartItem: ChartItem = {
+ *   icon: ColumnChartIcon,
+ *   label: 'Column',
+ *   chart: 'Column'
+ * };
+ * ```
+ */
+export interface ChartItem {
+    /**
+     * React component rendering the chart icon (SVG).
+     * Displayed in the chart selection UI.
+     *
+     * @type {ComponentType<SVGProps<SVGSVGElement>>}
+     */
+    icon: ComponentType<SVGProps<SVGSVGElement>>;
+    /**
+     * Human-readable label for the chart type.
+     * Displayed below the icon in the chart selection UI.
+     *
+     * @type {string}
+     *
+     * @example
+     * label: 'Column'
+     * label: 'Stacking Column'
+     * label: 'Pie'
+     */
+    label: string;
+    /**
+     * The chart type identifier.
+     * Determines which chart component is rendered when selected.
+     *
+     * @type {ChartType}
+     */
+    chart: ChartType;
+}
+/**
+ * Groups related chart items by category for organization in the chart selection interface.
+ * Categories are displayed as tabs or sections in the ChartTab component.
+ *
+ * @interface ChartCategory
+ * @private
+ *
+ * @example
+ * ```tsx
+ * const columnCategory: ChartCategory = {
+ *   value: 'column',
+ *   title: 'Column Charts',
+ *   items: [
+ *     { icon: ColumnIcon, label: 'Column', chart: 'Column' },
+ *     { icon: StackingColumnIcon, label: 'Stacking Column', chart: 'StackingColumn' }
+ *   ]
+ * };
+ * ```
+ */
+export interface ChartCategory {
+    /**
+     * Unique identifier for the category.
+     * Used for internal referencing and tab selection.
+     *
+     * @type {string}
+     *
+     * @example
+     * value: 'column'
+     * value: 'pie'
+     * value: 'distribution'
+     */
+    value: string;
+    /**
+     * Display title for the category.
+     * Shown in the UI as a tab or section header.
+     *
+     * @type {string}
+     *
+     * @example
+     * title: 'Column Charts'
+     * title: 'Pie Charts'
+     * title: 'Comparison Charts'
+     */
+    title: string;
+    /**
+     * Array of chart items grouped under this category.
+     * Each item represents a specific chart type option.
+     *
+     * @type {ChartItem[]}
+     *
+     * @example
+     * items: [
+     *   { icon: ColumnIcon, label: 'Column', chart: 'Column' },
+     *   { icon: StackingColumnIcon, label: 'Stacking Column', chart: 'StackingColumn' },
+     *   { icon: StackingColumn100Icon, label: '100% Stacking Column', chart: 'StackingColumn100' }
+     * ]
+     */
+    items: ChartItem[];
+}
+/**
+ * Metadata about the currently selected chart.
+ * Provides quick classification to determine chart-specific UI and formatting options.
+ *
+ * @interface ChartInfo
+ * @private
+ *
+ * @example
+ * ```tsx
+ * // Column chart
+ * const columnInfo: ChartInfo = {
+ *   chart: 'Column',
+ *   isChart: true,
+ *   isPieChart: false
+ * };
+ *
+ * // Pie chart
+ * const pieInfo: ChartInfo = {
+ *   chart: 'Pie',
+ *   isChart: false,
+ *   isPieChart: true
+ * };
+ * ```
+ */
+export interface ChartInfo {
+    /**
+     * The currently selected chart type.
+     * Used to determine which chart component and settings to apply.
+     *
+     * @type {ChartType}
+     *
+     * @example
+     * chart: 'Column'
+     * chart: 'Pie'
+     * chart: 'Line'
+     */
+    chart: ChartType;
+    /**
+     * Flag indicating if the current chart is a regular chart (Column, Bar, Line, Area, Scatter).
+     * Used to conditionally display chart-specific formatting options like data labels and tooltips.
+     *
+     * @type {boolean}
+     * @default true for Column, Bar, Line, Area, Scatter; false for Pie
+     */
+    isChart: boolean;
+    /**
+     * Flag indicating if the current chart is a pie chart.
+     * Used to conditionally display pie-specific formatting options like data labels.
+     * Pie charts cannot display multiple series or have category/value axes.
+     *
+     * @type {boolean}
+     * @default true for Pie; false for all other chart types
+     */
+    isPieChart: boolean;
+}
+/**
+ * Styling configuration for a specific data series in the chart.
+ * Defines color and label visibility for individual series.
+ * Managed through the Format tab's Series Style section.
+ *
+ * @interface ChartSeriesStyle
+ * @private
+ *
+ * @example
+ * ```tsx
+ * const seriesStyle: ChartSeriesStyle = {
+ *   series: 'Sales',
+ *   fill: '#FF6B6B',
+ *   enableDataLabel: true
+ * };
+ * ```
+ */
+export interface ChartSeriesStyle {
+    /**
+     * The name of the data series.
+     * Must match a field name in the GridChartSettings.series array.
+     *
+     * @type {string}
+     *
+     * @example
+     * series: 'Sales'
+     * series: 'Quantity'
+     */
+    series: string;
+    /**
+     * Hex color code for the series bars/lines/areas in the chart.
+     * Used to visually distinguish between different series.
+     *
+     * @type {string}
+     * @default '#5470C6'
+     *
+     * @example
+     * fill: '#FF6B6B' // Red
+     * fill: '#4ECDC4' // Teal
+     * fill: '#95E1D3' // Mint
+     */
+    fill: string;
+    /**
+     * Controls whether data value labels are displayed above/on the series elements.
+     * When enabled, shows the actual numeric values on the chart.
+     *
+     * @type {boolean}
+     * @default false
+     *
+     * @example
+     * enableDataLabel: true // Show values on bars
+     * enableDataLabel: false // Hide values
+     */
+    enableDataLabel: boolean;
+}
+/**
+ * Comprehensive formatting settings for the chart.
+ * Covers all visual aspects including layout, text, colors, axes, and series styling.
+ * Updated through the FormatTab component and managed by the GridChart context.
+ *
+ * @interface Format
+ * @private
+ *
+ * @example
+ * ```tsx
+ * const defaultFormat: Format = {
+ *   // Chart layout
+ *   marginLeft: 10, marginRight: 10, marginTop: 10, marginBottom: 10,
+ *   background: '#FFFFFF',
+ *
+ *   // Title
+ *   titleText: 'Sales Analysis',
+ *   titleFontFamily: 'Arial',
+ *   titleFontSize: '18',
+ *   titleColor: '#000000',
+ *
+ *   // Legend
+ *   enableLegend: true,
+ *   legendPosition: 'Bottom',
+ *   legendFontFamily: 'Arial',
+ *   legendFontSize: '12',
+ *   legendColor: '#000000',
+ *
+ *   // Series
+ *   enableTooltip: true,
+ *   enablePieChartDataLabel: false,
+ *   chartSeriesStyle: [
+ *     { series: 'Sales', fill: '#FF6B6B', enableDataLabel: false }
+ *   ],
+ *
+ *   // Axes
+ *   categoryInverted: false,
+ *   valueInverted: false,
+ *   categoryTitleText: 'Date',
+ *   categoryTitleFontFamily: 'Arial',
+ *   categoryTitleFontSize: '14',
+ *   categoryTitleColor: '#000000',
+ *   categoryLabelFontFamily: 'Arial',
+ *   categoryLabelFontSize: '12',
+ *   categoryLabelColor: '#000000',
+ *   categoryLabelRotation: 0,
+ *   // ... similar for value axis
+ * };
+ * ```
+ */
+export interface Format {
+    /**
+     * Left margin of the chart area in pixels.
+     * Controls spacing between the chart and left edge of the container.
+     *
+     * @type {number}
+     * @default 10
+     * @min 0
+     * @max 100
+     */
+    marginLeft: number;
+    /**
+     * Right margin of the chart area in pixels.
+     * Controls spacing between the chart and right edge of the container.
+     *
+     * @type {number}
+     * @default 10
+     * @min 0
+     * @max 100
+     */
+    marginRight: number;
+    /**
+     * Top margin of the chart area in pixels.
+     * Controls spacing between the chart and top edge of the container.
+     *
+     * @type {number}
+     * @default 10
+     * @min 0
+     * @max 100
+     */
+    marginTop: number;
+    /**
+     * Bottom margin of the chart area in pixels.
+     * Controls spacing between the chart and bottom edge of the container.
+     *
+     * @type {number}
+     * @default 10
+     * @min 0
+     * @max 100
+     */
+    marginBottom: number;
+    /**
+     * Background color of the chart area.
+     * Accepts hex color codes (#RRGGBB).
+     *
+     * @type {string}
+     * @default '#FFFFFF'
+     *
+     * @example
+     * background: '#FFFFFF' // White
+     * background: '#F5F5F5' // Light gray
+     * background: '#E8F4F8' // Light blue
+     */
+    background: string;
+    /**
+     * Main title text displayed at the top of the chart.
+     * Can be empty for no title.
+     *
+     * @type {string}
+     * @default ''
+     *
+     * @example
+     * titleText: 'Sales Analysis 2024'
+     */
+    titleText: string;
+    /**
+     * Font family for the main chart title.
+     * Examples: 'Arial', 'Georgia', 'Times New Roman', 'Trebuchet MS', 'Courier New', 'Lucida Console'.
+     *
+     * @type {string}
+     * @default 'Default'
+     */
+    titleFontFamily: string;
+    /**
+     * Font size for the main chart title in pixels (as string).
+     * Valid range: '11' to '20'.
+     *
+     * @type {string}
+     * @default '16'
+     */
+    titleFontSize: string;
+    /**
+     * Font color for the main chart title.
+     * Accepts hex color codes (#RRGGBB).
+     *
+     * @type {string}
+     * @default '#000000'
+     */
+    titleColor: string;
+    /**
+     * Subtitle text displayed below the main title.
+     * Can be empty for no subtitle.
+     *
+     * @type {string}
+     * @default ''
+     *
+     * @example
+     * subtitleText: 'Quarterly Revenue Report'
+     */
+    subtitleText: string;
+    /**
+     * Font family for the subtitle.
+     * Examples: 'Arial', 'Georgia', 'Times New Roman', 'Trebuchet MS', 'Courier New', 'Lucida Console'.
+     *
+     * @type {string}
+     * @default 'Default'
+     */
+    subtitleFontFamily: string;
+    /**
+     * Font size for the subtitle in pixels (as string).
+     * Valid range: '11' to '20'.
+     *
+     * @type {string}
+     * @default '14'
+     */
+    subtitleFontSize: string;
+    /**
+     * Font color for the subtitle.
+     * Accepts hex color codes (#RRGGBB).
+     *
+     * @type {string}
+     * @default '#666666'
+     */
+    subtitleColor: string;
+    /**
+     * Controls visibility of the legend in the chart.
+     * When true, displays a legend showing series names and colors.
+     *
+     * @type {boolean}
+     * @default true
+     *
+     * @example
+     * enableLegend: true // Show legend
+     * enableLegend: false // Hide legend
+     */
+    enableLegend: boolean;
+    /**
+     * Position of the legend relative to the chart.
+     * Valid positions: 'Auto', 'Top', 'Left', 'Bottom', 'Right'.
+     *
+     * @type {string}
+     * @default 'Bottom'
+     *
+     * @example
+     * legendPosition: 'Bottom' // Legend below chart
+     * legendPosition: 'Right' // Legend to the right
+     * legendPosition: 'Top' // Legend above chart
+     */
+    legendPosition: string;
+    /**
+     * Font family for the legend text.
+     * Examples: 'Arial', 'Georgia', 'Times New Roman', 'Trebuchet MS', 'Courier New', 'Lucida Console'.
+     *
+     * @type {string}
+     * @default 'Default'
+     */
+    legendFontFamily: string;
+    /**
+     * Font size for the legend text in pixels (as string).
+     * Valid range: '11' to '20'.
+     *
+     * @type {string}
+     * @default '12'
+     */
+    legendFontSize: string;
+    /**
+     * Font color for the legend text.
+     * Accepts hex color codes (#RRGGBB).
+     *
+     * @type {string}
+     * @default '#000000'
+     */
+    legendColor: string;
+    /**
+     * Controls visibility of tooltips when hovering over data points.
+     * Applies to all chart types.
+     *
+     * @type {boolean}
+     * @default true
+     *
+     * @example
+     * enableTooltip: true // Show tooltips on hover
+     * enableTooltip: false // No tooltips
+     */
+    enableTooltip: boolean;
+    /**
+     * Controls visibility of data labels on pie chart segments.
+     * Only applies to pie charts; ignored for other chart types.
+     *
+     * @type {boolean}
+     * @default false
+     *
+     * @example
+     * enablePieChartDataLabel: true // Show percentage/value on segments
+     * enablePieChartDataLabel: false // Hide labels
+     */
+    enablePieChartDataLabel: boolean;
+    /**
+     * Array of styling configurations for each data series.
+     * Each series can have its own color and data label visibility.
+     *
+     * @type {ChartSeriesStyle[]}
+     * @default [{ series: 'Series1', fill: '#5470C6', enableDataLabel: false }]
+     *
+     * @example
+     * chartSeriesStyle: [
+     *   { series: 'Sales', fill: '#FF6B6B', enableDataLabel: true },
+     *   { series: 'Quantity', fill: '#4ECDC4', enableDataLabel: false }
+     * ]
+     */
+    chartSeriesStyle: ChartSeriesStyle[];
+    /**
+     * Reverses the order of categories on the category (X) axis.
+     * Applies only to non-pie charts.
+     *
+     * @type {boolean}
+     * @default false
+     *
+     * @example
+     * categoryInverted: false // Normal order (left to right)
+     * categoryInverted: true // Reversed order (right to left)
+     */
+    categoryInverted: boolean;
+    /**
+     * Reverses the order of values on the value (Y) axis.
+     * Applies only to non-pie charts.
+     *
+     * @type {boolean}
+     * @default false
+     *
+     * @example
+     * valueInverted: false // Normal order (bottom to top)
+     * valueInverted: true // Reversed order (top to bottom)
+     */
+    valueInverted: boolean;
+    /**
+     * Title text for the category (X-axis) axis.
+     * Appears as a label next to the axis.
+     *
+     * @type {string}
+     * @default 'Category'
+     *
+     * @example
+     * categoryTitleText: 'Date'
+     * categoryTitleText: 'Product Name'
+     */
+    categoryTitleText: string;
+    /**
+     * Font family for the category axis title.
+     *
+     * @type {string}
+     * @default 'Default'
+     */
+    categoryTitleFontFamily: string;
+    /**
+     * Font size for the category axis title in pixels (as string).
+     * Valid range: '11' to '20'.
+     *
+     * @type {string}
+     * @default '14'
+     */
+    categoryTitleFontSize: string;
+    /**
+     * Font color for the category axis title.
+     *
+     * @type {string}
+     * @default '#000000'
+     */
+    categoryTitleColor: string;
+    /**
+     * Title text for the value (Y-axis) axis.
+     * Appears as a rotated label next to the axis.
+     *
+     * @type {string}
+     * @default 'Value'
+     *
+     * @example
+     * valueTitleText: 'Revenue ($)'
+     * valueTitleText: 'Units Sold'
+     */
+    valueTitleText: string;
+    /**
+     * Font family for the value axis title.
+     *
+     * @type {string}
+     * @default 'Default'
+     */
+    valueTitleFontFamily: string;
+    /**
+     * Font size for the value axis title in pixels (as string).
+     * Valid range: '11' to '20'.
+     *
+     * @type {string}
+     * @default '14'
+     */
+    valueTitleFontSize: string;
+    /**
+     * Font color for the value axis title.
+     *
+     * @type {string}
+     * @default '#000000'
+     */
+    valueTitleColor: string;
+    /**
+     * Font family for the category axis label text.
+     * Affects the appearance of tick labels on the X-axis.
+     *
+     * @type {string}
+     * @default 'Default'
+     */
+    categoryLabelFontFamily: string;
+    /**
+     * Font size for the category axis labels in pixels (as string).
+     * Valid range: '11' to '20'.
+     *
+     * @type {string}
+     * @default '12'
+     */
+    categoryLabelFontSize: string;
+    /**
+     * Font color for the category axis labels.
+     *
+     * @type {string}
+     * @default '#000000'
+     */
+    categoryLabelColor: string;
+    /**
+     * Rotation angle for the category axis labels in degrees.
+     * Valid range: 0° to 315° in 45° increments (0, 45, 90, 135, 180, 225, 270, 315).
+     * Useful for long category names to prevent overlap.
+     *
+     * @type {number}
+     * @default 0
+     *
+     * @example
+     * categoryLabelRotation: 0 // No rotation
+     * categoryLabelRotation: 45 // 45-degree tilt
+     * categoryLabelRotation: 90 // Vertical (90-degree rotation)
+     */
+    categoryLabelRotation: number;
+    /**
+     * Font family for the value axis label text.
+     * Affects the appearance of tick labels on the Y-axis.
+     *
+     * @type {string}
+     * @default 'Default'
+     */
+    valueLabelFontFamily: string;
+    /**
+     * Font size for the value axis labels in pixels (as string).
+     * Valid range: '11' to '20'.
+     *
+     * @type {string}
+     * @default '12'
+     */
+    valueLabelFontSize: string;
+    /**
+     * Font color for the value axis labels.
+     *
+     * @type {string}
+     * @default '#000000'
+     */
+    valueLabelColor: string;
+    /**
+     * Rotation angle for the value axis labels in degrees.
+     * Valid range: 0° to 315° in 45° increments (0, 45, 90, 135, 180, 225, 270, 315).
+     * Rarely used for value axis labels but available for advanced customization.
+     *
+     * @type {number}
+     * @default 0
+     *
+     * @example
+     * valueLabelRotation: 0 // No rotation (default horizontal)
+     * valueLabelRotation: 90 // Vertical rotation
+     */
+    valueLabelRotation: number;
+}