### Install ng-apexcharts manually

Source: https://github.com/apexcharts/ng-apexcharts/blob/master/_autodocs/README.md

Manual installation method requiring direct component imports.

```bash
npm install apexcharts ng-apexcharts --save
```

--------------------------------

### Install ng-apexcharts

Source: https://github.com/apexcharts/ng-apexcharts/blob/master/README.md

Use the Angular CLI or npm to add the library to your project.

```bash
ng add ng-apexcharts
```

```bash
npm install apexcharts ng-apexcharts --save
```

--------------------------------

### Full Chart Configuration

Source: https://github.com/apexcharts/ng-apexcharts/blob/master/_autodocs/configuration.md

An example demonstrating a comprehensive configuration including xaxis, yaxis, tooltip, and theme settings.

```typescript
import { Component, signal } from '@angular/core';
import { ChartComponent, ApexOptions } from 'ng-apexcharts';

@Component({
  selector: 'app-full-config',
  imports: [ChartComponent],
  template: `<apx-chart [series]="series" [chart]="chartOptions" [xaxis]="xaxis" [yaxis]="yaxis" [tooltip]="tooltip" [theme]="theme" />`,
})
export class FullConfigComponent {
  readonly series = signal([
    {
      name: 'Series A',
      data: [10, 20, 30, 40, 50],
    },
    {
      name: 'Series B',
      data: [5, 15, 25, 35, 45],
    },
  ]);

  readonly chartOptions = {
    type: 'line',
    height: 350,
    toolbar: { show: true },
    zoom: { enabled: true },
  };

  readonly xaxis = {
    type: 'category',
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May'],
  };

  readonly yaxis = {
    title: { text: 'Values' },
    min: 0,
    max: 100,
  };

  readonly tooltip = {
    enabled: true,
    theme: 'dark',
    shared: true,
    intersect: false,
  };

  readonly theme = {
    mode: 'light',
  };
}
```

--------------------------------

### Basic Chart Implementation

Source: https://github.com/apexcharts/ng-apexcharts/blob/master/_autodocs/api-reference/ChartComponent.md

Demonstrates a standard setup for a line chart using Angular signals for series data.

```typescript
import { Component, signal } from '@angular/core';
import { ChartComponent, ApexChart, ApexAxisChartSeries } from 'ng-apexcharts';

@Component({
  selector: 'app-simple-chart',
  imports: [ChartComponent],
  template: `
    <apx-chart [series]="series()" [chart]="chart" [xaxis]="xaxis" />
  `,
})
export class SimpleChartComponent {
  readonly series = signal<ApexAxisChartSeries>([
    { name: 'Sales', data: [10, 20, 30, 40, 50] }
  ]);

  readonly chart: ApexChart = { type: 'line', height: 300 };
  readonly xaxis = { categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May'] };
}
```

--------------------------------

### Render Chart to HTML

Source: https://github.com/apexcharts/ng-apexcharts/blob/master/_autodocs/api-reference/ChartSSRService.md

Method signature and implementation example for rendering a chart as an HTML string.

```typescript
public async renderToHTML(
  options: ApexOptions,
  ssrOptions?: ApexSSROptions
): Promise<string>
```

```typescript
import { Component, inject, OnInit } from '@angular/core';
import { ChartSSRService } from 'ng-apexcharts';
import { ApexOptions } from 'ng-apexcharts';

@Component({
  selector: 'app-render-to-html',
  template: `<div [innerHTML]="htmlChart"></div>`
})
export class RenderToHtmlComponent implements OnInit {
  private chartSSRService = inject(ChartSSRService);
  htmlChart: string = '';

  async ngOnInit() {
    const options: ApexOptions = {
      series: [{ name: 'Sales', data: [10, 20, 30, 40, 50] }],
      chart: { type: 'line' },
      xaxis: { categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May'] },
    };

    this.htmlChart = await this.chartSSRService.renderToHTML(options, {
      width: 600,
      height: 400,
    });
  }
}
```

--------------------------------

### Reactive Input System

Source: https://github.com/apexcharts/ng-apexcharts/blob/master/_autodocs/MODULE_OVERVIEW.md

Example of using Angular signals for reactive chart input tracking.

```typescript
readonly series = input<ApexAxisChartSeries | ApexNonAxisChartSeries>();
readonly chart = input<ApexChart>();
// ... 20+ other option inputs
readonly autoUpdateSeries = input(true);
```

--------------------------------

### Multi-Chart Component Implementation

Source: https://github.com/apexcharts/ng-apexcharts/blob/master/_autodocs/api-reference/ChartCoreComponent.md

Examples of implementing different chart types within separate components using the ChartCoreComponent.

```typescript
// Line chart component
@Component({
  selector: 'app-revenue-chart',
  imports: [ChartCoreComponent],
  template: `<apx-chart-core [series]="series" [chart]="{ type: 'line' }" />`
})
export class RevenueChartComponent {
  series = [{ name: 'Revenue', data: [10, 20, 30] }];
}

// Bar chart component
@Component({
  selector: 'app-sales-chart',
  imports: [ChartCoreComponent],
  template: `<apx-chart-core [series]="series" [chart]="{ type: 'bar' }" />`
})
export class SalesChartComponent {
  series = [{ name: 'Sales', data: [5, 15, 25] }];
}

// Pie chart component
@Component({
  selector: 'app-market-share',
  imports: [ChartCoreComponent],
  template: `<apx-chart-core [series]="series" [chart]="{ type: 'pie' }" />`
})
export class MarketShareComponent {
  series = [20, 30, 50];
}
```

--------------------------------

### Render Chart to SVG String

Source: https://github.com/apexcharts/ng-apexcharts/blob/master/_autodocs/api-reference/ChartSSRService.md

Method signature and implementation example for rendering a chart as an SVG string.

```typescript
public async renderToString(
  options: ApexOptions,
  ssrOptions?: ApexSSROptions
): Promise<string>
```

