Chart

Renderiza gráficos a partir dos dados de um data source. No PDF usa o renderer nativo; no HTML injeta Chart.js automaticamente.

JSON

{
  "type": "chart",
  "id": "sales_chart",
  "x": 30,
  "y": 10,
  "width": 400,
  "height": 250,
  "chartType": "bar",
  "dataSourceId": "sales",
  "categoryField": "month",
  "series": [
    { "name": "Receita", "valueField": "revenue", "color": "1976d2" },
    { "name": "Custos", "valueField": "costs", "color": "d32f2f" }
  ],
  "options": {
    "showLegend": true,
    "legendPosition": "bottom",
    "showGridLines": true,
    "stacked": false,
    "hasBorder": true,
    "borderColor": "cccccc",
    "borderWidth": 1.0
  }
}

Propriedades

Propriedade	Tipo	Padrão	Descrição
width	double	—	Largura em pontos
height	double	—	Altura em pontos
chartType	string	"bar"	"bar", "line" ou "pie"
dataSourceId	string	null	Data source dos dados
categoryField	string	—	Campo usado como eixo X / categorias
series	array	[]	Séries de dados a plotar
options	object	null	Opções visuais

ChartSeries

Propriedade	Tipo	Padrão	Descrição
name	string	—	Nome exibido na legenda
valueField	string	—	Campo numérico do registro
color	string	"000000"	Cor da série (hex). Se não definida ou "000000", usa a paleta padrão automaticamente

Paleta automática

Quando a cor da série é omitida (ou "000000"), o Sulfite usa uma paleta de 10 cores consistente em todos os formatos (PDF, HTML e Studio): indigo, sky, emerald, amber, red, violet, pink, teal, orange, slate.

ChartOptions

Propriedade	Tipo	Padrão	Descrição
showLegend	bool	true	Exibir legenda
legendPosition	string	"bottom"	"top", "bottom", "left", "right"
showGridLines	bool	true	Exibir grade
labelColor	string	"000000"	Cor dos rótulos (hex)
labelFontSize	double	10.0	Tamanho da fonte dos rótulos
animate	bool	true	Animação (só Studio/HTML)
stacked	bool	false	Barras empilhadas (true) ou agrupadas lado a lado (false). Só para chartType: "bar"
hasBorder	bool	false	Exibir borda ao redor do gráfico
borderColor	string	"000000"	Cor da borda (hex)
borderWidth	double	1.0	Espessura da borda em pontos
borderDashed	bool	false	Borda tracejada
borderDashGap	double	4.0	Espaço entre traços da borda

Tipos de gráfico

Bar

{ "chartType": "bar" }

Barras verticais. Cada série gera um grupo de barras por categoria.

Agrupado vs Empilhado

Por padrão, múltiplas séries são renderizadas lado a lado (agrupadas). Para empilhar as barras, defina stacked: true:

{
  "chartType": "bar",
  "options": { "stacked": true }
}

Modo	stacked	Comportamento
Agrupado	false (padrão)	Barras lado a lado para cada categoria
Empilhado	true	Barras empilhadas verticalmente

Line

{ "chartType": "line" }

Linhas conectando pontos. Cada série é uma linha.

Pie

{ "chartType": "pie" }

Gráfico de pizza. Usa a primeira série. Cada categoria vira uma fatia. As cores das fatias seguem a paleta padrão automaticamente, ignorando a cor da série.

Fatias com valor zero

Fatias com valor zero ou negativo são omitidas automaticamente. Um log de diagnóstico é emitido para facilitar depuração.

Borda do gráfico

Qualquer tipo de gráfico pode ter uma borda decorativa:

{
  "options": {
    "hasBorder": true,
    "borderColor": "cccccc",
    "borderWidth": 1.5,
    "borderDashed": true,
    "borderDashGap": 4.0
  }
}

A borda é renderizada consistentemente em PDF (via pw.Container), HTML (CSS border) e Studio (via CustomPainter).

Renderização por formato

Formato	Como renderiza
PDF	Renderizado nativamente com package:pdf. Barras agrupadas usam offset; empilhadas usam camadas cumulativas
HTML	Injetado como <canvas> com Chart.js 4 (CDN). Barras empilhadas via scales.stacked
Studio	Preview em tempo real com package:graphic. Agrupado via DodgeModifier, empilhado via StackModifier
CSV	Dados tabulares (não renderiza o gráfico visual)
Excel	Dados tabulares