### Example: Get Data URI

Source: https://github.com/apexcharts/blazor-apexcharts/blob/master/_autodocs/api-reference/apexchart.md

Shows an example of exporting the chart as a base64 Data URI with a scale option.

```csharp
var dataUri = await Chart.GetDataUriAsync(new DataUriOptions { Scale = 2 });
```

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

### Example: Get SVG String

Source: https://github.com/apexcharts/blazor-apexcharts/blob/master/_autodocs/api-reference/apexchart.md

Demonstrates how to obtain the SVG string representation of the chart.

```csharp
var svgString = await Chart.GetSvgStringAsync();
```

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

### Add Blazor-ApexCharts Package

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

Install the Blazor-ApexCharts NuGet package using the .NET CLI.

```bash
dotnet add package Blazor-ApexCharts
```

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

### Blazor Bar Chart Example

Source: https://github.com/apexcharts/blazor-apexcharts/blob/master/_autodocs/api-reference/usage-patterns.md

Implement a bar chart by setting SeriesType to SeriesType.Bar. This example visualizes sales data categorized by product type.

```razor
<ApexChart TItem="CategoryData"
           Title="Sales by Category"
           XAxisType="XAxisType.Category">
    
    <ApexPointSeries TItem="CategoryData"
                     Items="@Data"
                     Name="Sales"
                     SeriesType="SeriesType.Bar"
                     XValue="@(e => e.Category)"
                     YValue="@(e => e.Amount)" />
</ApexChart>

@code {
    private List<CategoryData> Data { get; set; }

    protected override void OnInitialized()
    {
        Data = new List<CategoryData>
        {
            new CategoryData { Category = "Electronics", Amount = 150000 },
            new CategoryData { Category = "Clothing", Amount = 95000 },
            new CategoryData { Category = "Food", Amount = 120000 },
            new CategoryData { Category = "Books", Amount = 55000 }
        };
    }

    public class CategoryData
    {
        public string Category { get; set; }
        public decimal Amount { get; set; }
    }
}
```

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

### Blazor Candlestick Chart Example

Source: https://github.com/apexcharts/blazor-apexcharts/blob/master/_autodocs/api-reference/usage-patterns.md

Demonstrates how to create a candlestick chart using Blazor ApexCharts. This snippet includes the necessary component setup and sample data definition.

```razor
<ApexChart TItem="OhlcData"
           Title="Stock Price">
    
    <ApexCandleSeries TItem="OhlcData"
                      Items="@StockData"
                      Name="Stock"
                      XValue="@(e => e.Date)"
                      OpenValue="@(e => e.Open)"
                      HighValue="@(e => e.High)"
                      LowValue="@(e => e.Low)"
                      CloseValue="@(e => e.Close)" />
</ApexChart>

@code {
    private List<OhlcData> StockData { get; set; }

    protected override void OnInitialized()
    {
        StockData = new List<OhlcData>
        {
            new OhlcData { Date = new DateTime(2024, 1, 1), Open = 100, High = 110, Low = 95, Close = 105 },
            new OhlcData { Date = new DateTime(2024, 1, 2), Open = 105, High = 115, Low = 100, Close = 110 }
        };
    }

    public class OhlcData
    {
        public DateTime Date { get; set; }
        public decimal Open { get; set; }
        public decimal High { get; set; }
        public decimal Low { get; set; }
        public decimal Close { get; set; }
    }
}
```

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

### MAUI Support Registration

Source: https://github.com/apexcharts/blazor-apexcharts/blob/master/_autodocs/api-reference/apexchart-service.md

Example of how to register the ApexCharts service for .NET MAUI applications.

```APIDOC
## MAUI Support

For .NET MAUI applications, use the following code to register the service:

```csharp
services.AddApexChartsMaui();
```

This registers the same service but is specifically configured for use in MAUI environments.
```

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

### Add Blazor-ApexCharts-MAUI Package

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

Install the Blazor-ApexCharts-MAUI NuGet package for Blazor projects running on .NET MAUI.

```bash
dotnet add package Blazor-ApexCharts-MAUI
```

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

### Serialize Chart Options

Source: https://github.com/apexcharts/blazor-apexcharts/blob/master/_autodocs/api-reference/extensions-utilities.md

Example of how to serialize chart options using the GetOptions method from ChartSerializer.

```csharp
var json = JsonSerializer.Serialize(options, ChartSerializer.GetOptions<MyData>());
```

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

### Add Blazor-ApexCharts Package

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

Install the Blazor-ApexCharts NuGet package for Blazor projects running in a web browser, WinForms, or WPF.

```bash
dotnet add package Blazor-ApexCharts
```

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

### UpdateValueAsync Method Example

Source: https://github.com/apexcharts/blazor-apexcharts/blob/master/_autodocs/api-reference/apexgauge.md

Example of how to call the UpdateValueAsync method to animate gauge updates.

```csharp
await Gauge.UpdateValueAsync(animate: true);
```

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

### ApexBubbleSeries Usage Example

Source: https://github.com/apexcharts/blazor-apexcharts/blob/master/_autodocs/api-reference/apex-series.md

Example of how to use the ApexBubbleSeries component in a Blazor application, specifying data items, series name, and expressions for X, Y, and bubble size values.

```razor
<ApexBubbleSeries TItem="DataPoint"
                  Items="@Data"
                  Name="Bubble Data"
                  XValue="@(e => e.X)"
                  YValue="@(e => e.Y)"
                  BubbleValue="@(e => e.Size)" />
```

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

### Responsive Configuration

Source: https://github.com/apexcharts/blazor-apexcharts/blob/master/_autodocs/index.md

Configure chart behavior based on screen breakpoints. This example adjusts chart height for screens smaller than 768px.

```csharp
options.Responsive = new List<Responsive<MyData>>
{
    new Responsive<MyData>
    {
        Breakpoint = 768,
        Options = new ApexChartOptions<MyData>
        {
            Chart = new Chart { Height = 300 }
        }
    }
};
```

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

### Create a Basic Bar Chart with Blazor ApexCharts

Source: https://github.com/apexcharts/blazor-apexcharts/blob/master/_autodocs/index.md

Example of creating a simple bar chart using the ApexChart and ApexPointSeries components. Define the data structure and initialize data in OnInitialized.

