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.ApexCharts

In your Program.cs:

builder.Services.AddUI(options => {
    options.AddApexCharts();
});

📈 Usage Example

ApexCharts

new ApexChart<MyData>
{
    Options = new ApexChartOptions
    {
        Chart = new Chart { Type = ChartType.Bar },
        Series = new List<Series>
        {
            new Series { Name = "Sales", Data = dataList }
        }
    }
}

Chart.js

new ChartJs<MyData>
{
    Configuration = new ChartJsConfig
    {
        Type = "bar",
        Data = new ChartJsData { ... }
    }
}

🏗️ Architecture

The chart system is designed for Reactive C# updates:

• Strongly Typed: Configuration and data use C# classes that mirror the JS API.
• Unified Scripts: CodeBlockScripts handles the asset loading for chart libraries.
• Zero Configuration: Components automatically inject required scripts/styles via the Asset Provider mechanism.

🎨 Customization

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