```typescript
import { Component, inject, OnInit } from '@angular/core';
import { ChartSSRService } from 'ng-apexcharts';
import { ApexOptions } from 'ng-apexcharts';

@Component({
  selector: 'app-render-to-svg',
  template: `
    <button (click)="downloadSvg()">Download Chart</button>
  `
})
export class RenderToSvgComponent implements OnInit {
  private chartSSRService = inject(ChartSSRService);
  private svgString: string = '';

  async ngOnInit() {
    const options: ApexOptions = {
      series: [{ name: 'Revenue', data: [100, 200, 300] }],
      chart: { type: 'bar', height: 300 },
      xaxis: { categories: ['Q1', 'Q2', 'Q3'] },
    };

    this.svgString = await this.chartSSRService.renderToString(options, {
      width: 800,
      height: 500,
    });
  }

  downloadSvg() {
    const blob = new Blob([this.svgString], { type: 'image/svg+xml' });
    const url = URL.createObjectURL(blob);
    const link = document.createElement('a');
    link.href = url;
    link.download = 'chart.svg';
    link.click();
    URL.revokeObjectURL(url);
  }
}
```

--------------------------------

### Get Unique Instance ID

Source: https://github.com/apexcharts/ng-apexcharts/blob/master/_autodocs/api-reference/ChartSSRService.md

Method signature and usage example for generating unique identifiers for TransferState.

```typescript
public nextInstanceId(): number
```

```typescript
const service = inject(ChartSSRService);
const id1 = service.nextInstanceId(); // 0
const id2 = service.nextInstanceId(); // 1
const id3 = service.nextInstanceId(); // 2
```

--------------------------------

### paper()

Source: https://github.com/apexcharts/ng-apexcharts/blob/master/_autodocs/api-reference/ChartComponent.md

Gets the underlying Raphael paper object for advanced custom drawing.

```APIDOC
## paper()

### Description
Get the underlying Raphael paper object for advanced custom drawing.

### Returns
- **any** - Raphael paper instance for low-level SVG manipulation

### Example
```typescript
const paper = chartCmp().paper();
```
```

--------------------------------

### Configuration Merging Logic

Source: https://github.com/apexcharts/ng-apexcharts/blob/master/_autodocs/api-reference/ChartHydrateComponent.md

Demonstrates how clientOptions are deep-merged with server-rendered configurations during hydration.

```typescript
// Server config
const serverOptions = {
  chart: { type: 'line', animations: { enabled: false } },
  tooltip: { enabled: false },
};

// Client config
const clientOptions = {
  chart: { animations: { enabled: true } }, // Overrides server value
  tooltip: { enabled: true, theme: 'dark' }, // Adds new property
};

// Result after merge
{
  chart: { type: 'line', animations: { enabled: true } }, // Merged
  tooltip: { enabled: true, theme: 'dark' }, // Merged
}
```

--------------------------------

### Define and Use ChartType

Source: https://github.com/apexcharts/ng-apexcharts/blob/master/_autodocs/types.md

Union type for valid chart strings and examples of assigning them.

```typescript
export type ChartType = NonNullable<ApexChart["type"]>;
```

```typescript
const type: ChartType = 'line';
const type: ChartType = 'bar';
const type: ChartType = 'pie';
```

--------------------------------

### Project File Structure

Source: https://github.com/apexcharts/ng-apexcharts/blob/master/_autodocs/GENERATION_SUMMARY.md

The directory layout for the generated documentation output.

```text
/workspace/home/output/
├── INDEX.md                      (Navigation index)
├── README.md                     (Quick reference)
├── MODULE_OVERVIEW.md            (Architecture)
├── configuration.md              (Configuration guide)
├── types.md                      (Type reference)
├── GENERATION_SUMMARY.md         (This file)
└── api-reference/
    ├── ChartComponent.md         (Main component)
    ├── ChartCoreComponent.md     (Tree-shakeable variant)
    ├── ChartSSRComponent.md      (Server rendering)
    ├── ChartHydrateComponent.md  (Client hydration)
    └── ChartSSRService.md        (SSR service)
```

--------------------------------

### Public API Entry Point

Source: https://github.com/apexcharts/ng-apexcharts/blob/master/_autodocs/README.md

Identifies the main entry point file for the library.

```text
src/public_api.ts → Main export surface
```

--------------------------------

### Configure Chart Toolbar with Hydration

Source: https://github.com/apexcharts/ng-apexcharts/blob/master/_autodocs/api-reference/ChartHydrateComponent.md

Enable interactive toolbar tools by providing a configuration object to the clientOptions input.

```typescript
import { Component } from '@angular/core';
import { ChartSSRComponent, ChartHydrateComponent } from 'ng-apexcharts';
import { ApexOptions } from 'ng-apexcharts';

@Component({
  selector: 'app-toolbar-hydration',
  imports: [ChartSSRComponent, ChartHydrateComponent],
  template: `
    <apx-chart-ssr [options]="serverOptions" />
    <apx-chart-hydrate [clientOptions]="clientOptions" />
  `,
})
export class ToolbarHydrationComponent {
  readonly serverOptions: ApexOptions = {
    series: [{ name: 'Data', data: [10, 20, 30, 40, 50] }],
    chart: { type: 'line' },
    xaxis: { categories: ['A', 'B', 'C', 'D', 'E'] },
  };

  readonly clientOptions: Partial<ApexOptions> = {
    chart: {
      toolbar: {
        show: true,
        tools: {
          download: true,
          zoom: true,
          zoomin: true,
          zoomout: true,
          pan: true,
          reset: true,
        },
      },
    },
  };
}
```

--------------------------------

### Implement a Basic Chart

Source: https://github.com/apexcharts/ng-apexcharts/blob/master/_autodocs/MODULE_OVERVIEW.md