```razor
<ApexChart TItem="SalesData"
           Title="Monthly Sales"
           XAxisType="XAxisType.Category">

    <ApexPointSeries TItem="SalesData"
                     Items="@Data"
                     Name="Revenue"
                     SeriesType="SeriesType.Bar"
                     XValue="@(e => e.Month)"
                     YValue="@(e => e.Amount)" />

</ApexChart>

@code {
    private List<SalesData> Data { get; set; }

    protected override void OnInitialized()
    {
        Data = new List<SalesData>
        {
            new SalesData { Month = "Jan", Amount = 30000 },
            new SalesData { Month = "Feb", Amount = 35000 }
        };
    }

    public class SalesData
    {
        public string Month { get; set; }
        public decimal Amount { get; set; }
    }
}
```

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

### Create Your First Blazor Chart

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

Example of creating a basic Blazor chart with two bar series (Net Profit and Revenue) using sample data. Ensure your Blazor project is configured with interactive rendering mode for .NET 8.

```razor
    <ApexChart TItem="MyData"
               Title="Sample Data">

        <ApexPointSeries TItem="MyData"
                         Items="Data"
                         Name="Net Profit"
                         SeriesType="SeriesType.Bar"
                         XValue="e => e.Category"
                         YValue="e=> e.NetProfit" />

        <ApexPointSeries TItem="MyData"
                         Items="Data"
                         Name="Revenue"
                         SeriesType="SeriesType.Bar"
                         XValue="e => e.Category"
                         YValue="e=> e.Revenue" />
    </ApexChart>
    
@code {
    private List<MyData> Data { get; set; } = new();
    protected override void OnInitialized()
    {
        Data.Add(new MyData { Category = "Jan", NetProfit = 12, Revenue = 33 });
        Data.Add(new MyData { Category = "Feb", NetProfit = 43, Revenue = 42 });
        Data.Add(new MyData { Category = "Mar", NetProfit = 112, Revenue = 23 });
    }

    public class MyData
    {
        public string Category { get; set; }
        public int NetProfit { get; set; }
        public int Revenue { get; set; }
    }
}
```

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

### Create a Basic Line Chart

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

Example of creating a basic line chart using the ApexChart and ApexPointSeries components. Ensure your data model 'MyData' has 'X' and 'Y' properties.

```razor
<ApexChart TItem="MyData" Title="My Chart">
    <ApexPointSeries TItem="MyData"
                     Items="@Data"
                     Name="Series"
                     SeriesType="SeriesType.Line"
                     XValue="@(e => e.X)"
                     YValue="@(e => e.Y)" />
</ApexChart>
```

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

### Platform-Specific Code for Server vs. WebAssembly

Source: https://github.com/apexcharts/blazor-apexcharts/blob/master/_autodocs/errors-troubleshooting.md

Handle differences between Blazor Server and WebAssembly by detecting the platform at runtime. This example shows how to conditionally apply WebAssembly-specific features, like custom formatters, using preprocessor directives and runtime checks.

```csharp
// Check platform and adjust code
private bool isWasm = false;

protected override void OnInitialized()
{
    // Detect platform
    #if WASM
        isWasm = true;
    #endif
}

// Only set custom formatters in WASM
@if (isWasm)
{
    <ApexChart FormatYAxisLabel="@(v => FormatValue(v))" />
}
```

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

### ApexChartsServiceOptions

Source: https://github.com/apexcharts/blazor-apexcharts/blob/master/_autodocs/api-reference/apexchart-service.md

Configuration options for ApexChartService during Dependency Injection setup. Allows setting global options that apply to all chart instances.

```APIDOC
## Class: ApexChartsServiceOptions

### Description
Configuration options for ApexChartService during DI setup.

### Properties

| Property | Type | Description |
|----------|------|-------------|
| GlobalOptions | IApexChartBaseOptions | Global options applied to all chart instances |
```

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

### Blazor Usage Example for ApexPointSeries

Source: https://github.com/apexcharts/blazor-apexcharts/blob/master/_autodocs/api-reference/apex-series.md

Example of how to use the ApexPointSeries component in a Blazor application. This snippet demonstrates setting up a bar series with data items, name, series type, and value extractors for X and Y axes.

```razor
<ApexPointSeries TItem="SalesData"
                 Items="@Data"
                 Name="Monthly Sales"
                 SeriesType="SeriesType.Bar"
                 XValue="@(e => e.Month)"
                 YValue="@(e => e.Revenue)" />
```

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

### Changing Theme Globally

Source: https://github.com/apexcharts/blazor-apexcharts/blob/master/_autodocs/api-reference/apexchart-service.md

Provides an example of how to change the global theme of all ApexCharts using `SetGlobalOptionsAsync`.

```APIDOC
## Changing Theme Globally

```csharp
async Task ChangeTheme(PaletteType palette)
{
    var options = new ApexChartBaseOptions
    {
        Theme = new Theme { Palette = palette }
    };
    await ChartService.SetGlobalOptionsAsync(options, reRenderCharts: true);
}
```
```

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

### Aggregate Large Datasets

Source: https://github.com/apexcharts/blazor-apexcharts/blob/master/_autodocs/errors-troubleshooting.md

Improve performance with large datasets by aggregating data before rendering. This example groups data by date and sums the amounts.

```csharp
// Or aggregate
var aggregated = data
    .GroupBy(x => x.Date.Date)
    .Select(g => new DataPoint 
    { 
        Date = g.Key, 
        Value = g.Sum(x => x.Amount) 
    })
    .ToList();
```

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

### ZoomOptions Class

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

Specifies the start and end points for zooming functionality in charts.

```csharp
public class ZoomOptions
{
    public decimal Start { get; set; }
    public decimal End { get; set; }
}
```

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

### ZoomOptions

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

Options for configuring the zoom behavior of charts, specifying the start and end points.

```APIDOC
## ZoomOptions Class

Options for zooming.

```csharp
public class ZoomOptions
{
    public decimal Start { get; set; }
    public decimal End { get; set; }
}
```

### Properties

| Property | Type | Description |
|----------|------|-------------|
| Start | decimal | Starting position for zoom |
| End | decimal | Ending position for zoom |
```

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

### Register ApexCharts Service for MAUI

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

Register the ApexCharts service specifically for MAUI applications. This setup is similar to the Blazor WebAssembly setup but tailored for MAUI.

