Your first chart

You'll need an authorized copy of the runtime and a datafeed. Just want to see it work? The interactive example at the bottom of this page uses sample data and needs no install.

Create a containerCopy Anchor Link

Give the chart container a real height. autosize makes the chart fill its container, but it can't give an empty container a height.

<div id="chart" style="width:100%;height:560px"></div>
<script src="./lumen_charting_library/lumen_charting_library.js"></script>

Mount the widgetCopy Anchor Link

import { createDatafeed } from './your-datafeed.js';

const feed = createDatafeed();
const widget = new LumenChartingLibrary.widget({
  container: 'chart',
  library_path: './lumen_charting_library/',
  datafeed: feed.datafeed,
  symbol: 'AAPL',
  interval: '1D',
  locale: 'en',
  timezone: 'Etc/UTC',
  autosize: true,
  theme: 'light',
});

widget.onChartReady(() => {
  console.log(widget.activeChart().symbol());
});

// When the view is destroyed:
// widget.remove();
// feed.dispose();

TypeScriptCopy Anchor Link

Import types from the declaration files that ship next to your runtime. The script tag above loads the browser global. A type-only import gives you types but doesn't load the runtime.

import type { LumenChartingLibraryWidgetOptions, ResolutionString } from './lumen_charting_library/lumen_charting_library';
const options: LumenChartingLibraryWidgetOptions = {
  container: 'chart', library_path: './lumen_charting_library/',
  datafeed, symbol: 'AAPL', interval: '1D' as ResolutionString, locale: 'en',
};

Here datafeed is your own datafeed. The library doesn't come with a market data connection. In TypeScript, resolutions use the ResolutionString type. Decide which values you support and check them in your datafeed.

Check that it worksCopy Anchor Link

You should see candles and volume, a symbol toolbar and drawing controls. If the container stays blank, the usual causes are a missing runtime file, a parent with zero height, or a datafeed callback that never gets called. See troubleshooting for more help.

Connect real data →