Import the ChartComponent and bind series, chart, and xaxis properties in the template.

```typescript
import { Component } from '@angular/core';
import { ChartComponent } from 'ng-apexcharts';

@Component({
  selector: 'app-chart',
  imports: [ChartComponent],
  template: `
    <apx-chart
      [series]="series"
      [chart]="chart"
      [xaxis]="xaxis"
    />
  `,
})
export class ChartComponent {
  series = [{ name: 'Sales', data: [10, 20, 30, 40, 50] }];
  chart = { type: 'line' as const, height: 350 };
  xaxis = { categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May'] };
}
```

--------------------------------

### Perform Batch Rendering of Charts

Source: https://github.com/apexcharts/ng-apexcharts/blob/master/_autodocs/api-reference/ChartSSRService.md

Demonstrates how to iterate through a collection of chart configurations and render them sequentially using the service.

```typescript
import { Component, inject } from '@angular/core';
import { ChartSSRService } from 'ng-apexcharts';
import { ApexOptions } from 'ng-apexcharts';

@Component({
  selector: 'app-batch-render',
  template: `
    <div>
      <h2>Rendering {{ renderedCount }} of {{ totalCharts }} charts...</h2>
      <button (click)="renderAll()" [disabled]="isRendering">
        {{ isRendering ? 'Rendering...' : 'Render All Charts' }}
      </button>
    </div>
  `,
})
export class BatchRenderComponent {
  private chartSSRService = inject(ChartSSRService);

  isRendering = false;
  renderedCount = 0;
  totalCharts = 12;
  private charts: ApexOptions[] = [];

  ngOnInit() {
    // Generate 12 chart configurations
    for (let i = 0; i < 12; i++) {
      this.charts.push({
        series: [{ name: `Chart ${i}`, data: Array(5).fill(0).map(() => Math.random() * 100) }],
        chart: { type: i % 3 === 0 ? 'line' : i % 3 === 1 ? 'bar' : 'area' },
        xaxis: { categories: ['A', 'B', 'C', 'D', 'E'] },
      });
    }
  }

  async renderAll() {
    this.isRendering = true;
    this.renderedCount = 0;

    for (const chart of this.charts) {
      try {
        await this.chartSSRService.renderToHTML(chart, {
          width: 600,
          height: 400,
        });
        this.renderedCount++;
      } catch (error) {
        console.error('Failed to render chart:', error);
      }
    }

    this.isRendering = false;
    alert(`Rendered ${this.renderedCount} of ${this.totalCharts} charts`);
  }
}
```

--------------------------------

### Configure Tree-Shakeable Bundle

Source: https://github.com/apexcharts/ng-apexcharts/blob/master/_autodocs/README.md

Reduces bundle size by importing only necessary ApexCharts modules and using the ChartCoreComponent.

```typescript
import 'apexcharts/line';
import 'apexcharts/bar';
import 'apexcharts/pie';
import 'apexcharts/features/legend';
import 'apexcharts/features/toolbar';

// Then use ChartCoreComponent instead of ChartComponent
```

```typescript
import { ChartCoreComponent } from 'ng-apexcharts';

@Component({
  imports: [ChartCoreComponent],
  template: `<apx-chart-core [series]="series" [chart]="chart" />`,
})
export class LeanChartComponent {
  series = [{ name: 'Data', data: [10, 20, 30] }];
  chart = { type: 'line', height: 300 };
}
```

--------------------------------

### Project Source File Map

Source: https://github.com/apexcharts/ng-apexcharts/blob/master/_autodocs/README.md

Visual representation of the project directory structure and key file responsibilities.

```text
projects/ng-apexcharts/src/
├── public_api.ts                    ← Main entry point
├── lib/
│   ├── chart/
│   │   ├── chart.component.ts      ← Interactive chart
│   │   └── chart.component.spec.ts
│   ├── chart-core/
│   │   ├── chart-core.component.ts ← Tree-shakeable variant
│   │   └── chart-core.component.spec.ts
│   ├── chart-ssr/
│   │   ├── chart-ssr.component.ts  ← Server rendering
│   │   └── chart-ssr.component.spec.ts
│   ├── chart-hydrate/
│   │   ├── chart-hydrate.component.ts ← Client hydration
│   │   └── chart-hydrate.component.spec.ts
│   ├── services/
│   │   ├── chart-ssr.service.ts    ← SSR service
│   │   └── chart-ssr.service.spec.ts
│   ├── model/
│   │   └── apex-types.ts           ← Type re-exports
│   └── ng-apexcharts.module.ts     ← NgModule (legacy)
```

--------------------------------

### Services

Source: https://github.com/apexcharts/ng-apexcharts/blob/master/_autodocs/MODULE_OVERVIEW.md

Services provided for handling server-side rendering configurations.

```APIDOC
## Services

- **ChartSSRService**: Service for managing SSR chart logic.
- **ApexSSROptions**: Configuration interface for SSR options.
```

--------------------------------

### Project Source Directory Structure

Source: https://github.com/apexcharts/ng-apexcharts/blob/master/_autodocs/MODULE_OVERVIEW.md

Visual representation of the project file hierarchy within the source directory.

```text
projects/ng-apexcharts/src/
├── public_api.ts                          # Main export surface
├── lib/
│   ├── chart/
│   │   └── chart.component.ts            # Interactive chart
│   ├── chart-core/
│   │   └── chart-core.component.ts       # Tree-shakeable variant
│   ├── chart-ssr/
│   │   └── chart-ssr.component.ts        # Server render
│   ├── chart-hydrate/
│   │   └── chart-hydrate.component.ts    # Client hydration
│   ├── services/
│   │   └── chart-ssr.service.ts          # SSR service
│   ├── model/
│   │   └── apex-types.ts                 # Type re-exports
│   └── ng-apexcharts.module.ts           # NgModule wrapper
```

--------------------------------

### Implement Chart Creation Timing