```csharp
services.AddApexChartsMaui();
```

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

### Blazor Line Chart Example

Source: https://github.com/apexcharts/blazor-apexcharts/blob/master/_autodocs/api-reference/usage-patterns.md

Use ApexPointSeries with SeriesType.Line to create a line chart. Configure XAxisType to Category for discrete x-axis values.

```razor
<ApexChart TItem="SalesData"
           Title="Monthly Sales Trend"
           XAxisType="XAxisType.Category">
    
    <ApexPointSeries TItem="SalesData"
                     Items="@SalesData"
                     Name="Revenue"
                     SeriesType="SeriesType.Line"
                     XValue="@(e => e.Month)"
                     YValue="@(e => e.Revenue)" />
</ApexChart>

@code {
    private List<SalesData> SalesData { get; set; }

    protected override void OnInitialized()
    {
        SalesData = new List<SalesData>
        {
            new SalesData { Month = "Jan", Revenue = 30000 },
            new SalesData { Month = "Feb", Revenue = 35000 },
            new SalesData { Month = "Mar", Revenue = 42000 }
        };
    }

    public class SalesData
    {
        public string Month { get; set; }
        public decimal Revenue { get; set; }
    }
}
```

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

### Use ZoomXAsync with Valid ZoomOptions

Source: https://github.com/apexcharts/blazor-apexcharts/blob/master/_autodocs/errors-troubleshooting.md

Provide valid ZoomOptions or use the overload with start and end parameters when calling ZoomXAsync to prevent ArgumentNullException.

```csharp
// Create ZoomOptions with required properties
var zoomOptions = new ZoomOptions 
{
    Start = 1000, 
    End = 2000 
};
await chart.ZoomXAsync(zoomOptions);

// Or use the overload directly
await chart.ZoomXAsync(1000, 2000);
```

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

### Blazor Pie Chart Example

Source: https://github.com/apexcharts/blazor-apexcharts/blob/master/_autodocs/api-reference/usage-patterns.md

Generate a pie chart by specifying SeriesType.Pie. This chart type is ideal for showing proportions of a whole.

```razor
<ApexChart TItem="PieData"
           Title="Market Share">
    
    <ApexPointSeries TItem="PieData"
                     Items="@MarketData"
                     Name="Market Share"
                     SeriesType="SeriesType.Pie"
                     XValue="@(e => e.Company)"
                     YValue="@(e => e.Percentage)" />
</ApexChart>

@code {
    private List<PieData> MarketData { get; set; }

    protected override void OnInitialized()
    {
        MarketData = new List<PieData>
        {
            new PieData { Company = "Company A", Percentage = 35 },
            new PieData { Company = "Company B", Percentage = 28 },
            new PieData { Company = "Company C", Percentage = 20 },
            new PieData { Company = "Others", Percentage = 17 }
        };
    }

    public class PieData
    {
        public string Company { get; set; }
        public decimal Percentage { get; set; }
    }
}
```

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

### Blazor Scatter Chart Example

Source: https://github.com/apexcharts/blazor-apexcharts/blob/master/_autodocs/api-reference/usage-patterns.md

Create a scatter chart using SeriesType.Scatter. This is useful for visualizing the relationship between two numerical variables.

```razor
<ApexChart TItem="ScatterPoint"
           Title="Correlation Analysis">
    
    <ApexPointSeries TItem="ScatterPoint"
                     Items="@ScatterData"
                     Name="Data Points"
                     SeriesType="SeriesType.Scatter"
                     XValue="@(e => e.X)"
                     YValue="@(e => e.Y)" />
</ApexChart>

@code {
    private List<ScatterPoint> ScatterData { get; set; }

    protected override void OnInitialized()
    {
        ScatterData = new List<ScatterPoint>
        {
            new ScatterPoint { X = 10, Y = 20 },
            new ScatterPoint { X = 25, Y = 35 },
            new ScatterPoint { X = 40, Y = 50 }
        };
    }

    public class ScatterPoint
    {
        public decimal X { get; set; }
        public decimal Y { get; set; }
    }
}
```

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

### Batch Updates for Frequent Updates

Source: https://github.com/apexcharts/blazor-apexcharts/blob/master/_autodocs/errors-troubleshooting.md

Reduce flickering caused by frequent updates by batching updates together. This example demonstrates collecting multiple updates before appending them to the chart.

```csharp
// Batch updates
var updates = new List<MyData>();
while (moreDataAvailable)
{
    updates.AddRange(GetNextBatch());
}
await chart.AppendDataAsync(updates);
```

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

### Monitor Event Firing

Source: https://github.com/apexcharts/blazor-apexcharts/blob/master/_autodocs/errors-troubleshooting.md

Implement event handlers to confirm that chart events are firing as expected. This example shows how to log a message when the DataPointSelection event occurs.

```csharp
private async Task OnEvent()
{
    Console.WriteLine("Event fired");
    await InvokeAsync(StateHasChanged);
}

<ApexChart OnDataPointSelection="@OnEvent" />
```

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

### Get Options for Chart Serialization

Source: https://github.com/apexcharts/blazor-apexcharts/blob/master/_autodocs/api-reference/extensions-utilities.md

Provides JsonSerializerOptions configured for chart serialization. Use this when serializing chart options or data to JSON.

```csharp
public static JsonSerializerOptions GetOptions<TItem>() where TItem : class
```

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

### Zoom Chart X Axis Async (Options)

Source: https://github.com/apexcharts/blazor-apexcharts/blob/master/_autodocs/api-reference/apexchart.md

Manually zooms into the chart along the X-axis using provided zoom options. Requires a `ZoomOptions` object specifying the start and end points for the zoom.

```csharp
public virtual async Task ZoomXAsync(ZoomOptions zoomOptions)
```

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

### Blazor ApexChart with Bar Series

Source: https://github.com/apexcharts/blazor-apexcharts/blob/master/_autodocs/api-reference/apexchart.md

This snippet shows a basic Blazor component setup for an ApexChart displaying monthly revenue as a bar series. Ensure you have the ApexCharts component and necessary data model defined.

