START HERE
Getting Started
WRITE-ONCE
Write-Once Components
Declarative Surface
Photon Engine
Design System
Capabilities
Storage
Forms
Code Editor
Markdown
Mermaid
ARCHITECTURE
Architecture Overview
Package Architecture
Components
Styling
Localization
Analytics & GTM
COMPILATION
Compiler
Compile-Time Evaluation
Supported C# Features
External Type Resolution
Build Flow
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
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
Docspt-BR
Ecossistema de gráficosEdit this page
1 min read🌐 Esta página em: English · Português
O eQuantic.UI oferece componentes de gráfico reativos e de alta performance, embrulhando as bibliotecas de visualização JavaScript mais populares.
📊 Bibliotecas de gráfico disponíveis
Fornecemos wrappers para as duas bibliotecas de gráfico mais dominantes do ecossistema web:
1. Chart.js (eQuantic.UI.Charts.ChartJs)
•
Tipo: baseada em Canvas HTML5.
•
Melhor para: gráficos simples, limpos e leves.
•
Suporte: Bar, Line, Pie, Doughnut, Radar, etc.
2. ApexCharts (eQuantic.UI.Charts.ApexCharts)
•
Tipo: baseada em SVG.
•
Melhor para: visualizações altamente interativas, modernas e complexas.
•
Suporte: Area, Bar, Line, Heatmap, Candlestick, etc.
🚀 Instalação e registro
1
2
dotnet add package eQuantic.UI.Charts.ChartJs
dotnet add package eQuantic.UI.Charts.ApexCharts
No seu Program.cs:
1
2
3
4
5
6
7
8
9
10
11
builder.Services.AddUI(options =>
{
options.UseChartJs()
.UseApexCharts()
.ScanAssembly(typeof(Program).Assembly);
});
// ...
// Nota: o MapUI() cuida automaticamente dos registros de endpoint necessários.
app.MapUI();
📈 Exemplo de uso
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 = "Vendas", Data = dataList }
}
}
Chart.js
1
2
3
4
5
6
new ChartJs<MyData>
{
Type = "bar",
Data = new ChartData<MyData> { ... },
Options = new ChartJsOptions { ... }
}
🏗️ Arquitetura
O sistema de gráficos foi desenhado para atualizações reativas em C#:
•
Fortemente tipado: configuração e dados usam classes C# que espelham a API JS.
•
Gestão de assets: as bibliotecas de gráfico declaram as dependências de CDN pelo sistema de assets.
•
Zero configuração: os componentes injetam sozinhos os scripts/estilos necessários, sem nenhuma tag <script> na mão.
•
Padrão de middleware: UseChartJs() / UseApexCharts() servem os scripts de inicialização e os endpoints de CDN.
🎨 Personalização
Todos os componentes de gráfico aceitam classes extras via ClassName e vivem em contêineres responsivos.