---
title: "Quick Start"
framework: javascript
version: "14.1.0"
---
# Quick Start
AG Charts is a high-performance, canvas-based JavaScript charting library for building JavaScript Charts and JavaScript Graphs with an intuitive API, a wide-range of series types and a rich feature set. Available in Community and Enterprise editions. Visit [Community vs. Enterprise](https://www.ag-grid.com/charts/javascript/community-vs-enterprise/) to learn more.
## Create a JavaScript Chart
Add JavaScript Charts to your application in 60 seconds:
### Provide a Container
Load the AG Charts library and create a blank container div:
```html
AG Charts Quick Start
```
> **Note**
>
> If you're using TypeScript you need to import and register the modules you want to use. See the [NPM Installation](https://www.ag-grid.com/charts/javascript/installation/#npm-installation) docs for more information.
### Instantiate the JavaScript Chart
Create the Chart inside of your container div using `create`.
```js
// Chart Options
const options = {};
// Create Chart
const chart = agCharts.AgCharts.create(options);
```
### Define Chart Data and Series
All configuration is done via the [`options`](https://www.ag-grid.com/charts/options/) object. At a minimum, you need to provide the `container`, `data` and `series` properties:
```js
// Chart Options
const options = {
// Container: HTML Element to hold the chart
container: document.getElementById('myChart'),
// Data: Data to be displayed in the chart
data: [
{ month: 'Jan', avgTemp: 2.3, iceCreamSales: 162000 },
{ month: 'Mar', avgTemp: 6.3, iceCreamSales: 302000 },
{ month: 'May', avgTemp: 16.2, iceCreamSales: 800000 },
{ month: 'Jul', avgTemp: 22.8, iceCreamSales: 1254000 },
{ month: 'Sep', avgTemp: 14.5, iceCreamSales: 950000 },
{ month: 'Nov', avgTemp: 8.9, iceCreamSales: 200000 },
],
// Series: Defines which chart type and data to use
series: [{ type: 'bar', xKey: 'month', yKey: 'iceCreamSales' }],
};
```
### Running the JavaScript Chart
Below is a live example of the application running. Click ` Code` to see the code.
#### Basic Chart Example
```ts
import {
AgBarSeriesOptions,
AgChartOptions,
AgCharts,
AllCommunityModule,
ModuleRegistry,
} from "ag-charts-community";
interface IData {
// Chart Data Interface
month:
| "Jan"
| "Feb"
| "Mar"
| "Apr"
| "May"
| "Jun"
| "Jul"
| "Aug"
| "Sep"
| "Oct"
| "Nov"
| "Dec";
avgTemp: number;
iceCreamSales: number;
}
ModuleRegistry.registerModules([AllCommunityModule]);
const options: AgChartOptions = {
// Data: Data to be displayed in the chart
data: [
{ month: "Jan", avgTemp: 2.3, iceCreamSales: 162000 },
{ month: "Mar", avgTemp: 6.3, iceCreamSales: 302000 },
{ month: "May", avgTemp: 16.2, iceCreamSales: 800000 },
{ month: "Jul", avgTemp: 22.8, iceCreamSales: 1254000 },
{ month: "Sep", avgTemp: 14.5, iceCreamSales: 950000 },
{ month: "Nov", avgTemp: 8.9, iceCreamSales: 200000 },
] as IData[],
// Series: Defines which chart type and data to use
series: [
{ type: "bar", xKey: "month", yKey: "iceCreamSales" } as AgBarSeriesOptions,
],
};
options.container = document.getElementById("myChart");
const chart = AgCharts.create(options);
```
[Live example: Basic Chart Example](https://www.ag-grid.com/charts/typescript/quick-start/examples/basic-example)
> **Note**
>
> To live-edit the code, open the example in CodeSandbox or Plunker using the buttons to the lower-right.
## Next Steps
Now that you have a basic JavaScript Chart running, choose one of the following options to continue your learning journey:
- [Key Features](https://www.ag-grid.com/charts/javascript/key-features/) — Browse an overview of our commonly used features
- [Tutorials](https://www.ag-grid.com/charts/javascript/create-a-basic-chart/) — Get started with our step-by-step tutorials
- [Community vs. Enterprise](https://www.ag-grid.com/charts/javascript/community-vs-enterprise/) — Understand the differences between each version