```csharp
<ApexChart TItem="SalesData" 
           Title="Monthly Sales"
           XAxisType="XAxisType.Category"
           Width="100%"
           Height="400">

    <ApexPointSeries TItem="SalesData"
                     Items="Data"
                     Name="Revenue"
                     SeriesType="SeriesType.Bar"
                     XValue="e => e.Month"
                     YValue="e => e.Revenue" />

</ApexChart>

@code {
    private List<SalesData> Data { get; set; }

    protected override void OnInitialized()
    {
        Data = new List<SalesData>
        {
            new SalesData { Month = "Jan", Revenue = 30000 },
            new SalesData { Month = "Feb", Revenue = 35000 },
            new SalesData { Month = "Mar", Revenue = 42000 }
        };
    }

    public class SalesData
    {
        public string Month { get; set; }
        public decimal Revenue { get; set; }
    }
}
```

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

### Configure Fill in Blazor ApexCharts

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

Set the fill properties for chart areas, including type, colors, gradients, images, and patterns. This example shows basic solid fill with gradient configuration.

```csharp
new Fill
{
    Type = "solid",  // solid, gradient, image, pattern
    Colors = new List<string> { "#FFF" },
    Gradient = new Gradient
    {
        Type = "vertical",
        Shade = "dark",
        ShadeIntensity = 0.1,
        GradientToColors = new List<string> { "#000" },
        Stops = new List<double> { 0, 100 }
    },
    Image = new Image { /* ... */ },
    Pattern = new Pattern { /* ... */ }
}
```

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

### Initialize Chart with Custom JavaScript Path

Source: https://github.com/apexcharts/blazor-apexcharts/blob/master/_autodocs/api-reference/apexchart-service.md

Manually loads required JavaScript modules and initializes global options. Only call manually if using custom JavaScript paths.

```csharp
await chartService.InitalizeChartAsync("/custom/apexcharts.js");
```

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

### Configure Theme Options

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

Set the theme mode, primary color, and palette. Monochrome settings can also be applied for a single-color theme.

```csharp
new Theme
{
    Mode = "light",  // or "dark"
    PrimaryColor = "#1f77b4",
    Palette = PaletteType.Palette6,
    Monochrome = new Monochrome
    {
        Enabled = true,
        Color = "#1f77b4",
        ShadeTo = "light",
        ShadeIntensity = 0.65
    }
}
```

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

### InitalizeChartAsync

Source: https://github.com/apexcharts/blazor-apexcharts/blob/master/_autodocs/api-reference/apexchart-service.md

Manually loads required JavaScript modules and initializes global options. This method is typically called automatically on chart initialization, but can be invoked manually if custom JavaScript paths are used.

```APIDOC
## InitalizeChartAsync

### Description
Manually loads required JavaScript modules and initializes global options.

### Method Signature
```csharp
public Task InitalizeChartAsync(string javascriptPath = null)
```

### Parameters
#### Path Parameters
- **javascriptPath** (string) - Optional - Path to custom JavaScript file containing ApexCharts library

### Returns
- Task

### Remarks
Called automatically on chart initialization. Only call manually if using custom JavaScript paths.

### Example
```csharp
await chartService.InitalizeChartAsync("/custom/apexcharts.js");
```
```

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

### Accessing Locale Resources

Source: https://github.com/apexcharts/blazor-apexcharts/blob/master/_autodocs/api-reference/apexchart-service.md

Gets the collection of available locale resources. Allows selection of specific locales, such as English.

```csharp
var resources = chartService.LocaleResources;
var english = resources.FirstOrDefault(x => x.Code == "en");
```

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

### Key Classes and Enums

Source: https://github.com/apexcharts/blazor-apexcharts/blob/master/_autodocs/DOCUMENTATION_SUMMARY.txt

Documentation for essential classes and enums used in configuring charts, series, and other aspects of the library.

```APIDOC
## Key Classes and Enums

### Description
This section covers the fundamental data structures and enumerations that define chart options, series properties, and chart behavior.

### Documented Classes (Examples)
- **ApexChartOptions**: Main configuration object for charts.
- **Chart**: Configuration for chart type, dimensions, etc.
- **Theme**: Styling and color palettes.
- **XAxis**, **YAxis**: Axis configurations.
- **Series**: Represents a data series.
- **DataPoint**: Represents a single data point within a series.

### Documented Enums (Examples)
- **ChartType**: Defines the type of chart (e.g., Bar, Line, Pie).
- **SeriesType**: Defines the type of series (e.g., Regular, Candlestick).
- **XAxisType**: Defines the type of the X-axis (e.g., Category, Datetime).

### Usage
These classes and enums are used extensively when configuring the `ApexChart` and its series, as well as when using the `ApexChartService`.
```

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

### Configure Per-Instance Chart Options in Blazor

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

Each chart instance requires its own options object. Initialize separate ApexChartOptions objects for each chart.

```csharp
// CORRECT - each chart has unique instance
<ApexChart TItem="Data" Options="chartOptions1" />
<ApexChart TItem="Data" Options="chartOptions2" />

@code {
    ApexChartOptions<Data> chartOptions1;
    ApexChartOptions<Data> chartOptions2;

    protected override void OnInitialized()
    {
        chartOptions1 = new ApexChartOptions<Data> { /* ... */ };
        chartOptions2 = new ApexChartOptions<Data> { /* ... */ };
    }
```

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

### Configure Forecast Data Points for ApexCharts

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

Set up configuration for extrapolated forecast data points, including the count, fill opacity, stroke width, and dash array for the forecast series.

```csharp
options.ForecastDataPoints = new ForecastDataPoints
{
    Count = 10,
    FillOpacity = 0.5,
    StrokeWidth = 2,
    DashArray = 5
};
```

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

### Get Available Locales

Source: https://github.com/apexcharts/blazor-apexcharts/blob/master/_autodocs/api-reference/extensions-utilities.md

Accesses the built-in locale resources available through the ChartService. Locales can be accessed using their string codes.

```csharp
@code {
    protected override void OnInitialized()
    {
        var locales = ChartService.LocaleResources;
        // Access locales like: "en", "es", "fr", etc.
    }
}
```

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

### Get Chart SVG String

Source: https://github.com/apexcharts/blazor-apexcharts/blob/master/_autodocs/api-reference/apexchart.md

Retrieves the chart as an SVG string. Note that this method is not available in Blazor Server applications.

```csharp
public virtual async Task<string> GetSvgStringAsync()
```

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

### Basic Gauge Usage

