Skip to main content
← Back to examples

Bar series

Series types

Price movement drawn as OHLC bars colored by direction.

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

Code​

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

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(BarSeries, {
    upColor: '#26a69a',
    downColor: '#ef5350',
});
series.setData(generateCandles());

chart.timeScale().fitContent();

// Sample data: a seeded random walk, so the chart looks the same on every load.
function generateCandles(count = 120) {
    let seed = 3;
    const random = () => (seed = (seed * 16807) % 2147483647) / 2147483647;
    const day = 24 * 60 * 60;
    let time = Date.UTC(2024, 0, 1) / 1000;
    let close = 100;
    const candles = [];
    for (let i = 0; i < count; i++) {
        const open = close;
        close = open + (random() - 0.5) * 6;
        const high = Math.max(open, close) + random() * 2.5;
        const low = Math.min(open, close) - random() * 2.5;
        candles.push({ time, open, high, low, close });
        time += day;
    }
    return candles;
}

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 bar series draws each period as a vertical line from the low to the high, with a tick for the open on the left and for the close on the right.

  1. addSeries with BarSeries adds the series. The options set the colors for rising and falling bars.
  2. setData gives it the data. Each item has a time, open, high, low, and close, the same as for candlesticks.
  3. fitContent fits all the data into view.

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

Tips​

  • openVisible: false hides the open tick, for a high-low-close chart.
  • thinBars: false draws thicker bars when they have room.

Resources​