Source: https://github.com/apexcharts/ng-apexcharts/blob/master/_autodocs/MODULE_OVERVIEW.md

Use afterNextRender to ensure layout measurements are accurate before initializing the chart.

```typescript
afterNextRender({
  read: () => this.createElement(),
}, { injector: this._injector });
```

--------------------------------

### Execute Parallel Rendering

Source: https://github.com/apexcharts/ng-apexcharts/blob/master/_autodocs/api-reference/ChartSSRService.md

Shows how to improve performance by rendering multiple charts concurrently using Promise.all.

```typescript
// Render 3 charts concurrently (faster than sequential)
const [html1, html2, html3] = await Promise.all([
  this.chartSSRService.renderToHTML(options1),
  this.chartSSRService.renderToHTML(options2),
  this.chartSSRService.renderToHTML(options3),
]);
```

--------------------------------

### Create a Basic Interactive Chart

Source: https://github.com/apexcharts/ng-apexcharts/blob/master/_autodocs/README.md

Implements a standard bar chart using the ChartComponent and basic configuration objects.

```typescript
import { Component } from '@angular/core';
import { ChartComponent } from 'ng-apexcharts';

@Component({
  selector: 'app-bar-chart',
  imports: [ChartComponent],
  template: `
    <apx-chart [series]="series" [chart]="chart" [xaxis]="xaxis" />
  `,
})
export class BarChartComponent {
  series = [{ name: 'Sales', data: [10, 20, 30, 40, 50] }];
  chart = { type: 'bar', height: 350 };
  xaxis = { categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May'] };
}
```

--------------------------------

### Generate Dynamic Charts from Data

Source: https://github.com/apexcharts/ng-apexcharts/blob/master/_autodocs/api-reference/ChartSSRService.md

Shows how to generate chart HTML dynamically based on input data and inject it into the component template.

```typescript
import { Component, inject } from '@angular/core';
import { ChartSSRService } from 'ng-apexcharts';
import { ApexOptions } from 'ng-apexcharts';

@Component({
  selector: 'app-dynamic-chart-gen',
  template: `
    <div [innerHTML]="generatedChart" [hidden]="!generatedChart"></div>
  `,
})
export class DynamicChartGenComponent {
  private chartSSRService = inject(ChartSSRService);
  generatedChart: string = '';

  async generateChartFromData(data: number[]) {
    const options: ApexOptions = {
      series: [{ name: 'Dynamic Data', data }],
      chart: { type: 'line', height: 300 },
      xaxis: {
        categories: data.map((_, i) => `Point ${i + 1}`),
      },
      title: { text: `Chart with ${data.length} data points` },
    };

    this.generatedChart = await this.chartSSRService.renderToHTML(options, {
      width: 700,
      height: 400,
    });
  }
}
```

--------------------------------

### Import Full Bundle ChartComponent

Source: https://github.com/apexcharts/ng-apexcharts/blob/master/_autodocs/configuration.md

Use the full bundle when all chart types and features are required.

```typescript
import { ChartComponent } from 'ng-apexcharts';
```

--------------------------------

### Import Minimal Bundle ChartCoreComponent

Source: https://github.com/apexcharts/ng-apexcharts/blob/master/_autodocs/configuration.md

Use the minimal bundle to reduce bundle size by importing only necessary chart types and features.

```typescript
import { ChartCoreComponent } from 'ng-apexcharts';
```

--------------------------------

### Define ApexTooltip configuration

Source: https://github.com/apexcharts/ng-apexcharts/blob/master/_autodocs/types.md

Configures tooltip appearance, positioning, formatting, and interaction. Used by the ChartComponent.tooltip input.

```typescript
export type ApexTooltip = {
  enabled?: boolean;
  enabledOnSeries?: number[];
  shared?: boolean;
  followCursor?: boolean;
  intersect?: boolean;
  fixed?: { enabled?: boolean; position?: 'top' | 'right' | 'left' | 'bottom'; offsetX?: number; offsetY?: number; };
  theme?: 'light' | 'dark';
  style?: {
    fontSize?: string;
    fontFamily?: string;
    backgroundColor?: string;
    color?: string;
  };
  offsets?: { x?: number; y?: number; };
  marker?: { show?: boolean; fillColor?: string; };
  x?: {
    show?: boolean;
    format?: string;
    formatter?: (val: any, opts?: any) => string | number;
    title?: { formatter?: (seriesName: any) => string; };
  };
  y?: {
    show?: boolean;
    title?: { formatter?: (seriesName: any) => string; };
    formatter?: (val: any, opts?: any) => string | number;
  };
  z?: {
    title?: string;
    formatter?: (val: any) => string | number;
  };
  items?: {
    display?: 'flex' | 'grid';
  };
  onDataSeriesHover?: { highlightDataSeries?: boolean; };
  custom?: (opts: any) => string | void;
};
```

--------------------------------

### Handle Asynchronous Rendering

Source: https://github.com/apexcharts/ng-apexcharts/blob/master/_autodocs/api-reference/ChartSSRService.md

Illustrates correct and incorrect patterns for handling the Promise returned by rendering methods.

```typescript
// ✅ Correct - use async/await
async renderChart() {
  const html = await this.chartSSRService.renderToHTML(options);
}

// ✅ Also correct - use .then()
this.chartSSRService.renderToHTML(options).then(html => {
  // Use html
});

// ❌ Wrong - do not block on render
const html = this.chartSSRService.renderToHTML(options); // Returns Promise, not string
```

--------------------------------

### Multiple Charts with SSR

Source: https://github.com/apexcharts/ng-apexcharts/blob/master/_autodocs/api-reference/ChartSSRComponent.md

Demonstrates rendering multiple charts on a single page using SSR and hydration components.