Source: https://github.com/apexcharts/blazor-apexcharts/blob/master/_autodocs/api-reference/apexgauge.md

Demonstrates the basic usage of the ApexGauge component with essential properties.

```APIDOC
## Basic Gauge

```razor
<ApexGauge Title="Performance"
           Percentage="@performanceScore"
           Label="Score" />

@code {
    private decimal performanceScore = 75;
}
```
```

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

### Initialize ApexChartOptions

Source: https://github.com/apexcharts/blazor-apexcharts/blob/master/_autodocs/errors-troubleshooting.md

Ensure ApexChartOptions is initialized and required properties are set before use to prevent ArgumentNullException.

```csharp
// Ensure Options is initialized
var options = new ApexChartOptions<MyData>();
// Set required properties before using
options.Chart = new Chart { Type = ChartType.Line };
```

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

### Service Registration

Source: https://github.com/apexcharts/blazor-apexcharts/blob/master/_autodocs/api-reference/apexchart-service.md

Demonstrates how to register the ApexCharts service with default settings or with custom global options.

```APIDOC
## Service Registration

### Basic Registration

```csharp
services.AddApexCharts();
```

### Registration with Global Options

```csharp
services.AddApexCharts(config =>
{
    config.GlobalOptions = new ApexChartBaseOptions
    {
        Debug = true,
        Theme = new Theme { Palette = PaletteType.Palette6 }
    };
});
```
```

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

### Filter Large Datasets

Source: https://github.com/apexcharts/blazor-apexcharts/blob/master/_autodocs/errors-troubleshooting.md

Improve performance with large datasets by filtering the data before rendering. This example shows taking a subset of the data.

```csharp
// Instead of 10,000 points
var data = allData.Take(100).ToList();
```

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

### Basic Service Injection Pattern

Source: https://github.com/apexcharts/blazor-apexcharts/blob/master/_autodocs/api-reference/extensions-utilities.md

Demonstrates how to inject the IApexChartService to interact with charts. Use this pattern to access chart functionalities like re-rendering.

```csharp
@page "/charts"
@inject IApexChartService ChartService

<button @onclick="RefreshAllCharts">Refresh All Charts</button>

@code {
    private async Task RefreshAllCharts()
    {
        await ChartService.ReRenderChartsAsync();
    }
}
```

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

### Render Chart Async

Source: https://github.com/apexcharts/blazor-apexcharts/blob/master/_autodocs/api-reference/apexchart.md

Renders the chart on the page. Must be called after configuring options.

```csharp
public virtual async Task RenderAsync()
{
    await InvokeAsync(async () => await Chart.RenderAsync());
}
```

```csharp
await Chart.RenderAsync();
```

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

### Blazor Area Chart Example

Source: https://github.com/apexcharts/blazor-apexcharts/blob/master/_autodocs/api-reference/usage-patterns.md

Create an area chart using SeriesType.Area. This is suitable for visualizing trends over time, using XAxisType.Datetime for time-series data.

```razor
<ApexChart TItem="TimeSeriesData"
           Title="Website Traffic"
           XAxisType="XAxisType.Datetime">
    
    <ApexPointSeries TItem="TimeSeriesData"
                     Items="@TrafficData"
                     Name="Page Views"
                     SeriesType="SeriesType.Area"
                     XValue="@(e => e.Date)"
                     YValue="@(e => e.Views)" />
</ApexChart>

@code {
    private List<TimeSeriesData> TrafficData { get; set; }

    protected override void OnInitialized()
    {
        TrafficData = new List<TimeSeriesData>
        {
            new TimeSeriesData { Date = new DateTime(2024, 1, 1), Views = 1200 },
            new TimeSeriesData { Date = new DateTime(2024, 1, 2), Views = 1900 },
            new TimeSeriesData { Date = new DateTime(2024, 1, 3), Views = 800 }
        };
    }

    public class TimeSeriesData
    {
        public DateTime Date { get; set; }
        public decimal Views { get; set; }
    }
}
```

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

### Configuring Global Chart Options

Source: https://github.com/apexcharts/blazor-apexcharts/blob/master/_autodocs/api-reference/extensions-utilities.md

Illustrates how to set global chart options, such as applying a dark theme, using the IApexChartService. The `reRenderCharts` parameter determines if existing charts should be updated.

```csharp
@code {
    private async Task ApplyDarkTheme()
    {
        var darkTheme = new ApexChartBaseOptions
        {
            Theme = new Theme
            {
                Mode = "dark",
                Palette = PaletteType.Palette4
            }
        };
        
        await ChartService.SetGlobalOptionsAsync(darkTheme, reRenderCharts: true);
    }
}
```

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

### ZoomXAsync (Overload 2)

Source: https://github.com/apexcharts/blazor-apexcharts/blob/master/_autodocs/api-reference/apexchart.md

Manually zooms into the chart along the X-axis by specifying the start and end values. This overload is useful for directly setting the zoom range.

```APIDOC
## ZoomXAsync (Overload 2)

### Description
Manually zoom into the chart with specific start and end values.

### Method
`public virtual async Task ZoomXAsync(decimal start, decimal end)`

### Parameters
#### Path Parameters
- **start** (decimal) - Required - The starting x-axis value (timestamp or number)
- **end** (decimal) - Required - The ending x-axis value (timestamp or number)

### Returns
Task

### Example
```csharp
await Chart.ZoomXAsync(1000, 2000);
```
```

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

### Configure Responsive Options in Blazor

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

Define chart options that adapt to different screen breakpoints. Each responsive configuration includes a breakpoint and specific chart/legend options.

```csharp
options.Responsive = new List<Responsive<MyData>>
{
    new Responsive<MyData>
    {
        Breakpoint = 1200,
        Options = new ApexChartOptions<MyData>
        {
            Chart = new Chart { Height = 500 },
            Legend = new Legend { Position = "bottom" }
        }
    },
    new Responsive<MyData>
    {
        Breakpoint = 768,
        Options = new ApexChartOptions<MyData>
        {
            Chart = new Chart { Height = 300 },
            Legend = new Legend { Position = "right" }
        }
    }
};
```

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

### Configure Global Chart Options

Source: https://github.com/apexcharts/blazor-apexcharts/blob/master/_autodocs/errors-troubleshooting.md

Set global chart options during service registration to ensure they are applied correctly. Avoid setting global options after the first chart render.

