Skip to main content
← Back to examples

Line series

Series types

A single value per point joined by a line.

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

Code​

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

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(LineSeries, {
    color: '#2962FF',
    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 = 11;
    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​

A line series joins one value per point with a line.

  1. addSeries with LineSeries adds the series to the chart. The options set the line's color and width.
  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 lineType to draw steps or curves instead of straight segments, and lineStyle for a dashed or dotted line.
  • To update the last point or add a new one as data arrives, use update instead of calling setData again.

Resources​