Skip to main content
← Back to examples

Hidden time scale

Styling

A line chart without the time axis at the bottom.

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

Code​

View on GitHub
// Lightweight Charts™ Example: Hidden time scale
// https://tradingview.github.io/lightweight-charts/examples/styling/hidden-time-scale

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);

chart.applyOptions({
    timeScale: {
        visible: false,
    },
});

const lineSeries = chart.addSeries(LineSeries, { color: '#2962FF' });

const data = [
    { value: 0, time: 1642425322 },
    { value: 8, time: 1642511722 },
    { value: 10, time: 1642598122 },
    { value: 20, time: 1642684522 },
    { value: 3, time: 1642770922 },
    { value: 43, time: 1642857322 },
    { value: 41, time: 1642943722 },
    { value: 43, time: 1643030122 },
    { value: 56, time: 1643116522 },
    { value: 46, time: 1643202922 },
];

lineSeries.setData(data);

chart.timeScale().fitContent();

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 time scale is the axis with dates under the chart. Hiding it gives the series that space, which suits sparklines and charts stacked under each other.

Set visible: false in the time scale options. The example passes it to applyOptions; the call is highlighted in the code.

Tips​

  • The chart can still be scrolled and zoomed with the time scale hidden.
  • To hide the price scale as well, set rightPriceScale: { visible: false }.

Resources​