Skip to main content
← Back to examples

Area series

Series types

A line with the area below it filled with a gradient.

Interactive example — scroll, zoom, and hover the chart.

Code​

View on GitHub
// Lightweight Charts™ Example: Area series
// https://tradingview.github.io/lightweight-charts/examples/series-types/area

const chartOptions = {
    layout: {
        textColor: 'black',
        background: { type: 'solid', color: 'white' },
    },
    grid: {
        vertLines: { color: '#D6DCDE' },
        horzLines: { color: '#D6DCDE' },
    },
};
/** @type {import('lightweight-charts').IChartApi} */
const chart = createChart(document.getElementById('container'), chartOptions);

const series = chart.addSeries(AreaSeries, {
    lineColor: '#2962FF',
    topColor: '#2962FF',
    bottomColor: 'rgba(41, 98, 255, 0.28)',
    lineWidth: 2,
});
series.setData(generateValues());

chart.timeScale().fitContent();

// Sample data: a seeded random walk, so the chart looks the same on every load.
function generateValues(count = 120) {
    let seed = 29;
    const random = () => (seed = (seed * 16807) % 2147483647) / 2147483647;
    const day = 24 * 60 * 60;
    let time = Date.UTC(2024, 0, 1) / 1000;
    let value = 100;
    const points = [];
    for (let i = 0; i < count; i++) {
        value += (random() - 0.48) * 4;
        points.push({ time, value });
        time += day;
    }
    return points;
}

The code expects the library’s exports, such as createChart, to be imported and a div with the id container on the page. Copy as HTML gives a page that runs on its own.

How it works​

An area series is a line with the space below it filled.

  1. addSeries with AreaSeries adds the series. lineColor and lineWidth set the line; the fill is a gradient from topColor to bottomColor.
  2. setData gives it the data. Each item has a time and a value.
  3. fitContent fits all the data into view.

generateValues only makes sample data. Replace it with your own.

Tips​

  • Set the same color with a lower opacity as both topColor and bottomColor for a flat fill instead of a gradient.
  • invertFilledArea: true fills the space above the line instead of below it.

Resources​