---
title: "SwiftUI Charts: mascaramento dinâmico em gráficos interativos"
description: "Como deixar o lado esquerdo do gráfico totalmente visível e o direito esmaecido ao selecionar um ponto."
canonical: "https://ronanrodrigo.dev/notes/swiftui-charts-mascaramento-dinamico"
markdown: "https://ronanrodrigo.dev/notes/swiftui-charts-mascaramento-dinamico.md"
last-updated: "2026-10-05"
---
## SwiftUI Charts: mascaramento dinâmico em gráficos interativos

O Swift Charts permite gráficos interativos estilo TradingView, onde tudo à esquerda do ponto selecionado continua totalmente visível e o lado direito fica esmaecido — sem reconstruir datasets, recalcular gráficos parciais ou desenhar shapes customizados.

- **Gráfico base**: `LinePlot` com interpolação `.catmullRom` e gradiente por temperatura, mais `AreaPlot` com os mesmos valores e interpolação para que as camadas se alinhem exatamente.
- **Seleção**: `.chartXSelection(value:)` rastreia a data selecionada, com `RuleMark` e anotação destacando o ponto mais próximo.
- **Limites**: `.onChange(of:)` restringe a data selecionada ao intervalo real dos dados e `.chartXScale` usa o mesmo domínio.
- **Mascaramento**: `.mask` com `RectanglePlot` aplicado à camada principal isola visualmente a região anterior à seleção.

[Acesse a fonte original](https://antongubarenko.substack.com/p/swiftui-charts-dynamic-masking)