START HERE
Getting Started
WRITE-ONCE
Write-Once Components
Declarative Surface
Photon Engine
Design System
Capabilities
Storage
Forms
Code Editor
Markdown
Mermaid
Email Rendering
ARCHITECTURE
Architecture Overview
Package Architecture
Components
Styling
Localization
Analytics & GTM
COMPILATION
Compiler
Compile-Time Evaluation
Supported C# Features
External Type Resolution
Build Flow
Diagnostics
RUNTIME
Runtime (TypeScript)
Performance
SERVER
Server Integration
Assets
BunPackage
Security
ECOSYSTEM
Image
Charts
Icons
Lottie
DEVELOPMENT
Visual Editor
Debug
Roadmap
PT-BR
Analytics-pt-BR
Architecture-pt-BR
Assets-pt-BR
BuildFlow-pt-BR
BunPackage-pt-BR
Capabilities-pt-BR
Charts-pt-BR
CodeEditor-pt-BR
Compiler-pt-BR
CompileTimeEvaluation-pt-BR
Components-pt-BR
Debug-pt-BR
DeclarativeSurface-pt-BR
DesignSystem-pt-BR
Diagnostics-pt-BR
EmailRealizer-pt-BR
ExternalTypeResolution-pt-BR
Forms-pt-BR
GettingStarted-pt-BR
Home-pt-BR
Icons-pt-BR
Image-pt-BR
Localization-pt-BR
Lottie-pt-BR
Markdown-pt-BR
Mermaid-pt-BR
PackageArchitecture-pt-BR
Performance-pt-BR
Photon-pt-BR
Roadmap-pt-BR
Runtime-pt-BR
Security-pt-BR
ServerIntegration-pt-BR
Storage-pt-BR
Styling-pt-BR
SupportedFeatures-pt-BR
VisualEditor-pt-BR
WriteOnceComponents-pt-BR
ACTIONS & INPUTS
Button
IconButton
TextInput
Select
Checkbox
Switch
RadioGroup
SegmentedControl
Slider
Stepper
SearchField
SURFACES & DISPLAY
Card
Badge
Chip
Avatar
Banner
ProgressBar
EmptyState
Divider
NAVIGATION
Tabs
AppBar
BottomNavigation
Breadcrumb
Pagination
PageIndicator
Menu
Drawer
OVERLAYS
Dialog
BottomSheet
Toast
Popover
Tooltip
LISTS & DATA
List
ListView
Table
Accordion
CodeBlock
TOUCH INTERACTION
PullToRefresh
SwipeableRow
DocsEcosystem
Charts EcosystemEdit this page
1 min read🌐 This page in: English · Português
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
1
2
dotnet add package eQuantic.UI.Charts.ChartJs
dotnet add package eQuantic.UI.Charts.ApexCharts
In your Program.cs:
1
2
3
4
5
6
7
8
9
10
11
builder.Services.AddUI(options =>
{
options.UseChartJs()
.UseApexCharts()
.ScanAssembly(typeof(Program).Assembly);
});
// ...
// Note: MapUI() automatically handles the necessary endpoint registrations.
app.MapUI();
📈 Usage Example
ApexCharts
1
2
3
4
5
6
7
8
9
10
11
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
1
2
3
4
5
6
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, with no manual <script> tags needed.
•
Middleware Pattern: UseChartJs() / UseApexCharts() serve initialization scripts and CDN endpoints.
🎨 Customization
All chart components accept extra classes via ClassName and live in responsive containers.