```csharp
services.AddApexCharts(config =>
{
    config.GlobalOptions = new ApexChartBaseOptions { /* ... */ };
});
```

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

### Get Chart Data URI

Source: https://github.com/apexcharts/blazor-apexcharts/blob/master/_autodocs/api-reference/apexchart.md

Obtains the chart as a base64 encoded Data URI, suitable for image exports. You can specify options like `Scale` or `Width`.

```csharp
public virtual async Task<string> GetDataUriAsync(DataUriOptions dataUriOptions)
```

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

### Set Global Chart Options and Re-render

Source: https://github.com/apexcharts/blazor-apexcharts/blob/master/_autodocs/api-reference/apexchart-service.md

Sets global chart options and optionally re-renders all charts. Use this overload to provide new global options.

```csharp
var globalOptions = new ApexChartBaseOptions
{
    Debug = true,
    Theme = new Theme { Palette = PaletteType.Palette6 }
};
await chartService.SetGlobalOptionsAsync(globalOptions, reRenderCharts: true);
```

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

### Multiple Gauges

Source: https://github.com/apexcharts/blazor-apexcharts/blob/master/_autodocs/api-reference/apexgauge.md

Demonstrates how to render multiple ApexGauge components to display various metrics simultaneously.

```APIDOC
## Multiple Gauges

```razor
<div class="gauge-grid">
    <ApexGauge Title="CPU"
               Percentage="@metrics.CpuUsage"
               Label="CPU" />
    
    <ApexGauge Title="Memory"
               Percentage="@metrics.MemoryUsage"
               Label="RAM" />
    
    <ApexGauge Title="Disk"
               Percentage="@metrics.DiskUsage"
               Label="SSD" />
</div>

@code {
    private class SystemMetrics
    {
        public decimal CpuUsage { get; set; }
        public decimal MemoryUsage { get; set; }
        public decimal DiskUsage { get; set; }
    }

    private SystemMetrics metrics;

    protected override void OnInitialized()
    {
        metrics = new SystemMetrics
        {
            CpuUsage = 45,
            MemoryUsage = 62,
            DiskUsage = 78
        };
    }
}
```
```

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

### Handle Null Values in Event Handlers

Source: https://github.com/apexcharts/blazor-apexcharts/blob/master/_autodocs/errors-troubleshooting.md

Prevent `NullReferenceException` in event callbacks by checking for null values before accessing properties of the event data. This example demonstrates safe access to `data.Item` and `data.SeriesIndex`.

```csharp
private async Task OnDataPointSelected(SelectedData<MyData> data)
{
    // Check for null before accessing
    if (data?.Item != null)
    {
        var value = data.Item.SomeProperty;
    }
    
    if (data?.SeriesIndex.HasValue == true)
    {
        var index = data.SeriesIndex.Value;
    }
}
```

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

### Update Gauge Value in ApexCharts Blazor

Source: https://github.com/apexcharts/blazor-apexcharts/blob/master/_autodocs/errors-troubleshooting.md

Call `UpdateValueAsync` on the `ApexGauge` component after changing its percentage parameter to ensure the gauge visually updates. This example demonstrates updating the percentage and triggering the animation.

```csharp
@ref="gauge"

<ApexGauge Percentage="@gaugePercentage" Label="Score" />

<button @onclick="IncreasePercentage">Increase</button>

@code {
    private ApexGauge gauge;
    private decimal gaugePercentage = 50;

    private async Task IncreasePercentage()
    {
        gaugePercentage += 10;
        await gauge.UpdateValueAsync(animate: true);
    }
}
```

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

### Register ApexCharts with Global Options

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

Configure global options for all ApexCharts instances during service registration. This allows setting default themes, chart IDs, and debug modes.

```csharp
services.AddApexCharts(config =>
{
    config.GlobalOptions = new ApexChartBaseOptions
    {
        Debug = true,
        Theme = new Theme 
        {
            Mode = "light",
            Palette = PaletteType.Palette6 
        },
        Chart = new Chart
        {
            Id = "main-chart",
            Toolbar = new Toolbar 
            {
                Enabled = true 
            }
        }
    };
});
```

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

### Zoom Chart X Axis Async (Values)

Source: https://github.com/apexcharts/blazor-apexcharts/blob/master/_autodocs/api-reference/apexchart.md

Manually zooms into the chart along the X-axis using specific start and end values. Use this for precise control over the visible range of the X-axis.

```csharp
await Chart.ZoomXAsync(1000, 2000);
```

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

### Chart Rendering and Updating Methods

Source: https://github.com/apexcharts/blazor-apexcharts/blob/master/_autodocs/DOCUMENTATION_SUMMARY.txt

Methods for initial rendering and dynamic updates of chart data and options.

```APIDOC
## Chart Rendering and Updating

### Description
Methods to render a chart initially and update its options or series data dynamically.

### Methods
- `RenderAsync()`: Renders the chart with the current configuration.
- `UpdateOptionsAsync(options)`: Updates the chart's options.
- `UpdateSeriesAsync(series)`: Updates the chart's series data.
- `AppendDataAsync(data)`: Appends new data to the existing series.
- `AppendSeriesAsync(series)`: Appends new series to the chart.
```

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

### Display a Chart in Blazor

Source: https://github.com/apexcharts/blazor-apexcharts/blob/master/_autodocs/index.md

Use the RenderAsync method to display a chart. Ensure the chart object is properly initialized.

```csharp
// See: api-reference/apexchart.md - RenderAsync()
await chart.RenderAsync();
```

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

### Gauge with Custom Options

Source: https://github.com/apexcharts/blazor-apexcharts/blob/master/_autodocs/api-reference/apexgauge.md

Shows how to customize the ApexGauge using the `Options` parameter for advanced configurations.

```APIDOC
## Gauge with Custom Options

```razor
<ApexGauge Title="CPU Usage"
           Percentage="@cpuUsage"
           Label="CPU"
           Options="@gaugeOptions" />

