Skip to main content

Lightweight Charts

TradingView Lightweight Charts™ are one of the smallest and fastest financial HTML5 charts.

The Lightweight Charts™ library is the best choice for you if you want to display financial data as an interactive chart on your web page without affecting your web page loading speed and performance.

Docs​

Janela visível (visible range) ou Viewport do gráfico​

É a porção dos dados que está sendo exibida na tela horizontalmente — mesmo com 287 candles carregados, o gráfico mostra apenas um subconjunto (ex: os últimos 50 ou uma janela específica) para evitar sobrecarga visual e permitir navegação suave.

Como manipular isso (explicação teórica):​

  1. Definir a janela inicial visível:

    • Use chart.timeScale().setVisibleRange({ from: timestampInicio, to: timestampFim }) para fixar uma janela específica (ex: mostrar apenas os últimos 30 minutos). Os timestamps devem estar em segundos (UTCTimestamp).

  2. Ajustar para mostrar todos os dados:

    • chart.timeScale().fitContent() — expande a janela para caber todos os candles carregados, como você já tem no código.

  3. Rolagem (panning) programática:

    • chart.timeScale().scrollToPosition(posicao) — move a janela para uma posição específica no eixo X (ex: para o meio dos dados).
    • O usuário pode arrastar com o mouse para rolar manualmente.

  4. Zoom:

    • chart.timeScale().zoomToPosition(posicao, nivelZoom) — amplia/reduz em torno de uma posição (nível de zoom é um número, ex: 1 para normal, 2 para 2x zoom).
    • O mouse wheel permite zoom interativo; desabilite com handleScale: false nas opções se quiser controle total.

  5. Opções de configuração:

    • No chartOptions, adicione timeScale: { fixLeftEdge: true } para fixar o lado esquerdo e rolar apenas à direita.
    • timeScale: { lockVisibleTimeRangeOnResize: true } para manter a janela ao redimensionar.

Se os 287 candles estão aparecendo "comprimidos" ou a janela é muito pequena, pode ser que fitContent() não esteja sendo chamado após carregar os dados, ou que o zoom esteja alto. Para testar, você pode chamar fitContent() manualmente no console do navegador após o carregamento. Quer que eu implemente alguma dessas manipulações no código?

Vertical Line​

By setting the scaleMargins to zero, the histogram bars will span the full vertical extent of the chart pane. When rendered with a color (and optionally some transparency), these bars will visually represent vertical lines at the specified time values. You can customize the appearance of these "lines" by adjusting the color and other options of the HistogramSeries.

// Add a new HistogramSeries to your chart,
// similar to how you would add a LineSeries or CandlestickSeries
const histogramSeries = chart.addHistogramSeries({
    // Optional: Customize color, opacity, etc.
    color: 'rgba(0, 0, 255, 0.5)', // Example: semi-transparent blue
});

// Prepare Data for Vertical Lines
const verticalLineData = [
    { time: '2023-01-01', value: 1 }, // Example: Vertical line at Jan 1st, 2023
    { time: '2023-02-15', value: 1 }, // Example: Vertical line at Feb 15th, 2023
];

// Set scaleMargins to make the "bars" of the HistogramSeries appear as full-height vertical lines
chart.applyOptions({
    priceScale: {
        // Apply options to the default right price scale or a custom one
        // if you're using multiple price scales.
        scaleMargins: {
            top: 0,
            bottom: 0,
        },
    },
});

// Set the Data
histogramSeries.setData(verticalLineData);