Chart

Elemento de gráfico (bar, line, pie)

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

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