eQuantic.UI Documentation

Analytics

Charts & Visualization

Visualize complex data with ease using native integrations for Chart.js and ApexCharts, fully controlled by your C# code.

Supported Libraries

Chart.js

HTML5 Canvas

The ideal choice for fast and lightweight dashboards. Uses HTML5 Canvas element to render high-performance charts, easily handling large datasets.

High real-time performance
Smaller bundle footprint

ApexCharts

Modern SVG

Focused on rich and interactive visualizations. Based on SVG, it offers smooth animations, interactive zoom, and native export to multiple formats.

Advanced interactivity
Native PNG/SVG export

Registration

builder.Services.AddUI(options =>
{
    options.UseChartJs()    // Canvas rendering
           .UseApexCharts(); // SVG rendering
});

Typed Data Binding

Use anonymous functions or delegates to directly map your domain models to chart data. The compiler generates all necessary serialization automatically.

public class SalesChart : StatelessComponent
{
    private readonly List<Sale> _data;
    
    public SalesChart(List<Sale> data) => _data = data;

    public override HtmlNode Build() =>
        new ChartJs("sales-chart")
            .WithType(ChartType.Bar)
            .WithData(_data, x => x.Date, x => x.Amount)
            .WithResponsive(true);
}

Performance Tip

For dashboards with multiple charts, consider using Chart.js for most visualizations and reserve ApexCharts for cases that require advanced interactivity (zoom, export).