@code {
    private decimal cpuUsage = 65;
    private ApexChartOptions<GaugeValue> gaugeOptions;

    protected override void OnInitialized()
    {
        gaugeOptions = new ApexChartOptions<GaugeValue>
        {
            Colors = new List<string> { "#FF5733" },
            Chart = new Chart
            {
                Type = ChartType.RadialBar,
                Height = 300
            },
            PlotOptions = new PlotOptions
            {
                RadialBar = new PlotOptionsRadialBar
                {
                    Hollow = new RadialBarHollow { Size = "70%" },
                    Track = new RadialBarTrack
                    {
                        Background = "#e0e0e0",
                        StrokeWidth = "97%"
                    },
                    DataLabels = new List<RadialBarDataLabels>
                    {
                        new RadialBarDataLabels
                        {
                            Name = "Percentage",
                            Value = new RadialBarDataLabelValue { Show = true }
                        }
                    }
                }
            }
        };
    }
}
```
```

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

### Blazor ApexCharts File Structure

Source: https://github.com/apexcharts/blazor-apexcharts/blob/master/_autodocs/index.md

Overview of the directory and file structure for the Blazor ApexCharts project. This helps in understanding the organization of components, models, services, and extensions.

```tree
src/Blazor-ApexCharts/
├── ApexChart.razor.cs              # Main chart component
├── ApexGauge.razor.cs              # Gauge component
├── ApexChartTooltip.razor.cs       # Tooltip component
├── Series/
│   ├── IApexSeries.cs              # Series interface
│   ├── ApexBaseSeries.cs           # Series base class
│   ├── ApexPointSeries.cs          # Standard series
│   ├── ApexBubbleSeries.cs         # Bubble series
│   ├── ApexRangeSeries.cs          # Range series
│   ├── ApexRangeAreaSeries.cs      # Range area series
│   ├── ApexCandleSeries.cs         # Candlestick series
│   └── ApexBoxPlotSeries.cs        # Box plot series
├── Models/
│   ├── ApexChartOptions.cs         # Options classes
│   ├── Series.cs                   # Series class
│   ├── DataPoints/                 # Data point types
│   └── MultiType/                  # Multi-value types
├── ChartService/
│   ├── IApexChartService.cs        # Service interface
│   ├── ApexChartService.cs         # Service implementation
│   └── LocaleResource.cs           # Locale resources
├── Extensions/
│   ├── ApexChartsExtensions.cs     # DI extensions
│   └── GeneralExtensions.cs        # Utility extensions
└── Internal/
    ├── JSHandler.cs                # JavaScript interop
    ├── JSLoader.cs                 # Module loader
    ├── ChartSerializer.cs          # JSON serialization
    └── Converters/                 # Custom converters
```

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

### Set Locale and Force Re-render in ApexCharts Blazor

Source: https://github.com/apexcharts/blazor-apexcharts/blob/master/_autodocs/errors-troubleshooting.md

When setting a new locale, ensure the locale code is valid and present in the `LocaleResources`. Crucially, set `reRenderCharts` to `true` to force the chart to update with the new locale. This example verifies locale availability and applies the 'es' locale.

```csharp
// Verify locale exists
var available = ChartService.LocaleResources.Select(x => x.Code).ToList();

// Use correct code
var locale = ChartService.LocaleResources.FirstOrDefault(x => x.Code == "es");

// Force re-render
await ChartService.SetLocaleAsync(locale, reRenderCharts: true);
```

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

### Configure Responsive Options in ApexCharts Blazor

Source: https://github.com/apexcharts/blazor-apexcharts/blob/master/_autodocs/errors-troubleshooting.md

Define responsive breakpoints for ApexCharts by providing a list of `Responsive` objects. Each object specifies a `Breakpoint` (in pixels) and `Options` that will override the defaults when the screen width is less than the breakpoint.

```csharp
options.Responsive = new List<Responsive<MyData>>
{
    new Responsive<MyData>
    {
        Breakpoint = 768,  // Width in pixels where breakpoint applies
        Options = new ApexChartOptions<MyData>
        {
            // These options override defaults when screen < 768px
            Chart = new Chart { Height = 300 },
            Legend = new Legend { Position = "bottom" }
        }
    }
};
```

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

### Configure Grid Options in Blazor

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

Set grid properties like border color, padding, and line widths. Ensure Enabled is true to apply these settings.

```csharp
new Grid
{
    Enabled = true,
    BorderColor = new GridBorder { Color = "#e0e0e0" },
    Padding = new Padding { Top = 0, Right = 10, Bottom = 0, Left = 60 },
    StrokeDashArray = 0,
    XaxisLinesWidth = 1,
    YaxisLinesWidth = 1
}
```

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

### Import Blazor-ApexCharts Namespace

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

Add the Blazor-ApexCharts namespace to your _Imports.razor file to make chart components available.

```razor
@using ApexCharts
```

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

### Accessing Charts via Service

Source: https://github.com/apexcharts/blazor-apexcharts/blob/master/_autodocs/api-reference/extensions-utilities.md

Shows how to access the collection of charts managed by the IApexChartService. This is useful for iterating through and inspecting existing charts.

```csharp
@code {
    private void LogAllCharts()
    {
        foreach (var chart in ChartService.Charts)
        {
            Console.WriteLine($"Chart ID: {chart.ChartId}");
        }
    }
}
```

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

### Add ApexChartService for MAUI

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

Register the ApexChartService specifically for .NET MAUI projects using the AddApexChartsMaui extension method.

```csharp
services.AddApexChartsMaui();
```

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

### Accessing All Charts via Service

Source: https://github.com/apexcharts/blazor-apexcharts/blob/master/_autodocs/api-reference/apexchart-service.md

Shows how to access a collection of all registered charts managed by the ApexCharts service for performing operations on them.

```csharp
void UpdateAllCharts()
{
    foreach (var chart in ChartService.Charts)
    {
        // Perform operations on each chart
    }
}
```

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

### Show Method

Source: https://github.com/apexcharts/blazor-apexcharts/blob/master/_autodocs/api-reference/apex-series.md

Shows a hidden series.

```APIDOC
## Show

### Description
Shows a hidden series.

### Returns
Task
```

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

### Register ApexCharts for MAUI with Global Options

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

Configure global options for ApexCharts when using it in a MAUI application. This allows setting default configurations for all charts within the MAUI app.

```csharp
services.AddApexChartsMaui(config =>
{
    config.GlobalOptions = new ApexChartBaseOptions { /* ... */ };
});
```

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

### Markers Class Configuration

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

Configures data point markers for charts. This includes settings for enabling markers, their size, shape, offset, and colors.

