Charts

Charts Ecosystem

eQuantic.UI offers high-performance, reactive chart components wrapping the most popular JavaScript visualization libraries.

📊 Available Chart Libraries

We provide wrappers for the two most dominant chart libraries in the web ecosystem:

1. Chart.js (eQuantic.UI.Charts.ChartJs)

• Type: HTML5 Canvas-based.
• Best for: Simple, clean, and lightweight charts.
• Support: Bar, Line, Pie, Doughnut, Radar, etc.

2. ApexCharts (eQuantic.UI.Charts.ApexCharts)

• Type: SVG-based.
• Best for: Highly interactive, modern, and complex visualizations.
• Support: Area, Bar, Line, Heatmap, Candlestick, etc.

🚀 Installation & Registration

dotnet add package eQuantic.UI.Charts.ChartJs
dotnet add package eQuantic.UI.Charts.ApexCharts

In your Program.cs:

// Register chart services
builder.Services.AddChartJs();
builder.Services.AddApexCharts();

builder.Services.AddUI(options =>
{
    options.ScanAssembly(typeof(Program).Assembly);
});

// ...

// Enable CDN endpoints (after app.Build())
app.UseChartJs();       // optional version: app.UseChartJs("4.4.1")
app.UseApexCharts();    // optional version: app.UseApexCharts("3.45.1")

📈 Usage Example

ApexCharts

new ApexChart<MyData>
{
    Options = new ApexOptions
    {
        Chart = new ChartConfig { Type = "bar" }
    },
    Series = new List<ApexSeries<MyData>>
    {
        new ApexSeries<MyData> { Name = "Sales", Data = dataList }
    }
}

Chart.js

new ChartJs<MyData>
{
    Type = "bar",
    Data = new ChartData<MyData> { ... },
    Options = new ChartJsOptions { ... }
}

🏗️ Architecture

The chart system is designed for Reactive C# updates:

• Strongly Typed: Configuration and data use C# classes that mirror the JS API.
• Asset Management: Chart libraries declare their CDN dependencies via the Asset System.
• Zero Configuration: Components automatically inject required scripts/styles — no manual <script> tags needed.
• Middleware Pattern: UseChartJs() / UseApexCharts() serve initialization scripts and CDN endpoints.

🎨 Customization

All chart components support full Tailwind CSS styling via ClassName and responsive containers.