```typescript
import { Component } from '@angular/core';
import { ChartSSRComponent, ChartHydrateComponent } from 'ng-apexcharts';
import { ApexOptions } from 'ng-apexcharts';

@Component({
  selector: 'app-multi-chart-dashboard',
  imports: [ChartSSRComponent, ChartHydrateComponent],
  template: `
    <div class="dashboard">
      <!-- Line Chart -->
      <div class="chart">
        <h2>Revenue Trend</h2>
        <apx-chart-ssr
          [options]="lineChartOptions"
          [width]="500"
          [height]="350"
        />
        <apx-chart-hydrate />
      </div>

      <!-- Bar Chart -->
      <div class="chart">
        <h2>Sales by Region</h2>
        <apx-chart-ssr
          [options]="barChartOptions"
          [width]="500"
          [height]="350"
        />
        <apx-chart-hydrate />
      </div>

      <!-- Pie Chart -->
      <div class="chart">
        <h2>Market Share</h2>
        <apx-chart-ssr
          [options]="pieChartOptions"
          [width]="500"
          [height]="350"
        />
        <apx-chart-hydrate />
      </div>
    </div>
  `,
})
export class MultiChartDashboardComponent {
  readonly lineChartOptions: ApexOptions = {
    series: [{ name: 'Revenue', data: [10, 20, 30, 40, 50, 60, 70] }],
    chart: { type: 'line' },
    xaxis: { categories: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] },
  };

  readonly barChartOptions: ApexOptions = {
    series: [{ name: 'Sales', data: [100, 150, 200, 180, 220] }],
    chart: { type: 'bar' },
    xaxis: { categories: ['North', 'South', 'East', 'West', 'Central'] },
  };

  readonly pieChartOptions: ApexOptions = {
    series: [30, 25, 20, 25],
    chart: { type: 'pie' },
    labels: ['Brand A', 'Brand B', 'Brand C', 'Brand D'],
  };
}
```

--------------------------------

### List of ng-apexcharts Input Configurations

Source: https://github.com/apexcharts/ng-apexcharts/blob/master/_autodocs/README.md

A comprehensive list of available input properties for configuring chart behavior and appearance.

```typescript
chart                  // Chart type and config
series                 // Data series
annotations            // Overlaid annotations
colors                 // Series colors
dataLabels             // Data point labels
stroke                 // Line styling
labels                 // X-axis labels
legend                 // Legend config
markers                // Data point markers
noData                 // Empty state message
parsing                // Data parsing config
fill                   // Fill styling
tooltip                // Tooltip config
plotOptions            // Chart-type options
responsive             // Breakpoint rules
xaxis                  // X-axis config
yaxis                  // Y-axis config (single or array)
forecastDataPoints     // Forecast styling
grid                   // Grid styling
states                 // Hover/active styling
title                  // Chart title
subtitle               // Chart subtitle
theme                  // Color theme
autoUpdateSeries       // Fast-path control (default: true)
```

--------------------------------

### Define ApexLegend configuration

Source: https://github.com/apexcharts/ng-apexcharts/blob/master/_autodocs/types.md

Configures legend display, positioning, styling, and interaction. Used by the ChartComponent.legend input.

```typescript
export type ApexLegend = {
  show?: boolean;
  showForSingleSeries?: boolean;
  showForNullSeries?: boolean;
  showForZeroSeries?: boolean;
  position?: 'top' | 'right' | 'bottom' | 'left';
  horizontalAlign?: 'left' | 'center' | 'right';
  verticalAlign?: 'top' | 'middle' | 'bottom';
  layout?: 'vertical' | 'horizontal' | 'wrapped';
  width?: number | string;
  height?: number | string;
  fontSize?: string;
  fontFamily?: string;
  fontWeight?: string | number;
  offsetX?: number;
  offsetY?: number;
  tooltipHoverFormatter?: (val: any, opts?: any) => string;
  customLegendItems?: string[];
  labels?: { colors?: string | string[]; useSeriesColors?: boolean; };
  markers?: { width?: number; height?: number; radius?: number; customHTML?: () => string; onClick?: () => void; offsetX?: number; offsetY?: number; };
  itemMargin?: { horizontal?: number; vertical?: number; };
  onItemClick?: { toggleDataSeries?: boolean; };
  onItemHover?: { highlightDataSeries?: boolean; };
  floating?: boolean;
  activeSeriesIndex?: number | number[];
  // ... additional properties
};
```

--------------------------------

### Implement Basic Chart Hydration

Source: https://github.com/apexcharts/ng-apexcharts/blob/master/_autodocs/api-reference/ChartHydrateComponent.md

Use apx-chart-ssr and apx-chart-hydrate components to render a static chart on the server and hydrate it on the client.

```typescript
import { Component } from '@angular/core';
import { ChartSSRComponent, ChartHydrateComponent } from 'ng-apexcharts';
import { ApexOptions } from 'ng-apexcharts';

@Component({
  selector: 'app-basic-hydration',
  imports: [ChartSSRComponent, ChartHydrateComponent],
  template: `
    <div class="chart-container">
      <apx-chart-ssr [options]="serverOptions" />
      <apx-chart-hydrate />
    </div>
  `,
})
export class BasicHydrationComponent {
  readonly serverOptions: ApexOptions = {
    series: [{ name: 'Sales', data: [10, 20, 30, 40, 50] }],
    chart: { type: 'line' },
    xaxis: { categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May'] },
  };
}
```

--------------------------------

### Implement Lean Chart Component

Source: https://github.com/apexcharts/ng-apexcharts/blob/master/README.md

Use the ChartCoreComponent to utilize the reduced core bundle instead of the full library.

```ts
import { ChartCoreComponent } from "ng-apexcharts";

@Component({
  imports: [ChartCoreComponent],
  template: `<apx-chart-core [chart]="chart" [series]="series" />`,
})
export class LeanChartComponent {}
```

--------------------------------

### Export Chart to File in Angular

