COMO USAR O FINANCIAL CHART ============================

1) COMECE EM 3 CAMPOS
Arraste o elemento Financial Chart para a página e preencha:

• Tipo de gráfico: escolha entre Barras, Barras Empilhadas, Linhas, Área, Área Empilhada ou Misto (Barras + Linhas).

• Rótulos dos grupos (eixo X): os períodos ou categorias, separados por vírgula.
 Exemplo: Seg, Ter, Qua, Qui, Sex
 Pode ser qualquer conjunto: Jan, Fev, Mar — ou Loja A, Loja B.

• Séries de dados: cada série no formato Nome: valores, separadas por ponto e vírgula.
 Exemplo: Receita: 1200, 1850, 1400, 2100, 1950; Despesa: 800, 950, 700, 1100, 900
 Regras: a ordem dos valores segue a ordem dos rótulos; decimais com PONTO (1234.56),
 pois a vírgula separa os valores; valores faltantes viram 0.

Só isso já renderiza. Os campos abaixo são refinamento.

2) MODO MISTO (BARRAS + LINHAS)
No campo "Tipos por série", diga o tipo de cada série na mesma ordem:
 barra, barra, linha
Se deixar vazio, a última série vira linha automaticamente (ex: Lucro em linha sobre as barras de Receita e Despesa).

3) FORMATO DOS VALORES (seção Valores e formato)
• Prefixo do valor: ex "R$ " (com espaço) — aparece nos valores, tooltips e eixo.
• Sufixo do valor: ex " un" ou "%".
• Casas decimais: 0 a 3.
• Formato brasileiro: ligado, exibe 1.234,56; desligado, exibe 1234.56.
 (Vale só para EXIBIÇÃO — a entrada de dados sempre usa ponto decimal.)
• Mostrar valores: exibe o número sobre cada barra/ponto.
O eixo Y compacta sozinho: R$ 2.5k, R$ 1.2M.

4) VISUAL (seções Estilo, Legenda, Fontes e cores)
• Cores das séries: uma cor por série, na ordem, ex: #6366f1, #22c55e, #ef4444.
 Vazio = paleta profissional padrão (10 cores).
• Preenchimento degradê, arredondamento e largura das barras, espessura e curva
 da linha (suave / reta / degraus), orientação horizontal para rankings.
• Legenda: ligar/desligar e posição (top, bottom, left, right). Aparece com 2+ séries;
 clicar num item da legenda oculta/exibe a série.
• Fontes e cores de fundo/grade nas seções correspondentes.

5) ANIMAÇÃO E DARK MODE
• Animação: entrada gradual das séries e transição ao atualizar dados.
 Duração em ms (padrão 900) e tipo (easeinout, easeout, easein, linear).
• Dark Mode "Automático?": ligado, o gráfico adota tema escuro quando o
 dispositivo do usuário está em dark mode (fundo, fontes e grade se ajustam).

6) DADOS DINÂMICOS DO SEU BANCO
Monte o campo "Séries de dados" com expressões do Bubble:
 "Receita: " Search for Vendas:each item's Valor:join with ", "
Para mais séries, concatene com "; " entre elas:
 "Receita: " [busca 1] "; Despesa: " [busca 2]
E nos rótulos:
 Search for Vendas:each item's Data:formatted as 15/07:join with ", "
IMPORTANTE: use a mesma ordenação (ex: por data) em todas as buscas,
para cada valor cair no período certo.

7) CLIQUE E DRILL-DOWN
Evento de workflow: "um ponto é clicado".
Estados expostos do elemento:
• clicked_label  — o rótulo clicado (ex: Seg)
• clicked_series — a série clicada (ex: Receita)
• clicked_value  — o valor clicado (ex: 1200)
• status         — situação do gráfico (útil para depurar; "Sem dados" indica
                  rótulos/séries vazios ou em formato errado)
Exemplo: no evento, filtre um Repeating Group por clicked_label para mostrar
o detalhe do dia clicado.

8) DICAS
• Trocar o "Tipo de gráfico" (inclusive por Conditional) redesenha na hora, animado.
• O gráfico ocupa 100% do elemento — controle o tamanho pelo próprio elemento.
• Não é preciso adicionar nada nos headers: a biblioteca é carregada automaticamente.