Skip to main content
← Back to examples

Custom price format

Price scales

Large values shown as short dollar amounts, such as $1.25B, on the price scale.

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

Code​

View on GitHub
// Lightweight Charts™ Example: Custom price format
// https://tradingview.github.io/lightweight-charts/examples/price-scales/custom-price-format

// Prices in US dollars, shortened: 1250000000 becomes $1.25B.
const currencyFormat = new Intl.NumberFormat('en-US', {
    style: 'currency',
    currency: 'USD',
    notation: 'compact',
    maximumFractionDigits: 2,
});

const chartOptions = {
    layout: {
        textColor: 'black',
        background: { type: 'solid', color: 'white' },
    },
    grid: {
        vertLines: { color: '#D6DCDE' },
        horzLines: { color: '#D6DCDE' },
    },
    localization: {
        priceFormatter: price => currencyFormat.format(price),
    },
};
/** @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 around 1.2 billion, so the chart looks the
// same on every load.
function generateValues(count = 120) {
    let seed = 17;
    const random = () => (seed = (seed * 16807) % 2147483647) / 2147483647;
    const day = 24 * 60 * 60;
    let time = Date.UTC(2024, 0, 1) / 1000;
    let value = 1.2e9;
    const points = [];
    for (let i = 0; i < count; i++) {
        value *= 1 + (random() - 0.48) * 0.03;
        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​

The chart turns each price into text with a function you give it. Here the function shortens large values to dollar amounts such as $1.25B.

  1. Intl.NumberFormat with notation: 'compact' does the formatting. It is created once and reused for every label.
  2. localization.priceFormatter gives the chart the function. The price scale labels, the crosshair label, and the last value label all use it.

These lines are highlighted in the code.

Tips​

  • To change only the number of decimals, set priceFormat on the series instead, with precision and minMove.
  • To format the prices of one series only, use priceFormat with type: 'custom' and a formatter function on that series.

Resources​