ag-charts-types - npm Package Compare versions

Comparing version 10.0.2 to 10.1.0

dist/package/main.cjs.js

@@ -24,3 +24,4 @@ "use strict";
   AgErrorBarSupportedSeriesTypes: () => AgErrorBarSupportedSeriesTypes,
-  AgTooltipPositionType: () => AgTooltipPositionType
+  AgTooltipPositionType: () => AgTooltipPositionType,
+  ICONS_LEGACY: () => ICONS_LEGACY
 });
@@ -37,2 +38,32 @@ module.exports = __toCommonJS(main_exports);
 
+// packages/ag-charts-types/src/chart/toolbarOptions.ts
+var ICONS_LEGACY = [
+  "delete-legacy",
+  "disjoint-channel",
+  "disjoint-channel-legacy",
+  "horizontal-line-legacy",
+  "line-color-legacy",
+  "lock",
+  "lock-legacy",
+  "pan-end-legacy",
+  "pan-left-legacy",
+  "pan-right-legacy",
+  "pan-start-legacy",
+  "parallel-channel",
+  "parallel-channel-legacy",
+  "reset-legacy",
+  "trend-line",
+  "trend-line-legacy",
+  "unlock",
+  "unlock-legacy",
+  "vertical-line",
+  "vertical-line-legacy",
+  "zoom-in-legacy",
+  "zoom-in-alt",
+  "zoom-in-alt-legacy",
+  "zoom-out-legacy",
+  "zoom-out-alt",
+  "zoom-out-alt-legacy"
+];
+
 // packages/ag-charts-types/src/chart/tooltipOptions.ts
@@ -39,0 +70,0 @@ var AgTooltipPositionType = /* @__PURE__ */ ((AgTooltipPositionType2) => {

dist/package/main.cjs.min.js

@@ -1,1 +0,1 @@
-"use strict";var __defProp=Object.defineProperty,__getOwnPropDesc=Object.getOwnPropertyDescriptor,__getOwnPropNames=Object.getOwnPropertyNames,__hasOwnProp=Object.prototype.hasOwnProperty,__export=(r,e)=>{for(var t in e)__defProp(r,t,{get:e[t],enumerable:!0})},__copyProps=(r,e,t,a)=>{if(e&&typeof e=="object"||typeof e=="function")for(let _ of __getOwnPropNames(e))!__hasOwnProp.call(r,_)&&_!==t&&__defProp(r,_,{get:()=>e[_],enumerable:!(a=__getOwnPropDesc(e,_))||a.enumerable});return r},__toCommonJS=r=>__copyProps(__defProp({},"__esModule",{value:!0}),r),main_exports={};__export(main_exports,{AgErrorBarSupportedSeriesTypes:()=>AgErrorBarSupportedSeriesTypes,AgTooltipPositionType:()=>AgTooltipPositionType}),module.exports=__toCommonJS(main_exports);var AgErrorBarSupportedSeriesTypes=["bar","line","scatter"],__MINI_CHART_SERIES_OPTIONS={},__VERIFY_MINI_CHART_SERIES_OPTIONS=void 0;__VERIFY_MINI_CHART_SERIES_OPTIONS=__MINI_CHART_SERIES_OPTIONS;var AgTooltipPositionType=(r=>(r.POINTER="pointer",r.NODE="node",r.TOP="top",r.RIGHT="right",r.BOTTOM="bottom",r.LEFT="left",r.TOP_LEFT="top-left",r.TOP_RIGHT="top-right",r.BOTTOM_RIGHT="bottom-right",r.BOTTOM_LEFT="bottom-left",r))(AgTooltipPositionType||{}),__THEME_OVERRIDES={},__VERIFY_THEME_OVERRIDES=void 0;__VERIFY_THEME_OVERRIDES=__THEME_OVERRIDES;
+"use strict";var __defProp=Object.defineProperty,__getOwnPropDesc=Object.getOwnPropertyDescriptor,__getOwnPropNames=Object.getOwnPropertyNames,__hasOwnProp=Object.prototype.hasOwnProperty,__export=(e,r)=>{for(var t in r)__defProp(e,t,{get:r[t],enumerable:!0})},__copyProps=(e,r,t,l)=>{if(r&&typeof r=="object"||typeof r=="function")for(let a of __getOwnPropNames(r))!__hasOwnProp.call(e,a)&&a!==t&&__defProp(e,a,{get:()=>r[a],enumerable:!(l=__getOwnPropDesc(r,a))||l.enumerable});return e},__toCommonJS=e=>__copyProps(__defProp({},"__esModule",{value:!0}),e),main_exports={};__export(main_exports,{AgErrorBarSupportedSeriesTypes:()=>AgErrorBarSupportedSeriesTypes,AgTooltipPositionType:()=>AgTooltipPositionType,ICONS_LEGACY:()=>ICONS_LEGACY}),module.exports=__toCommonJS(main_exports);var AgErrorBarSupportedSeriesTypes=["bar","line","scatter"],__MINI_CHART_SERIES_OPTIONS={},__VERIFY_MINI_CHART_SERIES_OPTIONS=void 0;__VERIFY_MINI_CHART_SERIES_OPTIONS=__MINI_CHART_SERIES_OPTIONS;var ICONS_LEGACY=["delete-legacy","disjoint-channel","disjoint-channel-legacy","horizontal-line-legacy","line-color-legacy","lock","lock-legacy","pan-end-legacy","pan-left-legacy","pan-right-legacy","pan-start-legacy","parallel-channel","parallel-channel-legacy","reset-legacy","trend-line","trend-line-legacy","unlock","unlock-legacy","vertical-line","vertical-line-legacy","zoom-in-legacy","zoom-in-alt","zoom-in-alt-legacy","zoom-out-legacy","zoom-out-alt","zoom-out-alt-legacy"],AgTooltipPositionType=(e=>(e.POINTER="pointer",e.NODE="node",e.TOP="top",e.RIGHT="right",e.BOTTOM="bottom",e.LEFT="left",e.TOP_LEFT="top-left",e.TOP_RIGHT="top-right",e.BOTTOM_RIGHT="bottom-right",e.BOTTOM_LEFT="bottom-left",e))(AgTooltipPositionType||{}),__THEME_OVERRIDES={},__VERIFY_THEME_OVERRIDES=void 0;__VERIFY_THEME_OVERRIDES=__THEME_OVERRIDES;

dist/types/src/api/presetOptions.d.ts

@@ -0,1 +1,4 @@
+/** @deprecated v10.1.0 use 'hlc' instead. */
+export type DeprecatedAgPriceVolumeChartType = 'range-area';
+export type AgPriceVolumeChartType = 'candlestick' | 'hollow-candlestick' | 'ohlc' | 'line' | 'step-line' | 'hlc' | 'high-low' | DeprecatedAgPriceVolumeChartType;
 export interface AgPriceVolumePreset {
@@ -6,8 +9,15 @@ /** Series type used for the OHLC data.
      */
-    chartType?: 'candlestick' | 'hollow-candlestick' | 'ohlc' | 'line' | 'step-line' | 'range-area';
+    chartType?: AgPriceVolumeChartType;
     /** The key used to retrieve x-values from the data.
      *
      * Default: `'date'`
+     *
+     * @deprecated v10.1.0 use `dateKey` instead.
      */
     xKey?: string;
+    /** The key used to retrieve x-values from the data.
+     *
+     * Default: `'date'`
+     */
+    dateKey?: string;
     /** The key used to retrieve 'open' values from the data.
@@ -53,4 +63,11 @@ *
      * Default: `true`
+     *
+     * @deprecated v10.1.0 use `rangeButtons` instead.
      */
     rangeToolbar?: boolean;
+    /** Whether to show the range buttons.
+     *
+     * Default: `true`
+     */
+    rangeButtons?: boolean;
     /** Whether to show the status bar.
@@ -64,4 +81,11 @@ *
      * Default: `true`
+     *
+     * @deprecated v10.1.0 use `toolbar` instead.
      */
     annotations?: boolean;
+    /** Whether the toolbar is enabled.
+     *
+     * Default: `true`
+     */
+    toolbar?: boolean;
     /** Whether Zoom is enabled.
@@ -68,0 +92,0 @@ *

dist/types/src/chart/annotationsOptions.d.ts

@@ -5,3 +5,2 @@ import type { FillOptions, FontOptions, LineDashOptions, StrokeOptions, Toggleable, Visible } from '../series/cartesian/commonOptions';
 export interface AgAnnotationsThemeableOptions {
-    axesButtons?: AgAnnotationAxesButtons;
     line?: AgLineAnnotationStyles;
@@ -12,2 +11,7 @@ 'horizontal-line'?: AgLineAnnotationStyles;
     'parallel-channel'?: AgChannelAnnotationStyles;
+    callout?: AgCalloutAnnotationStyles;
+    comment?: AgCommentAnnotationStyles;
+    note?: AgNoteAnnotationStyles;
+    text?: AgTextAnnotationStyles;
+    axesButtons?: AgAnnotationAxesButtons;
 }
@@ -26,4 +30,15 @@ export interface AgAnnotationAxesButtons extends Toggleable {
     middle?: AgChannelAnnotationMiddle;
+    /** The fill colour for the middle of the channel. */
     background?: AgChannelAnnotationBackground;
 }
+export interface AgTextAnnotationStyles extends FontOptions, Lockable, Visible {
+    handle?: AgAnnotationHandleStyles;
+}
+export interface AgCalloutAnnotationStyles extends AgTextAnnotationStyles, StrokeOptions, FillOptions {
+}
+export interface AgCommentAnnotationStyles extends AgTextAnnotationStyles, StrokeOptions, FillOptions {
+}
+export interface AgNoteAnnotationStyles extends AgTextAnnotationStyles, StrokeOptions, FillOptions {
+    background: AgNoteAnnotationBackground;
+}
 export interface AgAnnotationsOptions extends Toggleable {
@@ -33,35 +48,33 @@ /** The options for the axes buttons */
 }
-export type AgAnnotation = AgLineAnnotation | AgHorizontalLineAnnotation | AgVerticalLineAnnotation | AgDisjointChannelAnnotation | AgParallelChannelAnnotation;
+export type AgAnnotation = AgLineAnnotation | AgHorizontalLineAnnotation | AgVerticalLineAnnotation | AgDisjointChannelAnnotation | AgParallelChannelAnnotation | AgCalloutAnnotation | AgCommentAnnotation | AgNoteAnnotation | AgTextAnnotation;
 export interface AgLineAnnotation extends AnnotationLinePoints, Cappable, Extendable, Lockable, Visible, StrokeOptions, LineDashOptions {
+    /** Configuration for the trend line annotation.*/
     type: 'line';
 }
 export interface AgHorizontalLineAnnotation extends AgCrossLineAnnotation {
+    /** Configuration for the horizontal-line annotation.*/
     type: 'horizontal-line';
 }
 export interface AgVerticalLineAnnotation extends AgCrossLineAnnotation {
+    /** Configuration for the vertical-line annotation.*/
     type: 'vertical-line';
 }
 export interface AgCrossLineAnnotation extends Lockable, Visible, StrokeOptions, LineDashOptions {
+    /** Position of the annotation specified in terms of the axis values. */
     value: AgAnnotationValue;
+    /** Configuration for the annotation axis label. */
     axisLabel?: AgAnnotationAxisLabel;
 }
-export interface AgAnnotationAxisLabel extends FillOptions, StrokeOptions, LineDashOptions, AgAnnotationLabelOptions {
-    /** Apply rounded corners to the axis label container. */
-    cornerRadius?: PixelSize;
-}
-export interface AgAnnotationLabelOptions extends Toggleable, FontOptions {
-    /** A custom formatting function used to convert values into text for display by labels. */
-    formatter?: Formatter<AgAnnotationLabelFormatterParams>;
-}
-export interface AgAnnotationLabelFormatterParams {
-    /** The default label value that would have been used without a formatter. */
-    value: any;
-}
 export interface AgParallelChannelAnnotation extends AnnotationLinePoints, Extendable, Lockable, Visible, StrokeOptions, LineDashOptions {
+    /** Configuration for the parallel-channel annotation.*/
     type: 'parallel-channel';
+    /** The height of the annotation along the y-axis. */
     height: number;
+    /** Configuration for the line in the middle of the channel. */
     middle?: AgChannelAnnotationMiddle;
+    /** The fill colour for the middle of the channel. */
     background?: AgChannelAnnotationBackground;
 }
 export interface AgDisjointChannelAnnotation extends AnnotationLinePoints, Extendable, Lockable, Visible, StrokeOptions, LineDashOptions {
+    /** Configuration for the disjoint-channel annotation.*/
     type: 'disjoint-channel';
@@ -72,4 +85,31 @@ /** The height of the annotation along the y-axis at the start. */
     endHeight: number;
+    /** The fill colour for the middle of the channel. */
     background?: AgChannelAnnotationBackground;
 }
+export interface AgCalloutAnnotation extends TextualStartEndAnnotation, FillOptions, StrokeOptions {
+    /** Configuration for the callout annotation. */
+    type: 'callout';
+}
+export interface AgCommentAnnotation extends TextualPointAnnotation, FillOptions {
+    /** Configuration for the comment annotation. */
+    type: 'comment';
+}
+export interface AgNoteAnnotation extends TextualPointAnnotation, FillOptions, StrokeOptions {
+    /** Configuration for the note annotation. */
+    type: 'note';
+    background?: AgNoteAnnotationBackground;
+}
+export interface AgTextAnnotation extends TextualPointAnnotation {
+    /** Configuration for the text annotation. */
+    type: 'text';
+}
+interface TextualPointAnnotation extends TextualAnnotation, AgAnnotationPoint {
+}
+interface TextualStartEndAnnotation extends TextualAnnotation {
+    start: AgAnnotationPoint;
+    end: AgAnnotationPoint;
+}
+interface TextualAnnotation extends Lockable, Visible, FontOptions {
+    text: string;
+}
 export interface AgChannelAnnotationMiddle extends Visible, StrokeOptions, LineDashOptions {
@@ -79,2 +119,12 @@ }
 }
+export interface AgNoteAnnotationBackground extends StrokeOptions, FillOptions {
+}
+export interface AgAnnotationAxisLabel extends Toggleable, FillOptions, StrokeOptions, LineDashOptions, LabelOptions<AgAnnotationLabelFormatterParams> {
+    /** Apply rounded corners to the axis label container. */
+    cornerRadius?: PixelSize;
+}
+export interface AgAnnotationLabelFormatterParams {
+    /** The default label value that would have been used without a formatter. */
+    value: any;
+}
 interface AnnotationLinePoints {
@@ -92,2 +142,6 @@ /** The starting point of a linear annotation. */
 }
+interface LabelOptions<T> extends FontOptions {
+    /** A custom formatting function used to convert values into text for display by labels. */
+    formatter?: Formatter<T>;
+}
 interface Lockable {
@@ -94,0 +148,0 @@ /**

dist/types/src/chart/chartBuilderOptions.d.ts

@@ -80,3 +80,5 @@ import type { AgFinancialChartPresets } from '../api/presetOptions';
     getImageDataURL(options?: ImageDataUrlOptions): Promise<string>;
+    /** Returns a representation of the current state of the given `AgChartInstance`. */
     getState(): Required<AgChartState>;
+    /** Sets the state of the given `AgChartInstance` to the state provided.*/
     setState(state: AgChartState): Promise<void>;
@@ -83,0 +85,0 @@ /** Destroy the chart instance and any allocated resources supporting its rendering. */

dist/types/src/chart/legendOptions.d.ts

@@ -77,3 +77,3 @@ import type { Formatter } from './callbackOptions';
     legendItemClick?: (event: AgChartLegendClickEvent) => void;
-    /** The listener to call when a legend item is double clicked. */
+    /** The listener to call when a legend item is double-clicked. */
     legendItemDoubleClick?: (event: AgChartLegendDoubleClickEvent) => void;
@@ -80,0 +80,0 @@ }

dist/types/src/chart/localeOptions.d.ts

@@ -0,1 +1,2 @@
+import type { Formatter } from './callbackOptions';
 export interface AgLocaleThemeableOptions {
@@ -5,3 +6,3 @@ /** A record of locale texts keyed by id. */
     /** Formatter that generates the text displayed to the user. */
-    getLocaleText?: (params: MessageFormatterParams) => string | undefined;
+    getLocaleText?: MessageFormatter;
 }
@@ -16,4 +17,4 @@ export interface MessageFormatterParams {
 }
-export type MessageFormatter = (params: MessageFormatterParams) => string | undefined;
+export type MessageFormatter = Formatter<MessageFormatterParams>;
 export interface AgLocaleOptions extends AgLocaleThemeableOptions {
 }

dist/types/src/chart/themeOptions.d.ts

@@ -41,3 +41,3 @@ import type { AgAreaSeriesThemeableOptions } from '../series/cartesian/areaOptions';
 export type AgChartThemeName = 'ag-default' | 'ag-default-dark' | 'ag-sheets' | 'ag-sheets-dark' | 'ag-polychroma' | 'ag-polychroma-dark' | 'ag-vivid' | 'ag-vivid-dark' | 'ag-material' | 'ag-material-dark' | 'ag-financial' | 'ag-financial-dark';
-interface AgPaletteColors {
+export interface AgPaletteColors {
     fill?: CssColor;
@@ -230,2 +230,1 @@ stroke?: CssColor;
 }
-export {};

dist/types/src/chart/toolbarOptions.d.ts

 import type { Toggleable } from '../series/cartesian/commonOptions';
 export interface AgToolbarOptions extends Toggleable {
+    seriesType?: AgToolbarSeriesTypeGroup;
     annotations?: AgToolbarAnnotationsGroup;
@@ -35,15 +36,21 @@ annotationOptions?: AgToolbarAnnotationOptionsGroup;
     value: any;
+    /** ID of the button (must be set when value is not a primitive) */
+    id?: string;
 }
-export type AgIconName = IconNameAnnotation | IconNameZoom;
-type IconNameAnnotation = 'horizontal-line' | 'vertical-line' | 'trend-line' | 'parallel-channel' | 'disjoint-channel' | 'delete' | 'line-color' | 'lock' | 'reset' | 'unlock';
-type IconNameZoom = 'pan-end' | 'pan-left' | 'pan-right' | 'pan-start' | 'reset' | 'zoom-in' | 'zoom-in-alt' | 'zoom-out' | 'zoom-out-alt';
+export type AgIconName = 'callout-annotation' | 'candlestick-series' | 'comment-annotation' | 'delete' | 'disjoint-channel-drawing' | 'fill-color' | 'high-low-series' | 'hlc-series' | 'hollow-candlestick-series' | 'horizontal-line-drawing' | 'line-color' | 'line-series' | 'line-with-markers-series' | 'locked' | 'note-annotation' | 'ohlc-series' | 'pan-end' | 'pan-left' | 'pan-right' | 'pan-start' | 'parallel-channel-drawing' | 'price-label-annotation' | 'reset' | 'step-line-series' | 'text-annotation' | 'trend-line-drawing' | 'unlocked' | 'vertical-line-drawing' | 'zoom-in' | 'zoom-out' | AgIconLegacyName;
+/** @deprecated */
+export type AgIconLegacyName = 'delete-legacy' | 'disjoint-channel' | 'disjoint-channel-legacy' | 'horizontal-line' | 'horizontal-line-legacy' | 'line-color-legacy' | 'lock' | 'lock-legacy' | 'pan-end-legacy' | 'pan-left-legacy' | 'pan-right-legacy' | 'pan-start-legacy' | 'parallel-channel' | 'parallel-channel-legacy' | 'reset-legacy' | 'trend-line' | 'trend-line-legacy' | 'unlock' | 'unlock-legacy' | 'vertical-line' | 'vertical-line-legacy' | 'zoom-in-legacy' | 'zoom-in-alt' | 'zoom-in-alt-legacy' | 'zoom-out-legacy' | 'zoom-out-alt' | 'zoom-out-alt-legacy';
+export declare const ICONS_LEGACY: AgIconLegacyName[];
 export interface AgToolbarAnnotationsGroup extends AgToolbarGroup {
     buttons?: AgToolbarAnnotationsButton[];
 }
+export interface AgToolbarChartGroup extends AgToolbarGroup {
+}
 export interface AgToolbarAnnotationsButton extends AgToolbarButton {
-    section?: 'create' | 'tools';
     /** An annotation type or action. */
     value: AgToolbarAnnotationsButtonValue;
 }
-export type AgToolbarAnnotationsButtonValue = 'horizontal-line' | 'vertical-line' | 'line' | 'parallel-channel' | 'disjoint-channel' | 'clear';
+export type AgToolbarAnnotationsButtonValue = 'line-menu' | 'text-menu' | 'line' | 'horizontal-line' | 'vertical-line' | 'parallel-channel' | 'disjoint-channel' | 'text' | 'comment' | 'callout' | 'note' | 'clear';
+export interface AgToolbarSeriesTypeGroup extends AgToolbarGroup {
+}
 export interface AgToolbarAnnotationOptionsGroup extends AgToolbarGroup {
@@ -55,3 +62,3 @@ buttons?: AgToolbarAnnotationOptionsButton[];
 }
-export type AgToolbarAnnotationOptionsButtonValue = 'line-color' | 'delete' | 'lock' | 'unlock';
+export type AgToolbarAnnotationOptionsButtonValue = 'line-color' | 'fill-color' | 'text-color' | 'text-size' | 'delete' | 'lock' | 'unlock';
 export interface AgToolbarRangesGroup extends AgToolbarGroup {
@@ -74,2 +81,1 @@ buttons?: AgToolbarRangesButton[];
 export type AgToolbarZoomButtonValue = 'reset' | 'zoom-in' | 'zoom-out' | 'pan-left' | 'pan-right' | 'pan-start' | 'pan-end';
-export {};

dist/types/src/main.d.ts

 export * from './api/presetOptions';
+export * from './api/initialStateOptions';
 export * from './chart/annotationsOptions';
@@ -3,0 +4,0 @@ export * from './chart/axisOptions';

package.json

 {
   "name": "ag-charts-types",
-  "version": "10.0.2",
+  "version": "10.1.0",
   "description": "Advanced Charting / Charts supporting Javascript / Typescript / React / Angular / Vue",
@@ -5,0 +5,0 @@ "main": "./dist/package/main.cjs.js",

README.md

@@ -1,112 +0,327 @@
-<picture><source media="(prefers-color-scheme: dark)" srcset="./.github/banner-dark.png"><source media="(prefers-color-scheme: light)" srcset="./.github/banner-light.png"><img alt="AG Charts canvas-based charting trusted by the community, built for enterprise." src="./.github/banner-light.png"></picture>
+# Types Charting Library
 
-[![Github Stars](https://img.shields.io/github/stars/ag-grid/ag-charts?style=social)](https://github.com/ag-grid/ag-charts) [![Twitter](https://img.shields.io/twitter/follow/ag_grid?style=social)](https://twitter.com/ag_grid)
+<div align="center">
+    <picture>
+      <source media="(prefers-color-scheme: dark)" srcset="https://github.com/ag-grid/ag-grid/blob/latest/documentation/ag-grid-docs/public/images/ag-logos/svg-logos/AG-Charts-Logo_Dark-Theme.svg?raw=true"/>
+      <source media="(prefers-color-scheme: light)" srcset="https://github.com/ag-grid/ag-grid/blob/latest/documentation/ag-grid-docs/public/images/ag-logos/svg-logos/AG-Charts-Logo_Light-Theme.svg?raw=true"/>
+      <img width="100%" alt="AG Charts Logo" src="https://github.com/ag-grid/ag-grid/blob/latest/documentation/ag-grid-docs/public/images/ag-logos/svg-logos/AG-Charts-Logo_Dark-Theme.svg?raw=true"/>
+    </picture>
+    <div align="center">
+        <h4><a href="https://charts.ag-grid.com/?utm_source=ag-charts-readme&utm_medium=repository&utm_campaign=github">🌐 Website</a> • <a href="https://charts.ag-grid.com/javascript/quick-start/?utm_source=ag-charts-readme&utm_medium=repository&utm_campaign=github">📖 Documentation</a> • <a href="https://charts.ag-grid.com/gallery/?utm_source=ag-charts-readme&utm_medium=repository&utm_campaign=github">📊 Gallery</a></h4>
+    </div>
+    <br>
+    <a href="https://github.com/ag-grid/ag-charts/releases">
+        <img src="https://img.shields.io/github/v/release/ag-grid/ag-charts?style=for-the-badge" alt="GitHub Release">
+    </a>
+    <a href="https://www.npmjs.com/package/ag-charts-types">
+        <img src="https://img.shields.io/npm/dm/ag-charts-types?style=for-the-badge" alt="NPM Downloads">
+    </a>
+    <a href="https://github.com/ag-grid/ag-charts">
+        <img src="https://img.shields.io/github/stars/ag-grid/ag-charts?style=for-the-badge" alt="GitHub Repo stars">
+    </a>
+    <a href="https://github.com/ag-grid/ag-charts">
+        <img alt="GitHub forks" src="https://img.shields.io/github/forks/ag-grid/ag-charts?style=for-the-badge">
+    </a>
+    <br><br>
+    <a href="https://sonarcloud.io/dashboard?id=ag-charts-community">
+      <img src="https://sonarcloud.io/api/project_badges/measure?project=ag-charts-community&metric=alert_status" alt="Quality Gate Status">
+    </a>
+    <a href="https://npm.io/package/ag-charts-types">
+        <img src="https://img.shields.io/npms-io/maintenance-score/ag-grid-community" alt="npms.io Maintenance Score">
+    </a>
+    <a href="https://github.com/ag-grid/ag-charts/graphs/commit-activity">
+        <img src="https://img.shields.io/github/commit-activity/m/ag-grid/ag-charts" alt="GitHub commit activity">
+    </a>
+    <a href="https://github.com/ag-grid/ag-charts/network/dependents">
+        <img src="https://img.shields.io/librariesio/dependents/npm/ag-charts-types" alt="Dependents (via libraries.io?style=for-the-badge)">
+    </a>
+    <br><br>
+    <!-- START MAIN DESCRIPTION -->
+	<p>AG Charts is a <strong>fully-featured</strong> and <strong>highly customizable</strong> canvas-based  Types Charting library. It delivers <strong>outstanding performance</strong> and has <strong>no third-party dependencies</strong>.</p>	
+<!-- END MAIN DESCRIPTION -->
+    <br>
+</div>
 
-| Module               |                                                                                                                                                                                                                                                                                                        Info |
-| -------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: |
-| ag-charts-community  | [![npm](https://img.shields.io/npm/dm/ag-charts-community)](https://www.npmjs.com/package/ag-charts-community) <br> [![Quality Gate Status](https://sonarcloud.io/api/project_badges/measure?project=ag-charts-community&metric=alert_status)](https://sonarcloud.io/dashboard?id=ag-charts-community) <br> |
-| ag-charts-enterprise |    [![npm](https://img.shields.io/npm/dm/ag-charts-enterprise)](https://www.npmjs.com/package/ag-charts-enterprise) <br> [![Quality Gate Status](https://sonarcloud.io/api/project_badges/measure?project=ag-charts-community&metric=alert_status)](https://sonarcloud.io/dashboard?id=ag-charts-community) |
+<picture>
+    <source media="(prefers-color-scheme: dark)" srcset="https://github.com/ag-grid/ag-charts/blob/latest/packages/ag-charts-website/public/images/readme-assets/gallery-dark.gif?raw=true"/>
+    <source media="(prefers-color-scheme: light)" srcset="https://github.com/ag-grid/ag-charts/blob/latest/packages/ag-charts-website/public/images/readme-assets/gallery.gif?raw=true"/>
+    <img width="100%" alt="Preview of AG Charts  Types Charting Examples" src="https://github.com/ag-grid/ag-charts/blob/latest/packages/ag-charts-website/public/images/readme-assets/gallery-dark.gif?raw=true"/>
+</picture>
+<div align="right">
+    <a href="https://charts.ag-grid.com/gallery/?utm_source=ag-charts-readme&utm_medium=repository&utm_campaign=github"><br><img alt="Static Badge" src="https://img.shields.io/badge/View%20Gallery-blue?style=for-the-badge&logo=data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4KDTwhLS0gVXBsb2FkZWQgdG86IFNWRyBSZXBvLCB3d3cuc3ZncmVwby5jb20sIFRyYW5zZm9ybWVkIGJ5OiBTVkcgUmVwbyBNaXhlciBUb29scyAtLT4KPHN2ZyB3aWR0aD0iODAwcHgiIGhlaWdodD0iODAwcHgiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KDTxnIGlkPSJTVkdSZXBvX2JnQ2FycmllciIgc3Ryb2tlLXdpZHRoPSIwIi8%2BCg08ZyBpZD0iU1ZHUmVwb190cmFjZXJDYXJyaWVyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KDTxnIGlkPSJTVkdSZXBvX2ljb25DYXJyaWVyIj4gPHBhdGggZD0iTTE4IDIwLjc1SDZDNS4yNzA2NSAyMC43NSA0LjU3MTE4IDIwLjQ2MDMgNC4wNTU0NiAxOS45NDQ1QzMuNTM5NzMgMTkuNDI4OCAzLjI1IDE4LjcyOTMgMy4yNSAxOFY2QzMuMjUgNS4yNzA2NSAzLjUzOTczIDQuNTcxMTggNC4wNTU0NiA0LjA1NTQ2QzQuNTcxMTggMy41Mzk3MyA1LjI3MDY1IDMuMjUgNiAzLjI1SDEyQzEyLjE5ODkgMy4yNSAxMi4zODk3IDMuMzI5MDIgMTIuNTMwMyAzLjQ2OTY3QzEyLjY3MSAzLjYxMDMyIDEyLjc1IDMuODAxMDkgMTIuNzUgNEMxMi43NSA0LjE5ODkxIDEyLjY3MSA0LjM4OTY4IDEyLjUzMDMgNC41MzAzM0MxMi4zODk3IDQuNjcwOTggMTIuMTk4OSA0Ljc1IDEyIDQuNzVINkM1LjY2ODQ4IDQuNzUgNS4zNTA1NCA0Ljg4MTcgNS4xMTYxMiA1LjExNjEyQzQuODgxNyA1LjM1MDU0IDQuNzUgNS42Njg0OCA0Ljc1IDZWMThDNC43NSAxOC4zMzE1IDQuODgxNyAxOC42NDk1IDUuMTE2MTIgMTguODgzOUM1LjM1MDU0IDE5LjExODMgNS42Njg0OCAxOS4yNSA2IDE5LjI1SDE4QzE4LjMzMTUgMTkuMjUgMTguNjQ5NSAxOS4xMTgzIDE4Ljg4MzkgMTguODgzOUMxOS4xMTgzIDE4LjY0OTUgMTkuMjUgMTguMzMxNSAxOS4yNSAxOFYxMkMxOS4yNSAxMS44MDExIDE5LjMyOSAxMS42MTAzIDE5LjQ2OTcgMTEuNDY5N0MxOS42MTAzIDExLjMyOSAxOS44MDExIDExLjI1IDIwIDExLjI1QzIwLjE5ODkgMTEuMjUgMjAuMzg5NyAxMS4zMjkgMjAuNTMwMyAxMS40Njk3QzIwLjY3MSAxMS42MTAzIDIwLjc1IDExLjgwMTEgMjAuNzUgMTJWMThDMjAuNzUgMTguNzI5MyAyMC40NjAzIDE5LjQyODggMTkuOTQ0NSAxOS45NDQ1QzE5LjQyODggMjAuNDYwMyAxOC43MjkzIDIwLjc1IDE4IDIwLjc1WiIgZmlsbD0iI2ZmZmZmZiIvPiA8cGF0aCBkPSJNMjAgOC43NUMxOS44MDE5IDguNzQ3NDEgMTkuNjEyNiA4LjY2NzU2IDE5LjQ3MjUgOC41Mjc0N0MxOS4zMzI0IDguMzg3MzcgMTkuMjUyNiA4LjE5ODExIDE5LjI1IDhWNC43NUgxNkMxNS44MDExIDQuNzUgMTUuNjEwMyA0LjY3MDk4IDE1LjQ2OTcgNC41MzAzM0MxNS4zMjkgNC4zODk2OCAxNS4yNSA0LjE5ODkxIDE1LjI1IDRDMTUuMjUgMy44MDEwOSAxNS4zMjkgMy42MTAzMiAxNS40Njk3IDMuNDY5NjdDMTUuNjEwMyAzLjMyOTAyIDE1LjgwMTEgMy4yNSAxNiAzLjI1SDIwQzIwLjE5ODEgMy4yNTI1OSAyMC4zODc0IDMuMzMyNDQgMjAuNTI3NSAzLjQ3MjUzQzIwLjY2NzYgMy42MTI2MyAyMC43NDc0IDMuODAxODkgMjAuNzUgNFY4QzIwLjc0NzQgOC4xOTgxMSAyMC42Njc2IDguMzg3MzcgMjAuNTI3NSA4LjUyNzQ3QzIwLjM4NzQgOC42Njc1NiAyMC4xOTgxIDguNzQ3NDEgMjAgOC43NVoiIGZpbGw9IiNmZmZmZmYiLz4gPHBhdGggZD0iTTEzLjUgMTEuMjVDMTMuMzA3MSAxMS4yMzUyIDEzLjEyNzYgMTEuMTQ1NSAxMyAxMUMxMi44NzcgMTAuODYyNSAxMi44MDkgMTAuNjg0NSAxMi44MDkgMTAuNUMxMi44MDkgMTAuMzE1NSAxMi44NzcgMTAuMTM3NSAxMyAxMEwxOS41IDMuNUMxOS41Njg3IDMuNDI2MzEgMTkuNjUxNSAzLjM2NzIxIDE5Ljc0MzUgMy4zMjYyMkMxOS44MzU1IDMuMjg1MjMgMTkuOTM0OCAzLjI2MzE5IDIwLjAzNTUgMy4yNjE0MUMyMC4xMzYyIDMuMjU5NjMgMjAuMjM2MiAzLjI3ODE2IDIwLjMyOTYgMy4zMTU4OEMyMC40MjMgMy4zNTM2IDIwLjUwNzggMy40MDk3NCAyMC41NzkgMy40ODA5NkMyMC42NTAzIDMuNTUyMTggMjAuNzA2NCAzLjYzNzAxIDIwLjc0NDEgMy43MzA0QzIwLjc4MTggMy44MjM3OSAyMC44MDA0IDMuOTIzODIgMjAuNzk4NiA0LjAyNDUyQzIwLjc5NjggNC4xMjUyMyAyMC43NzQ4IDQuMjI0NTQgMjAuNzMzOCA0LjMxNjU0QzIwLjY5MjggNC40MDg1NCAyMC42MzM3IDQuNDkxMzQgMjAuNTYgNC41NkwxNCAxMUMxMy44NzI0IDExLjE0NTUgMTMuNjkyOSAxMS4yMzUyIDEzLjUgMTEuMjVaIiBmaWxsPSIjZmZmZmZmIi8%2BIDwvZz4KDTwvc3ZnPg%3D%3D">
+</a>
+</div>
 
-AG Charts Types
+## 📖 Overview
 
-AG Charts is a fully-featured and highly customizable JavaScript charting library. The professional choice for developers building enterprise applications.
+<details>
+  <summary><strong>Table of Contents</strong></summary>
 
-It delivers outstanding performance, has no third-party dependencies and [integrates smoothly with all major JavaScript frameworks](https://charts.ag-grid.com/javascript/supported-frameworks/?utm_source=ag-grid-readme&utm_medium=repository&utm_campaign=github).
+-   [📖 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)
 
-## Examples
+</details>
 
-<a href="https://charts.ag-grid.com/gallery/?utm_source=ag-grid-readme&utm_medium=repository&utm_campaign=github"><picture><source media="(prefers-color-scheme: dark)" srcset="./.github/example-1-dark.png"><source media="(prefers-color-scheme: light)" srcset="./.github/example-1-light.png"><img alt="Images from our gallery" src="./.github/example-1-light.png"></picture></a>
+AG Charts is available in two versions: Community & Enterprise.
 
-## Features
+-   `ag-charts-community` is free, available under the MIT license, and comes with core series types, such as [Pie](https://charts.ag-grid.com/javascript/pie-series/?utm_source=ag-charts-readme&utm_medium=repository&utm_campaign=github), [Area](https://charts.ag-grid.com/javascript/area-series/?utm_source=ag-charts-readme&utm_medium=repository&utm_campaign=github), [Bar](https://charts.ag-grid.com/javascript/bar-series/?utm_source=ag-charts-readme&utm_medium=repository&utm_campaign=github), [Scatter](https://charts.ag-grid.com/javascript/scatter-series/?utm_source=ag-charts-readme&utm_medium=repository&utm_campaign=github) and [Bubble](https://charts.ag-grid.com/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://charts.ag-grid.com/javascript/accessibility/?utm_source=ag-charts-readme&utm_medium=repository&utm_campaign=github), [Tooltips](https://charts.ag-grid.com/javascript/tooltips/?utm_source=ag-charts-readme&utm_medium=repository&utm_campaign=github), [Themes](https://charts.ag-grid.com/javascript/themes/?utm_source=ag-charts-readme&utm_medium=repository&utm_campaign=github), [Markers](https://charts.ag-grid.com/javascript/markers/?utm_source=ag-charts-readme&utm_medium=repository&utm_campaign=github), [Legends](https://charts.ag-grid.com/javascript/legend/?utm_source=ag-charts-readme&utm_medium=repository&utm_campaign=github), [Axis Types](https://charts.ag-grid.com/javascript/axes-types/?utm_source=ag-charts-readme&utm_medium=repository&utm_campaign=github) and [Secondary Axes](https://charts.ag-grid.com/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://charts.ag-grid.com/javascript/maps/?utm_source=ag-charts-readme&utm_medium=repository&utm_campaign=github), [Sankey](https://charts.ag-grid.com/javascript/sankey-series/?utm_source=ag-charts-readme&utm_medium=repository&utm_campaign=github), [Radar](https://charts.ag-grid.com/javascript/radar-area-series/?utm_source=ag-charts-readme&utm_medium=repository&utm_campaign=github), and [Waterfall](https://charts.ag-grid.com/javascript/waterfall-series/?utm_source=ag-charts-readme&utm_medium=repository&utm_campaign=github) Charts as well as advanced interactivity features, like [Animations](https://charts.ag-grid.com/javascript/animation/?utm_source=ag-charts-readme&utm_medium=repository&utm_campaign=github), [Context Menus](https://charts.ag-grid.com/javascript/context-menu/?utm_source=ag-charts-readme&utm_medium=repository&utm_campaign=github), [Zooming](https://charts.ag-grid.com/javascript/zoom/?utm_source=ag-charts-readme&utm_medium=repository&utm_campaign=github), [Navigators](https://charts.ag-grid.com/javascript/navigator/?utm_source=ag-charts-readme&utm_medium=repository&utm_campaign=github), [Synchronization](https://charts.ag-grid.com/javascript/sync/?utm_source=ag-charts-readme&utm_medium=repository&utm_campaign=github) and much more, including [Financial Charts](https://charts.ag-grid.com/javascript/financial-charts/?utm_source=ag-charts-readme&utm_medium=repository&utm_campaign=github).
 
-Here are some of the features that make AG Charts stand out:
+### Features & Chart Types
 
--   Modern, lightweight and performant.
--   Framework agnostic:
-    -   thin reactive wrappers for your chosen framework: React, Angular, Vue;
-    -   or use our plain Javascript API with 1st-class Typescript support.
--   Zero dependencies.
--   Simple & clean declarative configuration.
--   Comprehensive interactive documentation.
+#### Chart Types
 
-<table>
-    <thead>
-        <th colspan="2">
-            Supported Chart Types
-        </th>
-        <th colspan="2">
-            Advanced Features
-        </th>
-    </thead>
-    <tbody>
-        <tr>
-            <td>
-                <a href="https://charts.ag-grid.com/javascript/line-series/?utm_source=ag-charts-readme&utm_medium=repository&utm_campaign=github">Line</a>, <a href="https://charts.ag-grid.com/javascript/bar-series/?utm_source=ag-charts-readme&utm_medium=repository&utm_campaign=github">Bar</a> & <a href="https://charts.ag-grid.com/javascript/area-series/?utm_source=ag-charts-readme&utm_medium=repository&utm_campaign=github">Area</a><br/>
-                <a href="https://charts.ag-grid.com/javascript/scatter-series/?utm_source=ag-charts-readme&utm_medium=repository&utm_campaign=github">Scatter</a> & <a href="https://charts.ag-grid.com/javascript/bubble-series/?utm_source=ag-charts-readme&utm_medium=repository&utm_campaign=github">Bubble</a><br/>
-                <a href="https://charts.ag-grid.com/javascript/pie-series/?utm_source=ag-charts-readme&utm_medium=repository&utm_campaign=github">Pie</a> & <a href="https://charts.ag-grid.com/javascript/donut-series/?utm_source=ag-charts-readme&utm_medium=repository&utm_campaign=github">Donut</a><br/>
-                <a href="https://charts.ag-grid.com/javascript/histogram-series/?utm_source=ag-charts-readme&utm_medium=repository&utm_campaign=github">Histogram</a>*<br/>
-                <a href="https://charts.ag-grid.com/javascript/maps/?utm_source=ag-charts-readme&utm_medium=repository&utm_campaign=github">Map</a>*<br/>
-                <a href="https://charts.ag-grid.com/javascript/candlestick-series/?utm_source=ag-charts-readme&utm_medium=repository&utm_campaign=github">Candlestick</a> & <a href="https://charts.ag-grid.com/javascript/ohlc-series/?utm_source=ag-charts-readme&utm_medium=repository&utm_campaign=github">OHLC</a>*<br/>
-                <a href="https://charts.ag-grid.com/javascript/box-plot-series/?utm_source=ag-charts-readme&utm_medium=repository&utm_campaign=github">Box Plot</a>*<br/>
-            </td>
-            <td>
-                <a href="https://charts.ag-grid.com/javascript/heatmap-series/?utm_source=ag-charts-readme&utm_medium=repository&utm_campaign=github">Heatmap</a>*<br/>
-                <a href="https://charts.ag-grid.com/javascript/nightingale-series/?utm_source=ag-charts-readme&utm_medium=repository&utm_campaign=github">Nightingale</a>*<br/>
-                <a href="https://charts.ag-grid.com/javascript/range-bar-series/?utm_source=ag-charts-readme&utm_medium=repository&utm_campaign=github">Range Bar</a>* & <a href="https://charts.ag-grid.com/javascript/range-area-series/?utm_source=ag-charts-readme&utm_medium=repository&utm_campaign=github">Range Area</a>*<br/>
-                <a href="https://charts.ag-grid.com/javascript/radar-area-series/?utm_source=ag-charts-readme&utm_medium=repository&utm_campaign=github">Radar Area</a>* & <a href="https://charts.ag-grid.com/javascript/radar-line-series/?utm_source=ag-charts-readme&utm_medium=repository&utm_campaign=github">Radar Line</a>*<br/>
-                <a href="https://charts.ag-grid.com/javascript/radial-bar-series/?utm_source=ag-charts-readme&utm_medium=repository&utm_campaign=github">Radial Bar</a>* & <a href="https://charts.ag-grid.com/javascript/radial-column-series/?utm_source=ag-charts-readme&utm_medium=repository&utm_campaign=github">Radial Column</a>*<br/>
-                <a href="https://charts.ag-grid.com/javascript/sunburst-series/?utm_source=ag-charts-readme&utm_medium=repository&utm_campaign=github">Sunburst*</a> & <a href="https://charts.ag-grid.com/javascript/treemap-series/?utm_source=ag-charts-readme&utm_medium=repository&utm_campaign=github">Treemap</a>*<br/>
-                <a href="https://charts.ag-grid.com/javascript/bullet-series/?utm_source=ag-charts-readme&utm_medium=repository&utm_campaign=github">Bullet</a>*<br/>
-            </td>
-            <td>
-                <a href="https://charts.ag-grid.com/javascript/animation/?utm_source=ag-charts-readme&utm_medium=repository&utm_campaign=github">Animation</a>*<br/>
-                <a href="https://charts.ag-grid.com/javascript/accessibility/?utm_source=ag-charts-readme&utm_medium=repository&utm_campaign=github">Accessibility</a><br/>
-                <a href="https://charts.ag-grid.com/javascript/sync/?utm_source=ag-charts-readme&utm_medium=repository&utm_campaign=github">Synchronized Charts</a>*<br/>
-                <a href="https://charts.ag-grid.com/javascript/context-menu/?utm_source=ag-charts-readme&utm_medium=repository&utm_campaign=github">Context Menu</a>*<br/>
-                <a href="https://charts.ag-grid.com/javascript/axes-crosshairs/?utm_source=ag-charts-readme&utm_medium=repository&utm_campaign=github">Crosshairs</a>*<br/>
-                <a href="https://charts.ag-grid.com/javascript/axes-cross-lines/?utm_source=ag-charts-readme&utm_medium=repository&utm_campaign=github">Cross Lines </a><br/>
-                <a href="https://charts.ag-grid.com/javascript/error-bars/?utm_source=ag-charts-readme&utm_medium=repository&utm_campaign=github">Error Bars</a>*<br/>
-            </td>
-            <td>
-                <a href="https://charts.ag-grid.com/javascript/themes/?utm_source=ag-charts-readme&utm_medium=repository&utm_campaign=github">Theming</a><br/>
-                <a href="https://charts.ag-grid.com/javascript/zoom/?utm_source=ag-charts-readme&utm_medium=repository&utm_campaign=github">Zoom</a>*<br/>
-                <br/>
-                <br/>
-                <br/>
-                <br/>
-                <br/>
-            </td>
-        </tr>
-    </tbody>
-</table>
-<br/>
+AG Charts offers 20+ Types Chart types, each of which are fully customisable:
 
-\* These are available in the [Enterprise version](https://charts.ag-grid.com/license-pricing/?utm_source=ag-grid-readme&utm_medium=repository&utm_campaign=github) only.
+| Chart Type                                                                                                                                         | AG Charts Community | AG Charts Enterprise |
+| -------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------- | -------------------- |
+| [Bar](https://charts.ag-grid.com/javascript/bar-series/?utm_source=ag-charts-readme&utm_medium=repository&utm_campaign=github)                     | ✅                  | ✅                   |
+| [Line](https://charts.ag-grid.com/javascript/line-series/?utm_source=ag-charts-readme&utm_medium=repository&utm_campaign=github)                   | ✅                  | ✅                   |
+| [Area](https://charts.ag-grid.com/javascript/area-series/?utm_source=ag-charts-readme&utm_medium=repository&utm_campaign=github)                   | ✅                  | ✅                   |
+| [Scatter](https://charts.ag-grid.com/javascript/scatter-series/?utm_source=ag-charts-readme&utm_medium=repository&utm_campaign=github)             | ✅                  | ✅                   |
+| [Bubble](https://charts.ag-grid.com/javascript/bubble-series/?utm_source=ag-charts-readme&utm_medium=repository&utm_campaign=github)               | ✅                  | ✅                   |
+| [Pie](https://charts.ag-grid.com/javascript/pie-series/?utm_source=ag-charts-readme&utm_medium=repository&utm_campaign=github)                     | ✅                  | ✅                   |
+| [Donut](https://charts.ag-grid.com/javascript/donut-series/?utm_source=ag-charts-readme&utm_medium=repository&utm_campaign=github)                 | ✅                  | ✅                   |
+| [Combination](https://charts.ag-grid.com/javascript/combination-series/?utm_source=ag-charts-readme&utm_medium=repository&utm_campaign=github)     | ✅                  | ✅                   |
+| [Box Plot](https://charts.ag-grid.com/javascript/box-plot-series/?utm_source=ag-charts-readme&utm_medium=repository&utm_campaign=github)           | ❌                  | ✅                   |
+| [Bullet](https://charts.ag-grid.com/javascript/bullet-series/?utm_source=ag-charts-readme&utm_medium=repository&utm_campaign=github)               | ❌                  | ✅                   |
+| [Candlestick](https://charts.ag-grid.com/javascript/candlestick-series/?utm_source=ag-charts-readme&utm_medium=repository&utm_campaign=github)     | ❌                  | ✅                   |
+| [OHLC](https://charts.ag-grid.com/javascript/ohlc-series/?utm_source=ag-charts-readme&utm_medium=repository&utm_campaign=github)                   | ❌                  | ✅                   |
+| [Heatmap](https://charts.ag-grid.com/javascript/heatmap-series/?utm_source=ag-charts-readme&utm_medium=repository&utm_campaign=github)             | ❌                  | ✅                   |
+| [Histogram](https://charts.ag-grid.com/javascript/histogram-series/?utm_source=ag-charts-readme&utm_medium=repository&utm_campaign=github)         | ❌                  | ✅                   |
+| [Nightingale](https://charts.ag-grid.com/javascript/nightingale-series/?utm_source=ag-charts-readme&utm_medium=repository&utm_campaign=github)     | ❌                  | ✅                   |
+| [Radar Line](https://charts.ag-grid.com/javascript/radar-line-series/?utm_source=ag-charts-readme&utm_medium=repository&utm_campaign=github)       | ❌                  | ✅                   |
+| [Radar Area](https://charts.ag-grid.com/javascript/radar-area-series/?utm_source=ag-charts-readme&utm_medium=repository&utm_campaign=github)       | ❌                  | ✅                   |
+| [Radial Column](https://charts.ag-grid.com/javascript/radial-column-series/?utm_source=ag-charts-readme&utm_medium=repository&utm_campaign=github) | ❌                  | ✅                   |
+| [Radial Bar](https://charts.ag-grid.com/javascript/radial-bar-series/?utm_source=ag-charts-readme&utm_medium=repository&utm_campaign=github)       | ❌                  | ✅                   |
+| [Range Area](https://charts.ag-grid.com/javascript/range-area-series/?utm_source=ag-charts-readme&utm_medium=repository&utm_campaign=github)       | ❌                  | ✅                   |
+| [Range Bar](https://charts.ag-grid.com/javascript/range-bar-series/?utm_source=ag-charts-readme&utm_medium=repository&utm_campaign=github)         | ❌                  | ✅                   |
+| [Sunburst](https://charts.ag-grid.com/javascript/sunburst-series/?utm_source=ag-charts-readme&utm_medium=repository&utm_campaign=github)           | ❌                  | ✅                   |
+| [Treemap](https://charts.ag-grid.com/javascript/treemap-series/?utm_source=ag-charts-readme&utm_medium=repository&utm_campaign=github)             | ❌                  | ✅                   |
+| [Waterfall](https://charts.ag-grid.com/javascript/waterfall-series/?utm_source=ag-charts-readme&utm_medium=repository&utm_campaign=github)         | ❌                  | ✅                   |
+| [Sankey](https://charts.ag-grid.com/javascript/sankey-series/?utm_source=ag-charts-readme&utm_medium=repository&utm_campaign=github)               | ❌                  | ✅                   |
+| [Chord](https://charts.ag-grid.com/javascript/chord-series/?utm_source=ag-charts-readme&utm_medium=repository&utm_campaign=github)                 | ❌                  | ✅                   |
 
-Check out the [developer documentation](https://charts.ag-grid.com/javascript/?utm_source=ag-grid-readme&utm_medium=repository&utm_campaign=github) for a complete list of features or visit [our official docs](https://charts.ag-grid.com/?utm_source=ag-grid-readme&utm_medium=repository&utm_campaign=github) for tutorials and feature demos.
+#### Features
 
-## Getting started
+AG Charts Types Charting Library comes with every feature you'd expect:
 
-<!-- START Getting started -->
+| Feature                                                                                                                                                 | AG Charts Community | AG Charts Enterprise |
+| ------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------- | -------------------- |
+| [Accessibility](https://charts.ag-grid.com/javascript/accessibility/?utm_source=ag-charts-readme&utm_medium=repository&utm_campaign=github)             | ✅                  | ✅                   |
+| [Localisation](https://charts.ag-grid.com/javascript/localisation/?utm_source=ag-charts-readme&utm_medium=repository&utm_campaign=github)               | ✅                  | ✅                   |
+| [Series Highlighting](https://charts.ag-grid.com/javascript/series-highlighting/?utm_source=ag-charts-readme&utm_medium=repository&utm_campaign=github) | ✅                  | ✅                   |
+| [Tooltips](https://charts.ag-grid.com/javascript/tooltips/?utm_source=ag-charts-readme&utm_medium=repository&utm_campaign=github)                       | ✅                  | ✅                   |
+| [Animations](https://charts.ag-grid.com/javascript/animation/?utm_source=ag-charts-readme&utm_medium=repository&utm_campaign=github)                    | ❌                  | ✅                   |
+| [Context Menu](https://charts.ag-grid.com/javascript/context-menu/?utm_source=ag-charts-readme&utm_medium=repository&utm_campaign=github)               | ❌                  | ✅                   |
+| [Crosshairs](https://charts.ag-grid.com/javascript/axes-crosshairs/?utm_source=ag-charts-readme&utm_medium=repository&utm_campaign=github)              | ❌                  | ✅                   |
+| [Navigator](https://charts.ag-grid.com/javascript/navigator/?utm_source=ag-charts-readme&utm_medium=repository&utm_campaign=github)                     | ❌                  | ✅                   |
+| [Synchronization](https://charts.ag-grid.com/javascript/sync/?utm_source=ag-charts-readme&utm_medium=repository&utm_campaign=github)                    | ❌                  | ✅                   |
+| [Zoom](https://charts.ag-grid.com/javascript/zoom/?utm_source=ag-charts-readme&utm_medium=repository&utm_campaign=github)                               | ❌                  | ✅                   |
 
-Get started with [React](https://charts.ag-grid.com/react/quick-start/?utm_source=ag-charts-readme&utm_medium=repository&utm_campaign=github) / [Angular](https://charts.ag-grid.com/angular/quick-start/?utm_source=ag-charts-readme&utm_medium=repository&utm_campaign=github) / [Vue](https://charts.ag-grid.com/vue/quick-start/?utm_source=ag-charts-readme&utm_medium=repository&utm_campaign=github) / [Javascript](https://charts.ag-grid.com/javascript/quick-start/?utm_source=ag-charts-readme&utm_medium=repository&utm_campaign=github).
+> [!IMPORTANT]
+> Visit the [Pricing](https://charts.ag-grid.com/license-pricing/?utm_source=ag-charts-readme&utm_medium=repository&utm_campaign=github) page for a full comparison.
 
-Installation for [React](https://charts.ag-grid.com/react/installation/) / [Angular](https://charts.ag-grid.com/angular/installation/) / [Vue](https://charts.ag-grid.com/vue/installation/) / [Javascript](https://charts.ag-grid.com/javascript/installation/).
+### Financial Charts
 
-<!-- END Getting started -->
+Build interactive financial charts featuring advanced annotations with minimal configuration, all you need to do is provide your data:
 
-## Issue Reporting
+<!-- START FINANCIAL CHARTS CODE SNIPPET -->
 
-If you have found a bug, please report it in this repository's [issues](https://github.com/ag-grid/ag-charts/issues) section. If you're using the Enterprise version, please use the [private ticketing](https://ag-grid.zendesk.com/) system to do that.
+```js
+const options = {
+    data: getData(),
+};
 
-## Asking Questions
+AgCharts.createFinancialChart(options);
+```
 
-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. If you're using the Enterprise version, please use the [private ticketing](https://ag-grid.zendesk.com/) system to do that.
+<!-- END FINANCIAL CHARTS CODE SNIPPET -->
 
-## Contributing
+Once created, users will have a Financial Chart that they can interact with and add annotations to.
 
+<picture>
+    <source media="(prefers-color-scheme: dark)" srcset="https://github.com/ag-grid/ag-charts/blob/latest/packages/ag-charts-website/public/images/readme-assets/financial-charts-annotations.gif?raw=true"/>
+    <source media="(prefers-color-scheme: light)" srcset="https://github.com/ag-grid/ag-charts/blob/latest/packages/ag-charts-website/public/images/readme-assets/financial-charts-annotations-light.gif?raw=true"/>
+    <img width="100%" alt="Financial Charts Annotations" src="https://github.com/ag-grid/ag-charts/blob/latest/packages/ag-charts-website/public/images/readme-assets/financial-charts-annotations.gif?raw=true"/>
+    <br>
+</picture>
+
+The default chart type is [Candlestick](https://charts.ag-grid.com/javascript/candlestick-series/?utm_source=ag-charts-readme&utm_medium=repository&utm_campaign=github), with additional types like [OHLC](https://charts.ag-grid.com/javascript/ohlc-series/?utm_source=ag-charts-readme&utm_medium=repository&utm_campaign=github) and [Line](https://charts.ag-grid.com/javascript/line-series/?utm_source=ag-charts-readme&utm_medium=repository&utm_campaign=github) for versatile data visualisation.
+
+<div align="right">
+    <a href="https://charts.ag-grid.com/javascript/financial-charts/"><br><img alt="Static Badge" src="https://img.shields.io/badge/Learn More-blue?style=for-the-badge&logo=data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4KDTwhLS0gVXBsb2FkZWQgdG86IFNWRyBSZXBvLCB3d3cuc3ZncmVwby5jb20sIFRyYW5zZm9ybWVkIGJ5OiBTVkcgUmVwbyBNaXhlciBUb29scyAtLT4KPHN2ZyB3aWR0aD0iODAwcHgiIGhlaWdodD0iODAwcHgiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KDTxnIGlkPSJTVkdSZXBvX2JnQ2FycmllciIgc3Ryb2tlLXdpZHRoPSIwIi8%2BCg08ZyBpZD0iU1ZHUmVwb190cmFjZXJDYXJyaWVyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KDTxnIGlkPSJTVkdSZXBvX2ljb25DYXJyaWVyIj4gPHBhdGggZD0iTTE4IDIwLjc1SDZDNS4yNzA2NSAyMC43NSA0LjU3MTE4IDIwLjQ2MDMgNC4wNTU0NiAxOS45NDQ1QzMuNTM5NzMgMTkuNDI4OCAzLjI1IDE4LjcyOTMgMy4yNSAxOFY2QzMuMjUgNS4yNzA2NSAzLjUzOTczIDQuNTcxMTggNC4wNTU0NiA0LjA1NTQ2QzQuNTcxMTggMy41Mzk3MyA1LjI3MDY1IDMuMjUgNiAzLjI1SDEyQzEyLjE5ODkgMy4yNSAxMi4zODk3IDMuMzI5MDIgMTIuNTMwMyAzLjQ2OTY3QzEyLjY3MSAzLjYxMDMyIDEyLjc1IDMuODAxMDkgMTIuNzUgNEMxMi43NSA0LjE5ODkxIDEyLjY3MSA0LjM4OTY4IDEyLjUzMDMgNC41MzAzM0MxMi4zODk3IDQuNjcwOTggMTIuMTk4OSA0Ljc1IDEyIDQuNzVINkM1LjY2ODQ4IDQuNzUgNS4zNTA1NCA0Ljg4MTcgNS4xMTYxMiA1LjExNjEyQzQuODgxNyA1LjM1MDU0IDQuNzUgNS42Njg0OCA0Ljc1IDZWMThDNC43NSAxOC4zMzE1IDQuODgxNyAxOC42NDk1IDUuMTE2MTIgMTguODgzOUM1LjM1MDU0IDE5LjExODMgNS42Njg0OCAxOS4yNSA2IDE5LjI1SDE4QzE4LjMzMTUgMTkuMjUgMTguNjQ5NSAxOS4xMTgzIDE4Ljg4MzkgMTguODgzOUMxOS4xMTgzIDE4LjY0OTUgMTkuMjUgMTguMzMxNSAxOS4yNSAxOFYxMkMxOS4yNSAxMS44MDExIDE5LjMyOSAxMS42MTAzIDE5LjQ2OTcgMTEuNDY5N0MxOS42MTAzIDExLjMyOSAxOS44MDExIDExLjI1IDIwIDExLjI1QzIwLjE5ODkgMTEuMjUgMjAuMzg5NyAxMS4zMjkgMjAuNTMwMyAxMS40Njk3QzIwLjY3MSAxMS42MTAzIDIwLjc1IDExLjgwMTEgMjAuNzUgMTJWMThDMjAuNzUgMTguNzI5MyAyMC40NjAzIDE5LjQyODggMTkuOTQ0NSAxOS45NDQ1QzE5LjQyODggMjAuNDYwMyAxOC43MjkzIDIwLjc1IDE4IDIwLjc1WiIgZmlsbD0iI2ZmZmZmZiIvPiA8cGF0aCBkPSJNMjAgOC43NUMxOS44MDE5IDguNzQ3NDEgMTkuNjEyNiA4LjY2NzU2IDE5LjQ3MjUgOC41Mjc0N0MxOS4zMzI0IDguMzg3MzcgMTkuMjUyNiA4LjE5ODExIDE5LjI1IDhWNC43NUgxNkMxNS44MDExIDQuNzUgMTUuNjEwMyA0LjY3MDk4IDE1LjQ2OTcgNC41MzAzM0MxNS4zMjkgNC4zODk2OCAxNS4yNSA0LjE5ODkxIDE1LjI1IDRDMTUuMjUgMy44MDEwOSAxNS4zMjkgMy42MTAzMiAxNS40Njk3IDMuNDY5NjdDMTUuNjEwMyAzLjMyOTAyIDE1LjgwMTEgMy4yNSAxNiAzLjI1SDIwQzIwLjE5ODEgMy4yNTI1OSAyMC4zODc0IDMuMzMyNDQgMjAuNTI3NSAzLjQ3MjUzQzIwLjY2NzYgMy42MTI2MyAyMC43NDc0IDMuODAxODkgMjAuNzUgNFY4QzIwLjc0NzQgOC4xOTgxMSAyMC42Njc2IDguMzg3MzcgMjAuNTI3NSA4LjUyNzQ3QzIwLjM4NzQgOC42Njc1NiAyMC4xOTgxIDguNzQ3NDEgMjAgOC43NVoiIGZpbGw9IiNmZmZmZmYiLz4gPHBhdGggZD0iTTEzLjUgMTEuMjVDMTMuMzA3MSAxMS4yMzUyIDEzLjEyNzYgMTEuMTQ1NSAxMyAxMUMxMi44NzcgMTAuODYyNSAxMi44MDkgMTAuNjg0NSAxMi44MDkgMTAuNUMxMi44MDkgMTAuMzE1NSAxMi44NzcgMTAuMTM3NSAxMyAxMEwxOS41IDMuNUMxOS41Njg3IDMuNDI2MzEgMTkuNjUxNSAzLjM2NzIxIDE5Ljc0MzUgMy4zMjYyMkMxOS44MzU1IDMuMjg1MjMgMTkuOTM0OCAzLjI2MzE5IDIwLjAzNTUgMy4yNjE0MUMyMC4xMzYyIDMuMjU5NjMgMjAuMjM2MiAzLjI3ODE2IDIwLjMyOTYgMy4zMTU4OEMyMC40MjMgMy4zNTM2IDIwLjUwNzggMy40MDk3NCAyMC41NzkgMy40ODA5NkMyMC42NTAzIDMuNTUyMTggMjAuNzA2NCAzLjYzNzAxIDIwLjc0NDEgMy43MzA0QzIwLjc4MTggMy44MjM3OSAyMC44MDA0IDMuOTIzODIgMjAuNzk4NiA0LjAyNDUyQzIwLjc5NjggNC4xMjUyMyAyMC43NzQ4IDQuMjI0NTQgMjAuNzMzOCA0LjMxNjU0QzIwLjY5MjggNC40MDg1NCAyMC42MzM3IDQuNDkxMzQgMjAuNTYgNC41NkwxNCAxMUMxMy44NzI0IDExLjE0NTUgMTMuNjkyOSAxMS4yMzUyIDEzLjUgMTEuMjVaIiBmaWxsPSIjZmZmZmZmIi8%2BIDwvZz4KDTwvc3ZnPg%3D%3D"></a>
+</div>
+
+---
+
+### Maps
+
+The Maps Series let you visualise geographic data in different ways.
+
+<picture>
+    <source media="(prefers-color-scheme: dark)" srcset="https://github.com/ag-grid/ag-charts/blob/latest/packages/ag-charts-website/public/images/readme-assets/map-dark.gif?raw=true"/>
+    <source media="(prefers-color-scheme: light)" srcset="https://github.com/ag-grid/ag-charts/blob/latest/packages/ag-charts-website/public/images/readme-assets/map.gif?raw=true"/>
+    <img width="100%" alt="Preview of Map Charts from AG Charts" src="https://github.com/ag-grid/ag-charts/blob/latest/packages/ag-charts-website/public/images/readme-assets/map-dark.gif?raw=true"/>
+</picture>
+
+Maps can display data using [Shapes](https://charts.ag-grid.com/javascript/map-shapes/?utm_source=ag-charts-readme&utm_medium=repository&utm_campaign=github), [Lines](https://charts.ag-grid.com/javascript/map-lines/?utm_source=ag-charts-readme&utm_medium=repository&utm_campaign=github) and [Marker](https://charts.ag-grid.com/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,
+    },
+    // ...
+};
+```
+
+<div align="right">
+    <a href="https://charts.ag-grid.com/javascript/maps/"><img alt="Static Badge" src="https://img.shields.io/badge/Learn More-blue?style=for-the-badge&logo=data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4KDTwhLS0gVXBsb2FkZWQgdG86IFNWRyBSZXBvLCB3d3cuc3ZncmVwby5jb20sIFRyYW5zZm9ybWVkIGJ5OiBTVkcgUmVwbyBNaXhlciBUb29scyAtLT4KPHN2ZyB3aWR0aD0iODAwcHgiIGhlaWdodD0iODAwcHgiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KDTxnIGlkPSJTVkdSZXBvX2JnQ2FycmllciIgc3Ryb2tlLXdpZHRoPSIwIi8%2BCg08ZyBpZD0iU1ZHUmVwb190cmFjZXJDYXJyaWVyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KDTxnIGlkPSJTVkdSZXBvX2ljb25DYXJyaWVyIj4gPHBhdGggZD0iTTE4IDIwLjc1SDZDNS4yNzA2NSAyMC43NSA0LjU3MTE4IDIwLjQ2MDMgNC4wNTU0NiAxOS45NDQ1QzMuNTM5NzMgMTkuNDI4OCAzLjI1IDE4LjcyOTMgMy4yNSAxOFY2QzMuMjUgNS4yNzA2NSAzLjUzOTczIDQuNTcxMTggNC4wNTU0NiA0LjA1NTQ2QzQuNTcxMTggMy41Mzk3MyA1LjI3MDY1IDMuMjUgNiAzLjI1SDEyQzEyLjE5ODkgMy4yNSAxMi4zODk3IDMuMzI5MDIgMTIuNTMwMyAzLjQ2OTY3QzEyLjY3MSAzLjYxMDMyIDEyLjc1IDMuODAxMDkgMTIuNzUgNEMxMi43NSA0LjE5ODkxIDEyLjY3MSA0LjM4OTY4IDEyLjUzMDMgNC41MzAzM0MxMi4zODk3IDQuNjcwOTggMTIuMTk4OSA0Ljc1IDEyIDQuNzVINkM1LjY2ODQ4IDQuNzUgNS4zNTA1NCA0Ljg4MTcgNS4xMTYxMiA1LjExNjEyQzQuODgxNyA1LjM1MDU0IDQuNzUgNS42Njg0OCA0Ljc1IDZWMThDNC43NSAxOC4zMzE1IDQuODgxNyAxOC42NDk1IDUuMTE2MTIgMTguODgzOUM1LjM1MDU0IDE5LjExODMgNS42Njg0OCAxOS4yNSA2IDE5LjI1SDE4QzE4LjMzMTUgMTkuMjUgMTguNjQ5NSAxOS4xMTgzIDE4Ljg4MzkgMTguODgzOUMxOS4xMTgzIDE4LjY0OTUgMTkuMjUgMTguMzMxNSAxOS4yNSAxOFYxMkMxOS4yNSAxMS44MDExIDE5LjMyOSAxMS42MTAzIDE5LjQ2OTcgMTEuNDY5N0MxOS42MTAzIDExLjMyOSAxOS44MDExIDExLjI1IDIwIDExLjI1QzIwLjE5ODkgMTEuMjUgMjAuMzg5NyAxMS4zMjkgMjAuNTMwMyAxMS40Njk3QzIwLjY3MSAxMS42MTAzIDIwLjc1IDExLjgwMTEgMjAuNzUgMTJWMThDMjAuNzUgMTguNzI5MyAyMC40NjAzIDE5LjQyODggMTkuOTQ0NSAxOS45NDQ1QzE5LjQyODggMjAuNDYwMyAxOC43MjkzIDIwLjc1IDE4IDIwLjc1WiIgZmlsbD0iI2ZmZmZmZiIvPiA8cGF0aCBkPSJNMjAgOC43NUMxOS44MDE5IDguNzQ3NDEgMTkuNjEyNiA4LjY2NzU2IDE5LjQ3MjUgOC41Mjc0N0MxOS4zMzI0IDguMzg3MzcgMTkuMjUyNiA4LjE5ODExIDE5LjI1IDhWNC43NUgxNkMxNS44MDExIDQuNzUgMTUuNjEwMyA0LjY3MDk4IDE1LjQ2OTcgNC41MzAzM0MxNS4zMjkgNC4zODk2OCAxNS4yNSA0LjE5ODkxIDE1LjI1IDRDMTUuMjUgMy44MDEwOSAxNS4zMjkgMy42MTAzMiAxNS40Njk3IDMuNDY5NjdDMTUuNjEwMyAzLjMyOTAyIDE1LjgwMTEgMy4yNSAxNiAzLjI1SDIwQzIwLjE5ODEgMy4yNTI1OSAyMC4zODc0IDMuMzMyNDQgMjAuNTI3NSAzLjQ3MjUzQzIwLjY2NzYgMy42MTI2MyAyMC43NDc0IDMuODAxODkgMjAuNzUgNFY4QzIwLjc0NzQgOC4xOTgxMSAyMC42Njc2IDguMzg3MzcgMjAuNTI3NSA4LjUyNzQ3QzIwLjM4NzQgOC42Njc1NiAyMC4xOTgxIDguNzQ3NDEgMjAgOC43NVoiIGZpbGw9IiNmZmZmZmYiLz4gPHBhdGggZD0iTTEzLjUgMTEuMjVDMTMuMzA3MSAxMS4yMzUyIDEzLjEyNzYgMTEuMTQ1NSAxMyAxMUMxMi44NzcgMTAuODYyNSAxMi44MDkgMTAuNjg0NSAxMi44MDkgMTAuNUMxMi44MDkgMTAuMzE1NSAxMi44NzcgMTAuMTM3NSAxMyAxMEwxOS41IDMuNUMxOS41Njg3IDMuNDI2MzEgMTkuNjUxNSAzLjM2NzIxIDE5Ljc0MzUgMy4zMjYyMkMxOS44MzU1IDMuMjg1MjMgMTkuOTM0OCAzLjI2MzE5IDIwLjAzNTUgMy4yNjE0MUMyMC4xMzYyIDMuMjU5NjMgMjAuMjM2MiAzLjI3ODE2IDIwLjMyOTYgMy4zMTU4OEMyMC40MjMgMy4zNTM2IDIwLjUwNzggMy40MDk3NCAyMC41NzkgMy40ODA5NkMyMC42NTAzIDMuNTUyMTggMjAuNzA2NCAzLjYzNzAxIDIwLjc0NDEgMy43MzA0QzIwLjc4MTggMy44MjM3OSAyMC44MDA0IDMuOTIzODIgMjAuNzk4NiA0LjAyNDUyQzIwLjc5NjggNC4xMjUyMyAyMC43NzQ4IDQuMjI0NTQgMjAuNzMzOCA0LjMxNjU0QzIwLjY5MjggNC40MDg1NCAyMC42MzM3IDQuNDkxMzQgMjAuNTYgNC41NkwxNCAxMUMxMy44NzI0IDExLjE0NTUgMTMuNjkyOSAxMS4yMzUyIDEzLjUgMTEuMjVaIiBmaWxsPSIjZmZmZmZmIi8%2BIDwvZz4KDTwvc3ZnPg%3D%3D"></a>
+</div>
+
+## ⚡️ Quick Start
+
+<!-- START QUICK START DESCRIPTION -->
+
+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 <strong><a href="https://github.com/ag-grid/ag-charts/tree/latest/packages/ag-charts-react"><img src="https://github.com/ag-grid/ag-grid/blob/latest/documentation/ag-grid-docs/public/images/fw-logos/react.svg?raw=true" height="16" width="16" alt="React Logo"> React</a></strong>, <strong><a href="https://github.com/ag-grid/ag-charts/tree/latest/packages/ag-charts-angular"><img src="https://github.com/ag-grid/ag-grid/blob/latest/documentation/ag-grid-docs/public/images/fw-logos/angular.svg?raw=true" height="16" width="16" alt="Angular Logo"> Angular</a></strong> and <strong><a href="https://github.com/ag-grid/ag-charts/tree/latest/packages/ag-charts-vue3"><img src="https://github.com/ag-grid/ag-grid/blob/latest/documentation/ag-grid-docs/public/images/fw-logos/vue.svg?raw=true" height="16" width="16" alt="Vue Logo"> Vue</a></strong>.
+
+<!-- END QUICK START DESCRIPTION -->
+
+### Installation
+
+```sh
+$ npm install ag-charts-types
+```
+
+### Setup
+
+<!-- START SETUP -->
+
+1. Provide a Container
+
+```html
+<!doctype html>
+<html lang="en">
+    <head>
+        <title>AG Charts Quick Start</title>
+        <!--  Types Charts Core Library -->
+        <script src="https://cdn.jsdelivr.net/npm/ag-charts-types/dist/umd/ag-charts-types.js"></script>
+    </head>
+    <body>
+        <!-- Container for Chart -->
+        <div id="myChart"></div>
+        <!-- Charts configuration file -->
+        <script src="index.js"></script>
+    </body>
+</html>
+```
+
+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' }],
+};
+```
+
+<!-- END SETUP -->
+
+> [!IMPORTANT]
+> For more information on building Types Charts with AG Charts, refer to our [Documentation](https://charts.ag-grid.com/javascript/quick-start/?utm_source=ag-charts-readme&utm_medium=repository&utm_campaign=github).
+
+## 🤝 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.
+
+<img src="https://img.shields.io/github/issues-closed/ag-grid/ag-charts?style=for-the-badge&color=%233d8c40" alt="GitHub Issues" height="26">
+
+### 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.
+
+<img src="https://img.shields.io/stackexchange/stackoverflow.com/t/ag-charts?style=for-the-badge&color=%233d8c40" alt="Stack Exchange questions" height="26">
+
+### 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 [e-mail].
 
-## License
+## ⚠️ License
 
-This project is licensed under the MIT license. See the [LICENSE file](./LICENSE.txt) for more info.
+`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.
+
+<div><h2><img vertical-align="middle" width="32" height="32" src="https://github.com/ag-grid/ag-grid/blob/latest/documentation/ag-grid-docs/public/images/ag-logos/svg-logos/AG-BrandMark_Light-Theme.svg?raw=true" alt="AG ChartsLogo">AG Grid</h2></div>
+
+<p>AG Grid is our flagship product, a <strong>fully-featured</strong> and <strong>highly customizable</strong>  Types Data Grid. It delivers <strong>outstanding performance</strong>, has <strong>no third-party dependencies</strong> and comes with support for <strong><a href="https://github.com/ag-grid/ag-grid/tree/latest/packages/ag-grid-react"><img src="https://github.com/ag-grid/ag-grid/blob/latest/documentation/ag-grid-docs/public/images/fw-logos/react.svg?raw=true" height="16" width="16" alt="React Logo"> React</a></strong>, <strong><a href="https://github.com/ag-grid/ag-grid/tree/latest/packages/ag-grid-angular"><img src="https://github.com/ag-grid/ag-grid/blob/latest/documentation/ag-grid-docs/public/images/fw-logos/angular.svg?raw=true" height="16" width="16" alt="Angular Logo"> Angular</a></strong> and <strong><a href="https://github.com/ag-grid/ag-grid/tree/latest/packages/ag-grid-vue3"><img src="https://github.com/ag-grid/ag-grid/blob/latest/documentation/ag-grid-docs/public/images/fw-logos/vue.svg?raw=true" height="16" width="16" alt="Vue Logo"> Vue</a></strong>.</p>
+
+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)
+
+<div align="center">
+    
+<hr/>
+
+<strong>Follow us to keep up to date with all the latest news from AG Grid:</strong>
+
+<a href="https://x.com/ag_grid"><img src="https://img.shields.io/badge/-X%20(Twitter)-black?style=for-the-badge&logo=x" alt="Twitter Badge" height="36"></a>
+<a href="https://www.linkedin.com/company/ag-grid/"><img src="https://img.shields.io/badge/-LinkedIn-blue?style=for-the-badge&logo=linkedin" alt="LinkedIn Badge" height="36"></a>
+<a href="https://www.youtube.com/c/ag-grid"><img src="https://img.shields.io/badge/-YouTube-red?style=for-the-badge&logo=youtube" alt="YouTube Badge" height="36"></a>
+<a href="https://blog.ag-grid.com"><img src="https://img.shields.io/badge/-Blog-grey?style=for-the-badge&logo=rss" alt="Blog Badge" height="36"></a>
+
+</div>

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

284163

increased by12.64%

Lines of code

4533

increased by3.52%

Number of lines in readme file

328

increased by190.27%

No dependency changes