# Your first chart
You'll need an [authorized copy of the runtime](https://docs.lumencharts.com/charting-library/getting-started/installation) 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 container
Give the chart container a real height. `autosize` makes the chart fill its container, but it can't give an empty container a height.
```html
```
## Mount the widget
```js
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();
```
## TypeScript
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.
```ts
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 works
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](https://docs.lumencharts.com/charting-library/reference/troubleshooting) for more help.
[Interactive chart example](https://docs.lumencharts.com/charting-library/getting-started/quickstart) — runs in a browser with synthetic data.
[Connect real data →](https://docs.lumencharts.com/charting-library/datafeed)
---
Documentation page: https://docs.lumencharts.com/charting-library/getting-started/quickstart