AG Charts Quick Start

# Types Charting Library

🌐 Website • 📖 Documentation • 📊 Gallery

Dependents (via libraries.io?style=for-the-badge)

AG Charts is a fully-featured and highly customizable canvas-based Types Charting library. It delivers outstanding performance and has no third-party dependencies.

Preview of AG Charts Types Charting Examples

## 📖 Overview

Table of Contents

- [📖 Overview](#-overview) - [Chart Types](#chart-types) - [Features](#features) - [Financial Charts](#financial-charts) - [Map Charts](#map-charts) - [⚡️ Quick Start](#️-quick-start) - [Installation](#installation) - [Setup](#setup) - [🤝 Support](#-support) - [Enterprise Support](#enterprise-support) - [Bug Reports](#bug-reports) - [Questions](#questions) - [Contributing](#contributing) - [⚠️ License](#️-license)

AG Charts is available in two versions: Community & Enterprise. - `ag-charts-community` is free, available under the MIT license, and comes with core series types, such as [Pie](https://www.ag-grid.com/charts/javascript/pie-series/?utm_source=ag-charts-readme&utm_medium=repository&utm_campaign=github), [Area](https://www.ag-grid.com/charts/javascript/area-series/?utm_source=ag-charts-readme&utm_medium=repository&utm_campaign=github), [Bar](https://www.ag-grid.com/charts/javascript/bar-series/?utm_source=ag-charts-readme&utm_medium=repository&utm_campaign=github), [Scatter](https://www.ag-grid.com/charts/javascript/scatter-series/?utm_source=ag-charts-readme&utm_medium=repository&utm_campaign=github) and [Bubble](https://www.ag-grid.com/charts/javascript/bubble-series/?utm_source=ag-charts-readme&utm_medium=repository&utm_campaign=github) in addition to all of the key features expected from a Types charting library, including [Accessibility](https://www.ag-grid.com/charts/javascript/accessibility/?utm_source=ag-charts-readme&utm_medium=repository&utm_campaign=github), [Tooltips](https://www.ag-grid.com/charts/javascript/tooltips/?utm_source=ag-charts-readme&utm_medium=repository&utm_campaign=github), [Themes](https://www.ag-grid.com/charts/javascript/themes/?utm_source=ag-charts-readme&utm_medium=repository&utm_campaign=github), [Markers](https://www.ag-grid.com/charts/javascript/markers/?utm_source=ag-charts-readme&utm_medium=repository&utm_campaign=github), [Legends](https://www.ag-grid.com/charts/javascript/legend/?utm_source=ag-charts-readme&utm_medium=repository&utm_campaign=github), [Axis Types](https://www.ag-grid.com/charts/javascript/axes-types/?utm_source=ag-charts-readme&utm_medium=repository&utm_campaign=github) and [Secondary Axes](https://www.ag-grid.com/charts/javascript/axes-secondary/?utm_source=ag-charts-readme&utm_medium=repository&utm_campaign=github). - `ag-charts-enterprise` is available under a commercial license and comes with additional series types, such as [Maps](https://www.ag-grid.com/charts/javascript/maps/?utm_source=ag-charts-readme&utm_medium=repository&utm_campaign=github), [Sankey](https://www.ag-grid.com/charts/javascript/sankey-series/?utm_source=ag-charts-readme&utm_medium=repository&utm_campaign=github), [Radar](https://www.ag-grid.com/charts/javascript/radar-area-series/?utm_source=ag-charts-readme&utm_medium=repository&utm_campaign=github), and [Waterfall](https://www.ag-grid.com/charts/javascript/waterfall-series/?utm_source=ag-charts-readme&utm_medium=repository&utm_campaign=github) Charts as well as advanced interactivity features, like [Animations](https://www.ag-grid.com/charts/javascript/animation/?utm_source=ag-charts-readme&utm_medium=repository&utm_campaign=github), [Context Menus](https://www.ag-grid.com/charts/javascript/context-menu/?utm_source=ag-charts-readme&utm_medium=repository&utm_campaign=github), [Zooming](https://www.ag-grid.com/charts/javascript/zoom/?utm_source=ag-charts-readme&utm_medium=repository&utm_campaign=github), [Navigators](https://www.ag-grid.com/charts/javascript/navigator/?utm_source=ag-charts-readme&utm_medium=repository&utm_campaign=github), [Synchronization](https://www.ag-grid.com/charts/javascript/sync/?utm_source=ag-charts-readme&utm_medium=repository&utm_campaign=github) and much more, including [Financial Charts](https://www.ag-grid.com/charts/javascript/financial-charts/?utm_source=ag-charts-readme&utm_medium=repository&utm_campaign=github). ### Features & Chart Types #### Chart Types AG Charts offers 20+ Types Chart types, each of which are fully customisable: | Chart Type | AG Charts Community | AG Charts Enterprise | | ------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------- | -------------------- | | [Bar](https://www.ag-grid.com/charts/javascript/bar-series/?utm_source=ag-charts-readme&utm_medium=repository&utm_campaign=github) | ✅ | ✅ | | [Line](https://www.ag-grid.com/charts/javascript/line-series/?utm_source=ag-charts-readme&utm_medium=repository&utm_campaign=github) | ✅ | ✅ | | [Area](https://www.ag-grid.com/charts/javascript/area-series/?utm_source=ag-charts-readme&utm_medium=repository&utm_campaign=github) | ✅ | ✅ | | [Scatter](https://www.ag-grid.com/charts/javascript/scatter-series/?utm_source=ag-charts-readme&utm_medium=repository&utm_campaign=github) | ✅ | ✅ | | [Bubble](https://www.ag-grid.com/charts/javascript/bubble-series/?utm_source=ag-charts-readme&utm_medium=repository&utm_campaign=github) | ✅ | ✅ | | [Pie](https://www.ag-grid.com/charts/javascript/pie-series/?utm_source=ag-charts-readme&utm_medium=repository&utm_campaign=github) | ✅ | ✅ | | [Donut](https://www.ag-grid.com/charts/javascript/donut-series/?utm_source=ag-charts-readme&utm_medium=repository&utm_campaign=github) | ✅ | ✅ | | [Combination](https://www.ag-grid.com/charts/javascript/combination-series/?utm_source=ag-charts-readme&utm_medium=repository&utm_campaign=github) | ✅ | ✅ | | [Box Plot](https://www.ag-grid.com/charts/javascript/box-plot-series/?utm_source=ag-charts-readme&utm_medium=repository&utm_campaign=github) | ❌ | ✅ | | [Candlestick](https://www.ag-grid.com/charts/javascript/candlestick-series/?utm_source=ag-charts-readme&utm_medium=repository&utm_campaign=github) | ❌ | ✅ | | [OHLC](https://www.ag-grid.com/charts/javascript/ohlc-series/?utm_source=ag-charts-readme&utm_medium=repository&utm_campaign=github) | ❌ | ✅ | | [Heatmap](https://www.ag-grid.com/charts/javascript/heatmap-series/?utm_source=ag-charts-readme&utm_medium=repository&utm_campaign=github) | ❌ | ✅ | | [Histogram](https://www.ag-grid.com/charts/javascript/histogram-series/?utm_source=ag-charts-readme&utm_medium=repository&utm_campaign=github) | ❌ | ✅ | | [Nightingale](https://www.ag-grid.com/charts/javascript/nightingale-series/?utm_source=ag-charts-readme&utm_medium=repository&utm_campaign=github) | ❌ | ✅ | | [Radar Line](https://www.ag-grid.com/charts/javascript/radar-line-series/?utm_source=ag-charts-readme&utm_medium=repository&utm_campaign=github) | ❌ | ✅ | | [Radar Area](https://www.ag-grid.com/charts/javascript/radar-area-series/?utm_source=ag-charts-readme&utm_medium=repository&utm_campaign=github) | ❌ | ✅ | | [Radial Column](https://www.ag-grid.com/charts/javascript/radial-column-series/?utm_source=ag-charts-readme&utm_medium=repository&utm_campaign=github) | ❌ | ✅ | | [Radial Bar](https://www.ag-grid.com/charts/javascript/radial-bar-series/?utm_source=ag-charts-readme&utm_medium=repository&utm_campaign=github) | ❌ | ✅ | | [Range Area](https://www.ag-grid.com/charts/javascript/range-area-series/?utm_source=ag-charts-readme&utm_medium=repository&utm_campaign=github) | ❌ | ✅ | | [Range Bar](https://www.ag-grid.com/charts/javascript/range-bar-series/?utm_source=ag-charts-readme&utm_medium=repository&utm_campaign=github) | ❌ | ✅ | | [Sunburst](https://www.ag-grid.com/charts/javascript/sunburst-series/?utm_source=ag-charts-readme&utm_medium=repository&utm_campaign=github) | ❌ | ✅ | | [Treemap](https://www.ag-grid.com/charts/javascript/treemap-series/?utm_source=ag-charts-readme&utm_medium=repository&utm_campaign=github) | ❌ | ✅ | | [Waterfall](https://www.ag-grid.com/charts/javascript/waterfall-series/?utm_source=ag-charts-readme&utm_medium=repository&utm_campaign=github) | ❌ | ✅ | | [Sankey](https://www.ag-grid.com/charts/javascript/sankey-series/?utm_source=ag-charts-readme&utm_medium=repository&utm_campaign=github) | ❌ | ✅ | | [Chord](https://www.ag-grid.com/charts/javascript/chord-series/?utm_source=ag-charts-readme&utm_medium=repository&utm_campaign=github) | ❌ | ✅ | #### Features AG Charts Types Charting Library comes with every feature you'd expect: | Feature | AG Charts Community | AG Charts Enterprise | | ----------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------- | -------------------- | | [Accessibility](https://www.ag-grid.com/charts/javascript/accessibility/?utm_source=ag-charts-readme&utm_medium=repository&utm_campaign=github) | ✅ | ✅ | | [Localisation](https://www.ag-grid.com/charts/javascript/localisation/?utm_source=ag-charts-readme&utm_medium=repository&utm_campaign=github) | ✅ | ✅ | | [Series Highlighting](https://www.ag-grid.com/charts/javascript/series-highlighting/?utm_source=ag-charts-readme&utm_medium=repository&utm_campaign=github) | ✅ | ✅ | | [Tooltips](https://www.ag-grid.com/charts/javascript/tooltips/?utm_source=ag-charts-readme&utm_medium=repository&utm_campaign=github) | ✅ | ✅ | | [Touch](https://www.ag-grid.com/charts/javascript/touch/?utm_source=ag-charts-readme&utm_medium=repository&utm_campaign=github) | ✅ | ✅ | | [Cross Lines](https://www.ag-grid.com/charts/javascript/axes-cross-lines/?utm_source=ag-charts-readme&utm_medium=repository&utm_campaign=github) | ✅ | ✅ | | [Legend](https://www.ag-grid.com/charts/javascript/legend/?utm_source=ag-charts-readme&utm_medium=repository&utm_campaign=github) | ✅ | ✅ | | [Stylers](https://www.ag-grid.com/charts/javascript/stylers/?utm_source=ag-charts-readme&utm_medium=repository&utm_campaign=github) | ✅ | ✅ | | [Series Markers](https://www.ag-grid.com/charts/javascript/markers/?utm_source=ag-charts-readme&utm_medium=repository&utm_campaign=github) | ✅ | ✅ | | [Animations](https://www.ag-grid.com/charts/javascript/animation/?utm_source=ag-charts-readme&utm_medium=repository&utm_campaign=github) | ❌ | ✅ | | [Context Menu](https://www.ag-grid.com/charts/javascript/context-menu/?utm_source=ag-charts-readme&utm_medium=repository&utm_campaign=github) | ❌ | ✅ | | [Crosshairs](https://www.ag-grid.com/charts/javascript/axes-crosshairs/?utm_source=ag-charts-readme&utm_medium=repository&utm_campaign=github) | ❌ | ✅ | | [Navigator](https://www.ag-grid.com/charts/javascript/navigator/?utm_source=ag-charts-readme&utm_medium=repository&utm_campaign=github) | ❌ | ✅ | | [Synchronization](https://www.ag-grid.com/charts/javascript/sync/?utm_source=ag-charts-readme&utm_medium=repository&utm_campaign=github) | ❌ | ✅ | | [Zoom](https://www.ag-grid.com/charts/javascript/zoom/?utm_source=ag-charts-readme&utm_medium=repository&utm_campaign=github) | ❌ | ✅ | | [Annotations](https://www.ag-grid.com/charts/javascript/annotations/?utm_source=ag-charts-readme&utm_medium=repository&utm_campaign=github) | ❌ | ✅ | | [Error Bars](https://www.ag-grid.com/charts/javascript/error-bars/?utm_source=ag-charts-readme&utm_medium=repository&utm_campaign=github) | ❌ | ✅ |

ℹ️ Note:
Visit the Pricing page for a full comparison.

### Financial Charts Build interactive financial charts featuring advanced annotations with minimal configuration, all you need to do is provide your data: ```js const options = { data: getData(), }; AgCharts.createFinancialChart(options); ``` Once created, users will have a Financial Chart that they can interact with and add annotations to.

The default chart type is [Candlestick](https://www.ag-grid.com/charts/javascript/candlestick-series/?utm_source=ag-charts-readme&utm_medium=repository&utm_campaign=github), with additional types like [OHLC](https://www.ag-grid.com/charts/javascript/ohlc-series/?utm_source=ag-charts-readme&utm_medium=repository&utm_campaign=github) and [Line](https://www.ag-grid.com/charts/javascript/line-series/?utm_source=ag-charts-readme&utm_medium=repository&utm_campaign=github) for versatile data visualisation.

--- ### Maps The Maps Series let you visualise geographic data in different ways.

Maps can display data using [Shapes](https://www.ag-grid.com/charts/javascript/map-shapes/?utm_source=ag-charts-readme&utm_medium=repository&utm_campaign=github), [Lines](https://www.ag-grid.com/charts/javascript/map-lines/?utm_source=ag-charts-readme&utm_medium=repository&utm_campaign=github) and [Marker](https://www.ag-grid.com/charts/javascript/map-markers/?utm_source=ag-charts-readme&utm_medium=repository&utm_campaign=github) series: ```js const options = { topology: topology, series: [ { type: 'map-shape', data: pacific, idKey: 'name', title: 'Pacific', }, // ... ], legend: { enabled: true, }, // ... }; ```

## ⚡️ Quick Start AG Charts are easy to set up - all you need to do is provide your data and series type along with any other chart options. Read on for vanilla Types installation instructions, or refer to our framework-specific guides for React, Angular and Vue. ### Installation ```sh $ npm install ag-charts-types ``` ### Setup 1. Provide a Container ```html AG Charts Quick Start

``` 2. Instantiate the Types Chart ```js // Chart Options const options = {}; // Create Chart const chart = agCharts.AgCharts.create(options); ``` 3. Define Chart Data and Series ```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' }], }; ```

ℹ️ Note:
For more information on building Types Charts with AG Charts, refer to our Documentation.

## 🤝 Support ### Enterprise Support AG Charts Enterprise customers have access to dedicated support via [ZenDesk](https://ag-grid.zendesk.com/hc/en-us), which is monitored by our support & engineering teams. ### Bug Reports If you have found a bug, please report it in this repository's [issues](https://github.com/ag-grid/ag-charts/issues) section.

### Questions Look for similar problems on [StackOverflow](https://stackoverflow.com/questions/tagged/ag-charts) using the `ag-charts` tag. If nothing seems related, post a new message there. Please do not use GitHub issues to ask questions.

### Contributing AG Charts is developed by a team of co-located developers in London. If you want to join the team send your application to info@ag-grid.com. ## ⚠️ License `ag-charts-community` is licensed under the **MIT** license. `ag-charts-enterprise` has a **Commercial** license. See the [LICENSE file](./LICENSE.txt) for more info.

AG Grid

AG Grid is our flagship product, a fully-featured and highly customizable Types Data Grid. It delivers outstanding performance, has no third-party dependencies and comes with support for React, Angular and Vue.

AG Charts is used within AG Grid to power the [Integrated Charting](https://www.ag-grid.com/javascript-data-grid/integrated-charts/?utm_source=ag-charts-readme&utm_medium=repository&utm_campaign=github) feature. Learn more at [ag-grid.com](https://www.ag-grid.com/?utm_source=ag-charts-readme&utm_medium=repository&utm_campaign=github)

Follow us to keep up to date with all the latest news from AG Grid: