Add JavaScript Charts and JavaScript Graphs to your application in 60 seconds.
Your First JavaScript Chart
Add AG Charts to your application in these steps:
1. Provide a Container
Load the AG Charts library and create a blank container div:
<!doctype html>
<html lang="en">
<head>
<title>AG Charts Quick Start</title>
<!-- JavaScript Charts Core Library -->
<script src="https://cdn.jsdelivr.net/npm/ag-charts-community/dist/umd/ag-charts-community.js"></script>
</head>
<body>
<!-- Container for Chart -->
<div id="myChart"></div>
<!-- Charts configuration file -->
<script src="index.js"></script>
</body>
</html>
2. Instantiate the JavaScript Chart
Create the Chart inside of your container div using create.
// Chart Options
const options = {};
// Create Chart
const chart = agCharts.AgCharts.create(options);
3. Define Chart Data and Series
// 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' }],
};
4. Running the JavaScript Chart
Below is a live example of the application running. Click </> Code to see the code.
To live-edit the code, open the example in CodeSandbox or Plunker using the buttons to the lower-right.
Next Steps
- Read our Introductory Tutorial.