Source: https://github.com/apexcharts/ng-apexcharts/blob/master/_autodocs/api-reference/ChartSSRService.md

Demonstrates how to use ChartSSRService to render charts as HTML or SVG and trigger a browser download.

```typescript
import { Component, inject } from '@angular/core';
import { ChartSSRService } from 'ng-apexcharts';
import { ApexOptions } from 'ng-apexcharts';

@Component({
  selector: 'app-export-chart',
  template: `
    <div>
      <button (click)="exportHtml()">Export as HTML</button>
      <button (click)="exportSvg()">Export as SVG</button>
      <button (click)="exportPng()">Export as PNG</button>
    </div>
  `,
})
export class ExportChartComponent {
  private chartSSRService = inject(ChartSSRService);

  private readonly chartOptions: ApexOptions = {
    series: [
      { name: 'Product A', data: [10, 20, 30, 40, 50] },
      { name: 'Product B', data: [5, 15, 25, 35, 45] }
    ],
    chart: { type: 'line' },
    xaxis: { categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May'] },
  };

  async exportHtml() {
    const html = await this.chartSSRService.renderToHTML(this.chartOptions, {
      width: 800,
      height: 500,
    });
    this.downloadFile(html, 'chart.html', 'text/html');
  }

  async exportSvg() {
    const svg = await this.chartSSRService.renderToString(this.chartOptions, {
      width: 800,
      height: 500,
    });
    this.downloadFile(svg, 'chart.svg', 'image/svg+xml');
  }

  async exportPng() {
    const svg = await this.chartSSRService.renderToString(this.chartOptions, {
      width: 800,
      height: 500,
    });
    // Use a service like html2canvas or sharp to convert SVG to PNG
    // This is a simplified example
    const canvas = document.createElement('canvas');
    // ... conversion logic
  }

  private downloadFile(content: string, filename: string, mimeType: string) {
    const blob = new Blob([content], { type: mimeType });
    const url = URL.createObjectURL(blob);
    const link = document.createElement('a');
    link.href = url;
    link.download = filename;
    link.click();
    URL.revokeObjectURL(url);
  }
}
```

--------------------------------

### Basic SSR Chart Implementation

Source: https://github.com/apexcharts/ng-apexcharts/blob/master/_autodocs/api-reference/ChartSSRComponent.md

Use this component to render a static chart on the server side.

```typescript
import { Component } from '@angular/core';
import { ChartSSRComponent } from 'ng-apexcharts';
import { ApexOptions } from 'ng-apexcharts';

@Component({
  selector: 'app-ssr-chart',
  imports: [ChartSSRComponent],
  template: `
    <apx-chart-ssr
      [options]="chartOptions"
      [width]="500"
      [height]="300"
    />
  `,
})
export class SsrChartComponent {
  readonly chartOptions: ApexOptions = {
    series: [{ name: 'Sales', data: [10, 20, 30, 40, 50] }],
    chart: { type: 'line', height: 300 },
    xaxis: { categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May'] },
  };
}
```

--------------------------------

### Reactive Signal Input Usage

Source: https://github.com/apexcharts/ng-apexcharts/blob/master/_autodocs/configuration.md

Demonstrates how to use Angular signals to handle chart reactivity and dynamic data updates.

```typescript
import { Component, input, signal, effect } from '@angular/core';
import { ChartComponent } from 'ng-apexcharts';

@Component({
  selector: 'app-signal-example',
  imports: [ChartComponent],
  template: `
    <apx-chart [series]="series()" [chart]="chart" />
    <button (click)="updateData()">Add Data</button>
  `,
})
export class SignalExampleComponent {
  readonly series = signal([{ name: 'Data', data: [10, 20, 30] }]);
  readonly chart = { type: 'line', height: 300 };

  constructor() {
    // React to signal changes
    effect(() => {
      const data = this.series();
      console.log('Series changed:', data);
    });
  }

  updateData() {
    this.series.update(current => [
      {
        ...current[0],
        data: [...current[0].data, Math.floor(Math.random() * 100)],
      },
    ]);
  }
}
```

--------------------------------

### renderToHTML()

Source: https://github.com/apexcharts/ng-apexcharts/blob/master/_autodocs/api-reference/ChartSSRService.md

Renders a chart configuration to an HTML string, returning the full container with embedded SVG and configuration.

```APIDOC
## renderToHTML()

### Description
Render a chart configuration to an HTML string. Returns the full HTML container with embedded SVG and ApexCharts configuration.

### Signature
`public async renderToHTML(options: ApexOptions, ssrOptions?: ApexSSROptions): Promise<string>`

### Parameters
- **options** (ApexOptions) - Required - Complete chart configuration object
- **ssrOptions** (ApexSSROptions) - Optional - Rendering options (width, height)

### Returns
- **Promise<string>** - HTML string containing the rendered chart
```

--------------------------------

### Implementing Multiple Hydrated Charts

Source: https://github.com/apexcharts/ng-apexcharts/blob/master/_autodocs/api-reference/ChartHydrateComponent.md

Demonstrates how to pair multiple ChartSSRComponent instances with corresponding ChartHydrateComponent instances in a dashboard layout.

```typescript
import { Component } from '@angular/core';
import { ChartSSRComponent, ChartHydrateComponent } from 'ng-apexcharts';
import { ApexOptions } from 'ng-apexcharts';

@Component({
  selector: 'app-multi-hydrate',
  imports: [ChartSSRComponent, ChartHydrateComponent],
  template: `
    <div class="dashboard">
      <!-- Chart 1 -->
      <div class="chart-container">
        <apx-chart-ssr [options]="chart1Options" />
        <apx-chart-hydrate [clientOptions]="commonClientOptions" />
      </div>

      <!-- Chart 2 -->
      <div class="chart-container">
        <apx-chart-ssr [options]="chart2Options" />
        <apx-chart-hydrate [clientOptions]="commonClientOptions" />
      </div>

      <!-- Chart 3 -->
      <div class="chart-container">
        <apx-chart-ssr [options]="chart3Options" />
        <apx-chart-hydrate [clientOptions]="commonClientOptions" />
      </div>
    </div>
  `,
})
export class MultiHydrateComponent {
  readonly chart1Options: ApexOptions = {
    series: [{ name: 'A', data: [10, 20, 30] }],
    chart: { type: 'line' },
  };

  readonly chart2Options: ApexOptions = {
    series: [{ name: 'B', data: [5, 15, 25] }],
    chart: { type: 'bar' },
  };

  readonly chart3Options: ApexOptions = {
    series: [{ name: 'C', data: [100, 200, 300] }],
    chart: { type: 'area' },
  };

  readonly commonClientOptions: Partial<ApexOptions> = {
    chart: { animations: { enabled: true } },
    tooltip: { enabled: true },
  };
}
```

--------------------------------

### Configure Tree-Shaking Imports

Source: https://github.com/apexcharts/ng-apexcharts/blob/master/README.md

Register specific chart types and features to reduce bundle size by importing them as side-effects.

```ts
import "apexcharts/line";             // line, area, scatter, bubble
import "apexcharts/bar";              // bar, column, rangeBar
import "apexcharts/features/legend";  // opt-in legend
import "apexcharts/features/toolbar"; // opt-in toolbar
```

--------------------------------

### Define ApexMarkers configuration

Source: https://github.com/apexcharts/ng-apexcharts/blob/master/_autodocs/types.md

Configures data point markers including size, color, shape, and custom rendering. Used by the ChartComponent.markers input.

```typescript
export type ApexMarkers = {
  size?: number | number[];
  color?: string | string[];
  strokeColor?: string | string[];
  strokeWidth?: number | number[];
  strokeOpacity?: number | number[];
  fillOpacity?: number | number[];
  discrete?: Array<{ seriesIndex?: number; dataPointIndex?: number; fillColor?: string; strokeColor?: string; size?: number }>;
  shape?: 'circle' | 'square' | 'triangle' | 'diamond' | 'plus' | 'star' | 'line' | 'rect';
  radius?: number;
  customHTML?: () => string;
  onClick?: (chartContext?: any, opts?: any) => void;
  onDblClick?: (chartContext?: any, opts?: any) => void;
  showNullDataPoints?: boolean;
  hover?: {
    size?: number | undefined;
    sizeOffset?: number;
  };
};
```

--------------------------------

### Merge client-side configuration

Source: https://github.com/apexcharts/ng-apexcharts/blob/master/_autodocs/api-reference/ChartSSRComponent.md

Use clientOptions to override server-side configurations during the hydration process.

```typescript
// Server-side options
const options: ApexOptions = {
  series: [...],
  chart: { type: 'line', animations: { enabled: false } }, // Animations disabled on server
  // ...
};

// Client-side enhancements
clientOptions = {
  chart: { animations: { enabled: true } }, // Re-enable on client
  tooltip: { enabled: true },
  toolbar: { show: true },
};
```

--------------------------------

### Configure Server-Side Rendering

Source: https://github.com/apexcharts/ng-apexcharts/blob/master/_autodocs/configuration.md

Combine ChartSSRComponent and ChartHydrateComponent to support rendering charts in SSR environments.

```typescript
@Component({
  selector: 'app-ssr',
  imports: [ChartSSRComponent, ChartHydrateComponent],
  template: `
    <apx-chart-ssr [options]="options" [width]="600" [height]="400" />
    <apx-chart-hydrate [clientOptions]="clientOptions" />
  `,
})
export class SsrComponent {
  readonly options: ApexOptions = {
    series: [{ name: 'Data', data: [10, 20, 30] }],
    chart: { type: 'line' },
  };

  readonly clientOptions = {
    chart: { animations: { enabled: true } },
    tooltip: { enabled: true },
  };
}
```

--------------------------------

### Configure Zoneless Change Detection

Source: https://github.com/apexcharts/ng-apexcharts/blob/master/_autodocs/MODULE_OVERVIEW.md

Enable zoneless change detection in the application bootstrap process to improve performance.

```typescript
// Works with provideZonelessChangeDetection()
bootstrapApplication(AppComponent, {
  providers: [provideZonelessChangeDetection()],
});
```

--------------------------------

### Optimize Bundle Size with Selective Imports

Source: https://github.com/apexcharts/ng-apexcharts/blob/master/_autodocs/api-reference/ChartCoreComponent.md

Import only the required chart types in the application configuration to reduce the final bundle size.

```typescript
// Global chart type registration - import only what your app uses
import 'apexcharts/line';      // For line charts
import 'apexcharts/bar';       // For bar charts
import 'apexcharts/pie';       // For pie charts
import 'apexcharts/features/legend';
import 'apexcharts/features/toolbar';

export const appConfig: ApplicationConfig = {
  providers: [
    // ... other providers
  ]
};
```

--------------------------------

### Implement Server-Side API Endpoint with Express.js

Source: https://github.com/apexcharts/ng-apexcharts/blob/master/_autodocs/api-reference/ChartSSRService.md

Use this pattern to create a backend endpoint that accepts chart options and returns rendered SVG or HTML strings.

```typescript
// Example Express.js backend endpoint
import express from 'express';
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';

const app = express();

app.post('/api/render-chart', async (req, res) => {
  const { options, format = 'html' } = req.body;

  try {
    const chartSSRService = inject(ChartSSRService);

    let result: string;
    if (format === 'svg') {
      result = await chartSSRService.renderToString(options, {
        width: 800,
        height: 500,
      });
      res.setHeader('Content-Type', 'image/svg+xml');
    } else {
      result = await chartSSRService.renderToHTML(options, {
        width: 800,
        height: 500,
      });
      res.setHeader('Content-Type', 'text/html');
    }

    res.send(result);
  } catch (error) {
    res.status(500).json({ error: 'Failed to render chart' });
  }
});

app.listen(3000, () => console.log('Server running on port 3000'));
```