```csharp
public class Markers
{
    public bool? Enabled { get; set; }
    public object Size { get; set; }
    public MarkerShape? Shape { get; set; }
    public int? OffsetX { get; set; }
    public int? OffsetY { get; set; }
    public List<string> Colors { get; set; }
    public int? StrokeWidth { get; set; }
}
```

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

### Multiple ApexGauges Display

Source: https://github.com/apexcharts/blazor-apexcharts/blob/master/_autodocs/api-reference/apexgauge.md

Illustrates how to render multiple ApexGauge components within a container to display different metrics simultaneously. Requires a data structure to hold the metric values.

```razor
<div class="gauge-grid">
    <ApexGauge Title="CPU"
               Percentage="@metrics.CpuUsage"
               Label="CPU" />
    
    <ApexGauge Title="Memory"
               Percentage="@metrics.MemoryUsage"
               Label="RAM" />
    
    <ApexGauge Title="Disk"
               Percentage="@metrics.DiskUsage"
               Label="SSD" />
</div>

@code {
    private class SystemMetrics
    {
        public decimal CpuUsage { get; set; }
        public decimal MemoryUsage { get; set; }
        public decimal DiskUsage { get; set; }
    }

    private SystemMetrics metrics;

    protected override void OnInitialized()
    {
        metrics = new SystemMetrics
        {
            CpuUsage = 45,
            MemoryUsage = 62,
            DiskUsage = 78
        };
    }
}
```

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

### Accessing All Charts

Source: https://github.com/apexcharts/blazor-apexcharts/blob/master/_autodocs/api-reference/apexchart-service.md

Demonstrates how to access and iterate over all registered charts managed by the `IApexChartService`.

```APIDOC
## Accessing All Charts

```csharp
void UpdateAllCharts()
{
    foreach (var chart in ChartService.Charts)
    {
        // Perform operations on each chart
    }
}
```
```

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

### Basic ApexGauge Usage

Source: https://github.com/apexcharts/blazor-apexcharts/blob/master/_autodocs/api-reference/apexgauge.md

Renders a simple gauge with a title, percentage value, and a label. Requires a decimal variable for the percentage.

```razor
<ApexGauge Title="Performance"
           Percentage="@performanceScore"
           Label="Score" />

@code {
    private decimal performanceScore = 75;
}
```

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

### Theme Class

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

Configures the visual theme for ApexCharts, including mode, primary color, and palettes.

```APIDOC
## Theme Class

Configures the chart theme.

```csharp
public class Theme
{
    public string Mode { get; set; }
    public string PrimaryColor { get; set; }
    public PaletteType? Palette { get; set; }
    public Monochrome Monochrome { get; set; }
}
```

### Properties

| Property | Type | Default | Description |
|----------|------|---------|-------------|
| Mode | string | "light" | "light" or "dark" |
| PrimaryColor | string | — | Primary theme color |
| Palette | PaletteType? | — | Predefined color palette |
| Monochrome | Monochrome | — | Monochrome theme settings |
```

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

### Injecting and Using IApexChartService

Source: https://github.com/apexcharts/blazor-apexcharts/blob/master/_autodocs/api-reference/apexchart-service.md

Demonstrates how to inject the IApexChartService into a Blazor component and access its methods, such as re-rendering charts.

```csharp
@inject IApexChartService ChartService

@code {
    protected override async Task OnInitializedAsync()
    {
        // Access service methods here
        await ChartService.ReRenderChartsAsync();
    }
}
```

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

### SetGlobalOptionsAsync (Overload 2)

Source: https://github.com/apexcharts/blazor-apexcharts/blob/master/_autodocs/api-reference/apexchart-service.md

Applies the currently configured global options and optionally re-renders all charts.

```APIDOC
## SetGlobalOptionsAsync (Overload 2)

### Description
Applies current global options and optionally re-renders all charts.

### Method Signature
```csharp
public Task SetGlobalOptionsAsync(bool reRenderCharts)
```

### Parameters
#### Path Parameters
- **reRenderCharts** (bool) - Required - Whether to re-render all charts

### Returns
- Task

### Remarks
Uses the GlobalOptions property that was set during service configuration.

### Example
```csharp
await chartService.SetGlobalOptionsAsync(reRenderCharts: true);
```
```

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

### Add ApexChartService with Global Options

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

Register the ApexChartService with custom global options, such as debugging and theme settings.

```csharp
services.AddApexCharts(e =>
            {
                e.GlobalOptions = new ApexChartBaseOptions
                {
                    Debug = true,
                    Theme = new Theme { Palette = PaletteType.Palette6 }
                };
            });
```

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

### Injecting the Service

Source: https://github.com/apexcharts/blazor-apexcharts/blob/master/_autodocs/api-reference/apexchart-service.md

Shows how to inject the `IApexChartService` into a Blazor component to access its methods.

```APIDOC
## Injecting the Service

```csharp
@inject IApexChartService ChartService

@code {
    protected override async Task OnInitializedAsync()
    {
        // Access service methods here
        await ChartService.ReRenderChartsAsync();
    }
}
```
```

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

### Apply Current Global Options and Re-render

Source: https://github.com/apexcharts/blazor-apexcharts/blob/master/_autodocs/api-reference/apexchart-service.md

Applies current global options and optionally re-renders all charts. This overload uses the GlobalOptions property set during service configuration.

```csharp
await chartService.SetGlobalOptionsAsync(reRenderCharts: true);
```

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

### Markers Class

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

Configures data point markers. You can enable markers, set their size, shape, offsets, colors, and stroke width.

```APIDOC
## Markers Class

Configures data point markers.

```csharp
public class Markers
{
    public bool? Enabled { get; set; }
    public object Size { get; set; }
    public MarkerShape? Shape { get; set; }
    public int? OffsetX { get; set; }
    public int? OffsetY { get; set; }
    public List<string> Colors { get; set; }
    public int? StrokeWidth { get; set; }
}
```
```

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

### Set Gauge Size and Dimensions

Source: https://github.com/apexcharts/blazor-apexcharts/blob/master/_autodocs/api-reference/apexgauge.md

Configure the chart's height and width. Ensure the chart type is set to RadialBar.

```csharp
gaugeOptions.Chart = new Chart
{
    Type = ChartType.RadialBar,
    Height = 350,
    Width = "100%"
};
```