--------------------------------

### Minimal Chart Configuration

Source: https://github.com/apexcharts/ng-apexcharts/blob/master/_autodocs/configuration.md

A basic implementation requiring only the series and chart properties to render a functional chart.

```typescript
@Component({
  selector: 'app-minimal',
  imports: [ChartComponent],
  template: `
    <apx-chart [series]="series" [chart]="chart" />
  `,
})
export class MinimalChartComponent {
  series = [{ name: 'Series 1', data: [10, 20, 30] }];
  chart = { type: 'line', height: 350 };
}
```

--------------------------------

### Hydrate Chart on Client

Source: https://github.com/apexcharts/ng-apexcharts/blob/master/README.md

Attach interactivity to server-rendered charts using the hydration component.

```html
<apx-chart-ssr [options]="chartOptions" />
<apx-chart-hydrate [clientOptions]="{ chart: { animations: { enabled: true } } }" />
```

--------------------------------

### Use ChartSSRService in the browser

Source: https://github.com/apexcharts/ng-apexcharts/blob/master/_autodocs/api-reference/ChartSSRService.md

Import the apexcharts/ssr bundle to enable ChartSSRService functionality within a browser environment.

```typescript
// Browser usage (imports the SSR bundle)
import 'apexcharts/ssr';

const service = inject(ChartSSRService);
const html = await service.renderToHTML(options);
```

--------------------------------

### ChartComponent Public Methods

Source: https://github.com/apexcharts/ng-apexcharts/blob/master/_autodocs/MODULE_OVERVIEW.md

A list of methods available on the ChartComponent and ChartCoreComponent to interact with the chart instance.

```APIDOC
## Public Methods

### render()
Render or re-render the chart.

### updateOptions(options)
Update chart options.

### updateSeries(series)
Update series data.

### appendSeries(series)
Append new series.

### appendData(data)
Append data points.

### highlightSeries(seriesName)
Highlight a series.

### toggleSeries(seriesName)
Toggle series visibility.

### showSeries(seriesName)
Show a hidden series.

### hideSeries(seriesName)
Hide a visible series.

### resetSeries()
Reset to initial state.

### zoomX(min, max)
Zoom to X-axis range.

### toggleDataPointSelection(seriesIndex, dataPointIndex)
Select/deselect data point.

### destroy()
Clean up resources.

### setLocale(localeName)
Change locale.

### paper()
Access Raphael drawing surface.

### addXaxisAnnotation(options, pushToMemory)
Add X-axis annotation.

### addYaxisAnnotation(options, pushToMemory)
Add Y-axis annotation.

### addPointAnnotation(options, pushToMemory)
Add point annotation.

### removeAnnotation(id, pushToMemory)
Remove annotation by ID.

### clearAnnotations(pushToMemory)
Remove all annotations.

### dataURI()
Export as data URI.
```

--------------------------------

### NgModule

Source: https://github.com/apexcharts/ng-apexcharts/blob/master/_autodocs/MODULE_OVERVIEW.md

The Angular module for backward compatibility.

```APIDOC
## NgModule

- **NgApexchartsModule**: The main module to import for backward compatibility.
```

--------------------------------

### Define ApexAnnotations

Source: https://github.com/apexcharts/ng-apexcharts/blob/master/_autodocs/types.md

Configuration object for visual markers, lines, and text overlays.

```typescript
export type ApexAnnotations = {
  position?: 'front' | 'back';
  yaxis?: YAxisAnnotations[];
  xaxis?: XAxisAnnotations[];
  points?: PointAnnotations[];
  images?: ImageAnnotations[];
};
```

--------------------------------

### nextInstanceId()

Source: https://github.com/apexcharts/ng-apexcharts/blob/master/_autodocs/api-reference/ChartSSRService.md

Retrieves a unique, auto-incrementing identifier for the current application instance, useful for TransferState key generation.

```APIDOC
## nextInstanceId()

### Description
Returns a unique instance identifier for TransferState key generation. The value auto-increments for each call within the same app instance.

### Signature
`public nextInstanceId(): number`

### Returns
- **number** - Incrementing counter value (0, 1, 2, ...)

### Example
```typescript
const service = inject(ChartSSRService);
const id1 = service.nextInstanceId(); // 0
const id2 = service.nextInstanceId(); // 1
```
```

--------------------------------

### Define AnnotationLabel and AnnotationStyle

Source: https://github.com/apexcharts/ng-apexcharts/blob/master/_autodocs/types.md

Styling and event handler configuration for annotation labels.

```typescript
export type AnnotationLabel = {
  borderColor?: string;
  borderWidth?: number;
  borderRadius?: number;
  text?: string;
  textAnchor?: 'start' | 'middle' | 'end';
  offsetX?: number;
  offsetY?: number;
  mouseEnter?: () => void;
  mouseLeave?: () => void;
  click?: () => void;
  style?: AnnotationStyle;
};

export type AnnotationStyle = {
  background?: string;
  color?: string;
  fontSize?: string;
  fontWeight?: string | number;
  fontFamily?: string;
  cssClass?: string;
  padding?: {
    left?: number;
    right?: number;
    top?: number;
    bottom?: number;
  };
};
```

--------------------------------

### ChartSSRComponent Inputs

Source: https://github.com/apexcharts/ng-apexcharts/blob/master/_autodocs/configuration.md

Configuration inputs for server-side rendering of charts.

```APIDOC
## ChartSSRComponent Inputs

### Description
Configuration options for server-side rendering of ApexCharts.

### Inputs
- **options** (ApexOptions) - Required - Complete chart config (all options combined)
- **width** (number) - Optional - Default: 400 - Chart width in pixels
- **height** (number) - Optional - Default: 300 - Chart height in pixels
```