ag-charts-enterprise - npm Package Compare versions

Comparing version 10.0.2 to 10.1.0

dist/types/src/axes/angle/angleAxis.d.ts

@@ -21,2 +21,3 @@ import type { AgAngleAxisLabelOrientation, _Scale } from 'ag-charts-community';
 export declare abstract class AngleAxis<TDomain, TScale extends _Scale.Scale<TDomain, any>> extends _ModuleSupport.PolarAxis<TScale> {
+    protected static CrossLineConstructor: new () => _ModuleSupport.CrossLine<any>;
     startAngle: number;
@@ -29,3 +30,2 @@ endAngle: number | undefined;
     get direction(): _ModuleSupport.ChartAxisDirection;
-    protected assignCrossLineArrayConstructor(crossLines: _ModuleSupport.CrossLine[]): void;
     protected createLabel(): AngleAxisLabel;
@@ -32,0 +32,0 @@ update(): number;

dist/types/src/axes/polar-crosslines/polarCrossLine.d.ts

 import type { AgBaseCrossLineLabelOptions, FontStyle, FontWeight, _Scale } from 'ag-charts-community';
 import { _ModuleSupport, _Scene } from 'ag-charts-community';
-export declare class PolarCrossLineLabel implements AgBaseCrossLineLabelOptions {
+declare const BaseProperties: typeof _ModuleSupport.BaseProperties;
+export declare class PolarCrossLineLabel extends BaseProperties implements AgBaseCrossLineLabelOptions {
     enabled?: boolean;
@@ -20,3 +21,3 @@ text?: string;
 }
-export declare abstract class PolarCrossLine implements _ModuleSupport.CrossLine {
+export declare abstract class PolarCrossLine extends BaseProperties implements _ModuleSupport.CrossLine {
     protected static readonly LINE_LAYER_ZINDEX = _ModuleSupport.Layers.SERIES_CROSSLINE_LINE_ZINDEX;
@@ -52,3 +53,3 @@ protected static readonly RANGE_LAYER_ZINDEX = _ModuleSupport.Layers.SERIES_CROSSLINE_RANGE_ZINDEX;
     protected setLabelNodeProps(node: _Scene.Text, x: number, y: number, baseline: CanvasTextBaseline, rotation: number): void;
-    calculateLayout(_visible: boolean): _Scene.BBox | undefined;
 }
+export {};

dist/types/src/axes/radius/radiusAxis.d.ts

@@ -8,2 +8,3 @@ import type { _Scale } from 'ag-charts-community';
 export declare abstract class RadiusAxis extends _ModuleSupport.PolarAxis {
+    protected static CrossLineConstructor: new () => _ModuleSupport.CrossLine<any>;
     positionAngle: number;
@@ -14,3 +15,2 @@ protected readonly gridPathGroup: _Scene.Group;
     get direction(): _ModuleSupport.ChartAxisDirection;
-    protected assignCrossLineArrayConstructor(crossLines: _ModuleSupport.CrossLine[]): void;
     protected getAxisTransform(): {
@@ -17,0 +17,0 @@ translationX: number;

dist/types/src/features/annotations/annotationProperties.d.ts

 import { type FontStyle, type FontWeight, type Formatter, type TextAlign, _ModuleSupport } from 'ag-charts-community';
-import type { AnnotationContext } from './annotationTypes';
+import type { AnnotationContext, AnnotationOptionsColorPickerType } from './annotationTypes';
 declare const BaseProperties: typeof _ModuleSupport.BaseProperties;
 type Constructor<T = {}> = new (...args: any[]) => T;
-export declare class AnnotationPoint extends BaseProperties {
+/**************
+ * Components *
+ **************/
+export declare class PointProperties extends BaseProperties {
     x?: string | number | Date;
     y?: number;
 }
-declare const ChannelAnnotationBackground_base: {
+declare const ChannelAnnotationMiddleProperties_base: {
     new (...args: any[]): {
-        fill?: string | undefined;
-        fillOpacity?: number | undefined;
-    };
-} & typeof _ModuleSupport.BaseProperties;
-export declare class ChannelAnnotationBackground extends ChannelAnnotationBackground_base {
-}
-declare const ChannelAnnotationMiddle_base: {
-    new (...args: any[]): {
         stroke?: string | undefined;
@@ -33,5 +28,5 @@ strokeOpacity?: number | undefined;
 } & typeof _ModuleSupport.BaseProperties;
-export declare class ChannelAnnotationMiddle extends ChannelAnnotationMiddle_base {
+export declare class ChannelAnnotationMiddleProperties extends ChannelAnnotationMiddleProperties_base {
 }
-declare const AnnotationHandleProperties_base: {
+declare const AxisLabelProperties_base: {
     new (...args: any[]): {
@@ -52,7 +47,31 @@ stroke?: string | undefined;
     };
+} & {
+    new (...args: any[]): {
+        padding?: number | undefined;
+        textAlign: TextAlign;
+        formatter?: Formatter<AxisLabelFormatterParams> | undefined;
+    };
+} & {
+    new (...args: any[]): {
+        fontStyle?: FontStyle | undefined;
+        fontWeight?: FontWeight | undefined;
+        fontSize: number;
+        fontFamily: string;
+        color?: string | undefined;
+    };
 } & typeof _ModuleSupport.BaseProperties;
-export declare class AnnotationHandleProperties extends AnnotationHandleProperties_base {
+export declare class AxisLabelProperties extends AxisLabelProperties_base {
+    enabled?: boolean;
+    cornerRadius: number;
 }
-declare const AnnotationAxisLabelProperties_base: {
+declare const BackgroundProperties_base: {
     new (...args: any[]): {
+        fill?: string | undefined;
+        fillOpacity?: number | undefined;
+    };
+} & typeof _ModuleSupport.BaseProperties;
+export declare class BackgroundProperties extends BackgroundProperties_base {
+}
+declare const HandleProperties_base: {
+    new (...args: any[]): {
         stroke?: string | undefined;
@@ -72,36 +91,34 @@ strokeOpacity?: number | undefined;
     };
-} & {
-    new (...args: any[]): {
-        padding?: number | undefined;
-        textAlign: TextAlign;
-        fontStyle?: FontStyle | undefined;
-        fontWeight?: FontWeight | undefined;
-        fontSize: number;
-        fontFamily: string;
-        color?: string | undefined;
-        formatter?: Formatter<AnnotationAxisLabelFormatterParams> | undefined;
-    };
 } & typeof _ModuleSupport.BaseProperties;
-export declare class AnnotationAxisLabelProperties extends AnnotationAxisLabelProperties_base {
-    enabled?: boolean;
-    cornerRadius: number;
+export declare class HandleProperties extends HandleProperties_base {
 }
-export declare function Annotation<T extends string, U extends Constructor<_ModuleSupport.BaseProperties>>(_type: T, Parent: U): {
+export interface AxisLabelFormatterParams {
+    readonly value: any;
+}
+/*******************************
+ * Annotations specific mixins *
+ *******************************/
+export declare function Annotation<U extends Constructor<_ModuleSupport.BaseProperties>>(Parent: U): (abstract new (...args: any[]) => {
+    id: string;
+    isValidWithContext(_context: AnnotationContext, warningPrefix: string): boolean;
+    getDefaultColor(colorPickerType: AnnotationOptionsColorPickerType): string | undefined;
+    locked?: boolean | undefined;
+    visible?: boolean | undefined;
+    set(properties: object): any;
+    isValid<TContext = Omit<object, "type">>(this: TContext, warningPrefix?: string | undefined): boolean;
+    toJson<J>(this: J): object;
+}) & U;
+export declare function Line<T extends Constructor>(Parent: T): {
     new (...args: any[]): {
-        id: string;
-        isValidWithContext(_context: AnnotationContext, warningPrefix: string): boolean;
-        locked?: boolean | undefined;
-        visible?: boolean | undefined;
-        set(properties: object): any;
-        isValid<TContext = Omit<object, "type">>(this: TContext, warningPrefix?: string | undefined): boolean;
-        toJson<J>(this: J): object;
+        start: PointProperties;
+        end: PointProperties;
     };
-} & U;
-export declare function AnnotationLine<T extends Constructor>(Parent: T): {
+} & T;
+export declare function Point<T extends Constructor>(Parent: T): {
     new (...args: any[]): {
-        start: AnnotationPoint;
-        end: AnnotationPoint;
+        x?: string | number | Date | undefined;
+        y?: number | undefined;
     };
 } & T;
-export declare function AnnotationCrossLine<T extends Constructor>(Parent: T): {
+export declare function Value<T extends Constructor>(Parent: T): {
     new (...args: any[]): {
@@ -111,17 +128,24 @@ value?: string | number | Date | undefined;
 } & T;
-export declare function ChannelAnnotation<T extends Constructor>(Parent: T): {
+export declare function Background<T extends Constructor>(Parent: T): {
     new (...args: any[]): {
-        background: ChannelAnnotationBackground;
+        background: BackgroundProperties;
     };
 } & T;
-export declare function AnnotationHandle<T extends Constructor>(Parent: T): {
+export declare function Handle<T extends Constructor>(Parent: T): {
     new (...args: any[]): {
-        handle: AnnotationHandleProperties;
+        handle: HandleProperties;
     };
 } & T;
-export declare function AnnotationAxisLabel<T extends Constructor>(Parent: T): {
+export declare function AxisLabel<T extends Constructor>(Parent: T): {
     new (...args: any[]): {
-        axisLabel: AnnotationAxisLabelProperties;
+        axisLabel: AxisLabelProperties;
     };
 } & T;
+export declare function Label<T extends Constructor>(Parent: T): {
+    new (...args: any[]): {
+        padding?: number | undefined;
+        textAlign: TextAlign;
+        formatter?: Formatter<AxisLabelFormatterParams> | undefined;
+    };
+} & T;
 export declare function Cappable<T extends Constructor>(Parent: T): {
@@ -139,2 +163,5 @@ new (...args: any[]): {
 } & T;
+/******************
+ * Generic mixins *
+ ******************/
 export declare function Visible<T extends Constructor>(Parent: T): {
@@ -158,9 +185,10 @@ new (...args: any[]): {
 } & T;
-export interface AnnotationAxisLabelFormatterParams {
-    readonly value: any;
-}
-export declare function Label<T extends Constructor>(Parent: T): {
+export declare function LineDash<T extends Constructor>(Parent: T): {
     new (...args: any[]): {
-        padding?: number | undefined;
-        textAlign: TextAlign;
+        lineDash?: number[] | undefined;
+        lineDashOffset?: number | undefined;
+    };
+} & T;
+export declare function Font<T extends Constructor>(Parent: T): {
+    new (...args: any[]): {
         fontStyle?: FontStyle | undefined;
@@ -171,11 +199,4 @@ fontWeight?: FontWeight | undefined;
         color?: string | undefined;
-        formatter?: Formatter<AnnotationAxisLabelFormatterParams> | undefined;
     };
 } & T;
-export declare function LineDash<T extends Constructor>(Parent: T): {
-    new (...args: any[]): {
-        lineDash?: number[] | undefined;
-        lineDashOffset?: number | undefined;
-    };
-} & T;
 export {};

dist/types/src/features/annotations/annotations.d.ts

@@ -13,5 +13,2 @@ import { _ModuleSupport } from 'ag-charts-community';
     private readonly annotationData;
-    private hovered?;
-    private active?;
-    private dragOffset?;
     private seriesRect?;
@@ -21,45 +18,57 @@ private readonly container;
     private readonly colorPicker;
-    private defaultColor?;
+    private readonly textSizePopover;
+    private readonly annotationPickerPopover;
+    private readonly defaultColors;
+    private readonly defaultFontSizes;
+    private readonly textInput;
     private xAxis?;
     private yAxis?;
     constructor(ctx: _ModuleSupport.ModuleContext);
+    private setupStateMachine;
+    private setupListeners;
     private createAnnotationScene;
     private createAnnotationDatum;
-    private appendDatum;
     private onRestoreAnnotations;
     private onToolbarButtonPress;
     private onToolbarAnnotationOptionButtonPress;
+    private onToolbarButtonPressLineMenu;
+    private onToolbarButtonPressTextMenu;
+    private onToolbarButtonPressAnnotation;
     private onToolbarButtonMoved;
     private onColorPickerChange;
+    private updateToolbarColorPickerFill;
+    private updateToolbarFills;
     private onColorPickerClose;
+    private updateToolbarFontSize;
+    private onTextSizePopoverPress;
+    private onTextSizePopoverClose;
+    private onAnnotationsPopoverPress;
+    private onAnnotationsPopoverClose;
     private onToolbarCancelled;
     private onLayoutComplete;
+    private onPreRender;
     private getAxis;
     private updateAnnotations;
     private validateDatum;
-    private validateChildStateDatumPoint;
     private getAnnotationContext;
     private onHover;
-    private onHoverSelecting;
-    private onHoverAdding;
     private onClick;
     private onAxisButtonClick;
-    private onClickSelecting;
-    private onClickAdding;
     private onDragStart;
     private onDrag;
-    private onDragAnnotation;
-    private onDragAdding;
     private onDragEnd;
     private onCancel;
     private onDelete;
+    private onKeyDown;
+    private beginAnnotationPlacement;
     private toggleAnnotationOptionsButtons;
-    private getTypedDatum;
-    private colorDatum;
-    private isOtherElement;
     private clear;
     private reset;
     private cancel;
+    private delete;
+    private deleteAll;
+    private hideOverlays;
+    private resetToolbarButtonStates;
     private update;
 }
 export {};

dist/types/src/features/annotations/annotationTypes.d.ts

 import { _ModuleSupport, _Scene } from 'ag-charts-community';
+export declare enum TextualAnnotationType {
+    Callout = "callout",
+    Comment = "comment",
+    Note = "note",
+    Text = "text"
+}
 export declare enum AnnotationType {
     Line = "line",
+    HorizontalLine = "horizontal-line",
+    VerticalLine = "vertical-line",
     DisjointChannel = "disjoint-channel",
     ParallelChannel = "parallel-channel",
-    HorizontalLine = "horizontal-line",
-    VerticalLine = "vertical-line"
+    Callout = "callout",
+    Comment = "comment",
+    Note = "note",
+    Text = "text"
 }
 export declare const ANNOTATION_TYPES: AnnotationType[];
-export declare const ANNOTATION_BUTTONS: readonly [AnnotationType.Line, AnnotationType.DisjointChannel, AnnotationType.ParallelChannel, AnnotationType.HorizontalLine, AnnotationType.VerticalLine];
+export declare const ANNOTATION_BUTTONS: readonly [AnnotationType.Line, AnnotationType.HorizontalLine, AnnotationType.VerticalLine, AnnotationType.DisjointChannel, AnnotationType.ParallelChannel, AnnotationType.Callout, AnnotationType.Comment, AnnotationType.Note, AnnotationType.Text];
+export declare const ANNOTATION_BUTTON_GROUPS: readonly ["line-menu", "text-menu"];
 export declare function stringToAnnotationType(value: string): AnnotationType | undefined;
@@ -22,2 +33,8 @@ export interface Coords {
 }
+export interface Bounds {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
 export interface Point {
@@ -27,16 +44,8 @@ x?: number | string | Date;
 }
-export interface StateHoverEvent<Annotation, Scene> {
-    datum: Annotation;
-    node: Scene;
-    point: Coords;
-    region?: _ModuleSupport.RegionName;
+export interface Padding {
+    top: number;
+    right: number;
+    bottom: number;
+    left: number;
 }
-export interface StateClickEvent<Annotation, Scene> {
-    datum?: Annotation;
-    node?: Scene;
-    point: Coords;
-    region?: _ModuleSupport.RegionName;
-}
-export interface StateDragEvent<Annotation, Scene> extends StateClickEvent<Annotation, Scene> {
-}
 export interface AnnotationAxisContext extends Pick<_ModuleSupport.AxisContext, 'continuous' | 'direction' | 'position' | 'scaleBandwidth' | 'scaleConvert' | 'scaleDomain' | 'scaleInvert' | 'scaleInvertNearest' | 'scaleValueFormatter' | 'attachLabel' | 'inRange'> {
@@ -51,1 +60,7 @@ bounds: _Scene.BBox;
 };
+export interface GuardDragClickDoubleEvent {
+    guard: () => boolean;
+    hover: () => void;
+    reset: () => void;
+}
+export type AnnotationOptionsColorPickerType = 'line-color' | 'fill-color' | 'text-color';

dist/types/src/features/annotations/annotationUtils.d.ts

 import { type Direction, _ModuleSupport } from 'ag-charts-community';
-import type { AnnotationPoint } from './annotationProperties';
+import type { PointProperties } from './annotationProperties';
 import type { AnnotationAxisContext, AnnotationContext, Coords, Point } from './annotationTypes';
@@ -15,4 +15,4 @@ export declare function validateDatumLine(context: AnnotationContext, datum: {
 export declare function convertLine(datum: {
-    start: Pick<AnnotationPoint, 'x' | 'y'>;
-    end: Pick<AnnotationPoint, 'x' | 'y'>;
+    start: Pick<PointProperties, 'x' | 'y'>;
+    end: Pick<PointProperties, 'x' | 'y'>;
 }, context: AnnotationContext): {
@@ -19,0 +19,0 @@ x1: number;

dist/types/src/features/annotations/cross-line/crossLineProperties.d.ts

 import { _ModuleSupport } from 'ag-charts-community';
-import { type AnnotationContext, AnnotationType } from '../annotationTypes';
-declare const HorizontalLineAnnotation_base: {
+import { type AnnotationContext, type AnnotationOptionsColorPickerType, AnnotationType } from '../annotationTypes';
+declare const HorizontalLineProperties_base: (abstract new (...args: any[]) => {
+    id: string;
+    isValidWithContext(_context: AnnotationContext, warningPrefix: string): boolean;
+    getDefaultColor(colorPickerType: AnnotationOptionsColorPickerType): string | undefined;
+    locked?: boolean | undefined;
+    visible?: boolean | undefined;
+    set(properties: object): any;
+    isValid<TContext = Omit<object, "type">>(this: TContext, warningPrefix?: string | undefined): boolean;
+    toJson<J>(this: J): object;
+}) & {
     new (...args: any[]): {
-        id: string;
-        isValidWithContext(_context: AnnotationContext, warningPrefix: string): boolean;
-        locked?: boolean | undefined;
-        visible?: boolean | undefined;
-        set(properties: object): any;
-        isValid<TContext = Omit<object, "type">>(this: TContext, warningPrefix?: string | undefined): boolean;
-        toJson<J>(this: J): object;
-    };
-} & {
-    new (...args: any[]): {
         value?: string | number | Date | undefined;
@@ -19,7 +18,7 @@ };
     new (...args: any[]): {
-        handle: import("../annotationProperties").AnnotationHandleProperties;
+        handle: import("../annotationProperties").HandleProperties;
     };
 } & {
     new (...args: any[]): {
-        axisLabel: import("../annotationProperties").AnnotationAxisLabelProperties;
+        axisLabel: import("../annotationProperties").AxisLabelProperties;
     };
@@ -43,20 +42,21 @@ } & {
 } & typeof _ModuleSupport.BaseProperties;
-export declare class HorizontalLineAnnotation extends HorizontalLineAnnotation_base {
+export declare class HorizontalLineProperties extends HorizontalLineProperties_base {
     readonly direction = "horizontal";
-    static is(value: unknown): value is HorizontalLineAnnotation;
+    static is(value: unknown): value is HorizontalLineProperties;
     type: AnnotationType.HorizontalLine;
     isValidWithContext(context: AnnotationContext, warningPrefix: string): boolean;
+    getDefaultColor(_colorPickerType: AnnotationOptionsColorPickerType): string | undefined;
+    getDefaultOpacity(_colorPickerType: AnnotationOptionsColorPickerType): number | undefined;
 }
-declare const VerticalLineAnnotation_base: {
+declare const VerticalLineProperties_base: (abstract new (...args: any[]) => {
+    id: string;
+    isValidWithContext(_context: AnnotationContext, warningPrefix: string): boolean;
+    getDefaultColor(colorPickerType: AnnotationOptionsColorPickerType): string | undefined;
+    locked?: boolean | undefined;
+    visible?: boolean | undefined;
+    set(properties: object): any;
+    isValid<TContext = Omit<object, "type">>(this: TContext, warningPrefix?: string | undefined): boolean;
+    toJson<J>(this: J): object;
+}) & {
     new (...args: any[]): {
-        id: string;
-        isValidWithContext(_context: AnnotationContext, warningPrefix: string): boolean;
-        locked?: boolean | undefined;
-        visible?: boolean | undefined;
-        set(properties: object): any;
-        isValid<TContext = Omit<object, "type">>(this: TContext, warningPrefix?: string | undefined): boolean;
-        toJson<J>(this: J): object;
-    };
-} & {
-    new (...args: any[]): {
         value?: string | number | Date | undefined;
@@ -66,7 +66,7 @@ };
     new (...args: any[]): {
-        handle: import("../annotationProperties").AnnotationHandleProperties;
+        handle: import("../annotationProperties").HandleProperties;
     };
 } & {
     new (...args: any[]): {
-        axisLabel: import("../annotationProperties").AnnotationAxisLabelProperties;
+        axisLabel: import("../annotationProperties").AxisLabelProperties;
     };
@@ -90,9 +90,11 @@ } & {
 } & typeof _ModuleSupport.BaseProperties;
-export declare class VerticalLineAnnotation extends VerticalLineAnnotation_base {
+export declare class VerticalLineProperties extends VerticalLineProperties_base {
     readonly direction = "vertical";
-    static is(value: unknown): value is VerticalLineAnnotation;
+    static is(value: unknown): value is VerticalLineProperties;
     type: AnnotationType.VerticalLine;
     isValidWithContext(context: AnnotationContext, warningPrefix: string): boolean;
+    getDefaultColor(_colorPickerType: AnnotationOptionsColorPickerType): string | undefined;
+    getDefaultOpacity(_colorPickerType: AnnotationOptionsColorPickerType): number | undefined;
 }
-export type CrossLineAnnotation = HorizontalLineAnnotation | VerticalLineAnnotation;
+export type CrossLineProperties = HorizontalLineProperties | VerticalLineProperties;
 export {};

dist/types/src/features/annotations/cross-line/crossLineScene.d.ts

 import type { AnnotationContext, Coords } from '../annotationTypes';
-import { Annotation } from '../scenes/annotation';
-import { type CrossLineAnnotation } from './crossLineProperties';
-export declare class CrossLine extends Annotation {
-    static is(value: unknown): value is CrossLine;
+import { AnnotationScene } from '../scenes/annotationScene';
+import { type CrossLineProperties } from './crossLineProperties';
+export declare class CrossLineScene extends AnnotationScene {
+    static is(value: unknown): value is CrossLineScene;
     type: string;
@@ -15,3 +15,3 @@ activeHandle?: 'middle';
     constructor();
-    update(datum: CrossLineAnnotation, context: AnnotationContext): void;
+    update(datum: CrossLineProperties, context: AnnotationContext): void;
     private createAxisLabel;
@@ -22,6 +22,6 @@ private updateAxisLabel;
     toggleActive(active: boolean): void;
-    dragStart(datum: CrossLineAnnotation, target: Coords, context: AnnotationContext): void;
-    drag(datum: CrossLineAnnotation, target: Coords, context: AnnotationContext, onInvalid: () => void): void;
+    dragStart(datum: CrossLineProperties, target: Coords, context: AnnotationContext): void;
+    drag(datum: CrossLineProperties, target: Coords, context: AnnotationContext): void;
     stopDragging(): void;
-    getCursor(): "default" | "col-resize" | "row-resize" | "pointer";
+    getCursor(): "col-resize" | "row-resize" | "pointer" | undefined;
     containsPoint(x: number, y: number): boolean;
@@ -35,5 +35,5 @@ getAnchor(): {
         y: number;
-        position: string;
+        position: "right";
     };
     private convertCrossLine;
 }

dist/types/src/features/annotations/cross-line/crossLineState.d.ts

 import { type Direction, _ModuleSupport, _Util } from 'ag-charts-community';
-import { type CrossLineAnnotation } from './crossLineProperties';
+import type { AnnotationsStateMachineContext } from '../annotationsSuperTypes';
+import { type CrossLineProperties } from './crossLineProperties';
+import type { CrossLineScene } from './crossLineScene';
 export declare function isHorizontalAxis(region: any): boolean;
-export declare class CrossLineStateMachine extends _ModuleSupport.StateMachine<'start', 'click' | 'cancel'> {
+declare const StateMachine: typeof _ModuleSupport.StateMachine;
+interface CrossLineStateMachineContext extends Omit<AnnotationsStateMachineContext, 'create' | 'node'> {
+    create: (datum: CrossLineProperties) => void;
+    node: () => CrossLineScene | undefined;
+    showAnnotationOptions: () => void;
+}
+export declare class CrossLineStateMachine extends StateMachine<'start' | 'waiting-first-render', 'click' | 'cancel' | 'render' | 'reset'> {
     debug: _Util.DebugLogger;
-    constructor(direction: Direction, appendDatum: (datum: CrossLineAnnotation, direction?: any) => void, onExit: () => void);
+    constructor(direction: Direction, ctx: CrossLineStateMachineContext);
 }
+export {};

dist/types/src/features/annotations/disjoint-channel/disjointChannelProperties.d.ts

 import { _ModuleSupport } from 'ag-charts-community';
-import { type AnnotationContext, AnnotationType } from '../annotationTypes';
-declare const DisjointChannelAnnotation_base: {
+import { type AnnotationContext, type AnnotationOptionsColorPickerType, AnnotationType } from '../annotationTypes';
+declare const DisjointChannelProperties_base: (abstract new (...args: any[]) => {
+    id: string;
+    isValidWithContext(_context: AnnotationContext, warningPrefix: string): boolean;
+    getDefaultColor(colorPickerType: AnnotationOptionsColorPickerType): string | undefined;
+    locked?: boolean | undefined;
+    visible?: boolean | undefined;
+    set(properties: object): any;
+    isValid<TContext = Omit<object, "type">>(this: TContext, warningPrefix?: string | undefined): boolean;
+    toJson<J>(this: J): object;
+}) & {
     new (...args: any[]): {
-        id: string;
-        isValidWithContext(_context: AnnotationContext, warningPrefix: string): boolean;
-        locked?: boolean | undefined;
-        visible?: boolean | undefined;
-        set(properties: object): any;
-        isValid<TContext = Omit<object, "type">>(this: TContext, warningPrefix?: string | undefined): boolean;
-        toJson<J>(this: J): object;
+        background: import("../annotationProperties").BackgroundProperties;
     };
 } & {
     new (...args: any[]): {
-        background: import("../annotationProperties").ChannelAnnotationBackground;
+        start: import("../annotationProperties").PointProperties;
+        end: import("../annotationProperties").PointProperties;
     };
 } & {
     new (...args: any[]): {
-        start: import("../annotationProperties").AnnotationPoint;
-        end: import("../annotationProperties").AnnotationPoint;
+        handle: import("../annotationProperties").HandleProperties;
     };
 } & {
     new (...args: any[]): {
-        handle: import("../annotationProperties").AnnotationHandleProperties;
-    };
-} & {
-    new (...args: any[]): {
         stroke?: string | undefined;
@@ -38,4 +37,4 @@ strokeOpacity?: number | undefined;
 } & typeof _ModuleSupport.BaseProperties;
-export declare class DisjointChannelAnnotation extends DisjointChannelAnnotation_base {
-    static is(value: unknown): value is DisjointChannelAnnotation;
+export declare class DisjointChannelProperties extends DisjointChannelProperties_base {
+    static is(value: unknown): value is DisjointChannelProperties;
     type: AnnotationType.DisjointChannel;
@@ -55,3 +54,5 @@ startHeight: number;
     isValidWithContext(context: AnnotationContext, warningPrefix?: string): boolean;
+    getDefaultColor(colorPickerType: AnnotationOptionsColorPickerType): string | undefined;
+    getDefaultOpacity(colorPickerType: AnnotationOptionsColorPickerType): number | undefined;
 }
 export {};

dist/types/src/features/annotations/disjoint-channel/disjointChannelScene.d.ts

 import type { AnnotationContext, Coords, LineCoords } from '../annotationTypes';
 import { ChannelScene } from '../scenes/channelScene';
 import { DivariantHandle, UnivariantHandle } from '../scenes/handle';
-import type { DisjointChannelAnnotation } from './disjointChannelProperties';
-type ChannelHandle = keyof DisjointChannel['handles'];
-export declare class DisjointChannel extends ChannelScene<DisjointChannelAnnotation> {
-    static is(value: unknown): value is DisjointChannel;
+import type { DisjointChannelProperties } from './disjointChannelProperties';
+type ChannelHandle = keyof DisjointChannelScene['handles'];
+export declare class DisjointChannelScene extends ChannelScene<DisjointChannelProperties> {
+    static is(value: unknown): value is DisjointChannelScene;
     type: string;
@@ -19,7 +19,7 @@ activeHandle?: ChannelHandle;
     toggleActive(active: boolean): void;
-    dragHandle(datum: DisjointChannelAnnotation, target: Coords, context: AnnotationContext, onInvalid: () => void): void;
-    protected getOtherCoords(datum: DisjointChannelAnnotation, topLeft: Coords, topRight: Coords, context: AnnotationContext): Coords[];
-    updateLines(datum: DisjointChannelAnnotation, top: LineCoords, bottom: LineCoords): void;
-    updateHandles(datum: DisjointChannelAnnotation, top: LineCoords, bottom: LineCoords): void;
+    dragHandle(datum: DisjointChannelProperties, target: Coords, context: AnnotationContext): void;
+    protected getOtherCoords(datum: DisjointChannelProperties, topLeft: Coords, topRight: Coords, context: AnnotationContext): Coords[];
+    updateLines(datum: DisjointChannelProperties, top: LineCoords, bottom: LineCoords): void;
+    updateHandles(datum: DisjointChannelProperties, top: LineCoords, bottom: LineCoords): void;
 }
 export {};

dist/types/src/features/annotations/disjoint-channel/disjointChannelState.d.ts

 import { _ModuleSupport, _Util } from 'ag-charts-community';
-import type { Point } from '../annotationTypes';
-import { DisjointChannelAnnotation } from './disjointChannelProperties';
-export declare class DisjointChannelStateMachine extends _ModuleSupport.StateMachine<'start' | 'end' | 'height', 'click' | 'hover' | 'drag' | 'cancel'> {
+import type { GuardDragClickDoubleEvent } from '../annotationTypes';
+import type { AnnotationsStateMachineContext } from '../annotationsSuperTypes';
+import { DisjointChannelProperties } from './disjointChannelProperties';
+import type { DisjointChannelScene } from './disjointChannelScene';
+declare const StateMachine: typeof _ModuleSupport.StateMachine;
+interface DisjointChannelStateMachineContext extends Omit<AnnotationsStateMachineContext, 'create'> {
+    create: (datum: DisjointChannelProperties) => void;
+    delete: () => void;
+    datum: () => DisjointChannelProperties | undefined;
+    node: () => DisjointChannelScene | undefined;
+    guardDragClickDoubleEvent: GuardDragClickDoubleEvent;
+}
+export declare class DisjointChannelStateMachine extends StateMachine<'start' | 'end' | 'height', 'click' | 'hover' | 'drag' | 'cancel' | 'reset'> {
     debug: _Util.DebugLogger;
-    constructor(appendDatum: (datum: DisjointChannelAnnotation) => void, validateDatumPoint: (point: Point) => boolean);
+    constructor(ctx: DisjointChannelStateMachineContext);
 }
+export {};

dist/types/src/features/annotations/line/lineProperties.d.ts

 import { _ModuleSupport } from 'ag-charts-community';
-import { type AnnotationContext, AnnotationType } from '../annotationTypes';
-declare const LineAnnotation_base: {
+import { type AnnotationContext, type AnnotationOptionsColorPickerType, AnnotationType } from '../annotationTypes';
+declare const LineProperties_base: (abstract new (...args: any[]) => {
+    id: string;
+    isValidWithContext(_context: AnnotationContext, warningPrefix: string): boolean;
+    getDefaultColor(colorPickerType: AnnotationOptionsColorPickerType): string | undefined;
+    locked?: boolean | undefined;
+    visible?: boolean | undefined;
+    set(properties: object): any;
+    isValid<TContext = Omit<object, "type">>(this: TContext, warningPrefix?: string | undefined): boolean;
+    toJson<J>(this: J): object;
+}) & {
     new (...args: any[]): {
-        id: string;
-        isValidWithContext(_context: AnnotationContext, warningPrefix: string): boolean;
-        locked?: boolean | undefined;
-        visible?: boolean | undefined;
-        set(properties: object): any;
-        isValid<TContext = Omit<object, "type">>(this: TContext, warningPrefix?: string | undefined): boolean;
-        toJson<J>(this: J): object;
+        start: import("../annotationProperties").PointProperties;
+        end: import("../annotationProperties").PointProperties;
     };
 } & {
     new (...args: any[]): {
-        start: import("../annotationProperties").AnnotationPoint;
-        end: import("../annotationProperties").AnnotationPoint;
+        handle: import("../annotationProperties").HandleProperties;
     };
 } & {
     new (...args: any[]): {
-        handle: import("../annotationProperties").AnnotationHandleProperties;
-    };
-} & {
-    new (...args: any[]): {
         startCap?: "circle" | "arrow" | undefined;
@@ -44,7 +43,9 @@ endCap?: "circle" | "arrow" | undefined;
 } & typeof _ModuleSupport.BaseProperties;
-export declare class LineAnnotation extends LineAnnotation_base {
-    static is(value: unknown): value is LineAnnotation;
+export declare class LineProperties extends LineProperties_base {
+    static is(value: unknown): value is LineProperties;
     type: AnnotationType.Line;
     isValidWithContext(context: AnnotationContext, warningPrefix?: string): boolean;
+    getDefaultColor(_colorPickerType: AnnotationOptionsColorPickerType): string | undefined;
+    getDefaultOpacity(_colorPickerType: AnnotationOptionsColorPickerType): number | undefined;
 }
 export {};

dist/types/src/features/annotations/line/lineScene.d.ts

 import type { AnnotationContext, Coords } from '../annotationTypes';
 import { LinearScene } from '../scenes/linearScene';
-import type { LineAnnotation } from './lineProperties';
-export declare class Line extends LinearScene<LineAnnotation> {
-    static is(value: unknown): value is Line;
+import type { LineProperties } from './lineProperties';
+export declare class LineScene extends LinearScene<LineProperties> {
+    static is(value: unknown): value is LineScene;
     type: string;
@@ -13,6 +13,6 @@ activeHandle?: 'start' | 'end';
     constructor();
-    update(datum: LineAnnotation, context: AnnotationContext): void;
+    update(datum: LineProperties, context: AnnotationContext): void;
     toggleHandles(show: boolean | Partial<Record<'start' | 'end', boolean>>): void;
     toggleActive(active: boolean): void;
-    dragHandle(datum: LineAnnotation, target: Coords, context: AnnotationContext, onInvalid: () => void): void;
+    dragHandle(datum: LineProperties, target: Coords, context: AnnotationContext): void;
     stopDragging(): void;
@@ -23,4 +23,4 @@ getAnchor(): {
     };
-    getCursor(): "default" | "pointer";
+    getCursor(): "pointer" | undefined;
     containsPoint(x: number, y: number): boolean;
 }

dist/types/src/features/annotations/line/lineState.d.ts

 import { _ModuleSupport, _Util } from 'ag-charts-community';
-import { LineAnnotation } from './lineProperties';
-export declare class LineStateMachine extends _ModuleSupport.StateMachine<'start' | 'end', 'click' | 'hover' | 'drag' | 'cancel'> {
+import type { GuardDragClickDoubleEvent } from '../annotationTypes';
+import type { AnnotationsStateMachineContext } from '../annotationsSuperTypes';
+import { LineProperties } from './lineProperties';
+import type { LineScene } from './lineScene';
+declare const StateMachine: typeof _ModuleSupport.StateMachine;
+interface LineStateMachineContext extends Omit<AnnotationsStateMachineContext, 'create'> {
+    create: (datum: LineProperties) => void;
+    delete: () => void;
+    datum: () => LineProperties | undefined;
+    node: () => LineScene | undefined;
+    guardDragClickDoubleEvent: GuardDragClickDoubleEvent;
+}
+export declare class LineStateMachine extends StateMachine<'start' | 'end', 'click' | 'hover' | 'drag' | 'reset' | 'cancel'> {
     debug: _Util.DebugLogger;
-    constructor(appendDatum: (datum: LineAnnotation) => void);
+    constructor(ctx: LineStateMachineContext);
 }
+export {};

dist/types/src/features/annotations/parallel-channel/parallelChannelProperties.d.ts

 import { _ModuleSupport } from 'ag-charts-community';
-import { ChannelAnnotationMiddle } from '../annotationProperties';
-import { type AnnotationContext, AnnotationType } from '../annotationTypes';
-declare const ParallelChannelAnnotation_base: {
+import { ChannelAnnotationMiddleProperties } from '../annotationProperties';
+import { type AnnotationContext, type AnnotationOptionsColorPickerType, AnnotationType } from '../annotationTypes';
+declare const ParallelChannelProperties_base: (abstract new (...args: any[]) => {
+    id: string;
+    isValidWithContext(_context: AnnotationContext, warningPrefix: string): boolean;
+    getDefaultColor(colorPickerType: AnnotationOptionsColorPickerType): string | undefined;
+    locked?: boolean | undefined;
+    visible?: boolean | undefined;
+    set(properties: object): any;
+    isValid<TContext = Omit<object, "type">>(this: TContext, warningPrefix?: string | undefined): boolean;
+    toJson<J>(this: J): object;
+}) & {
     new (...args: any[]): {
-        id: string;
-        isValidWithContext(_context: AnnotationContext, warningPrefix: string): boolean;
-        locked?: boolean | undefined;
-        visible?: boolean | undefined;
-        set(properties: object): any;
-        isValid<TContext = Omit<object, "type">>(this: TContext, warningPrefix?: string | undefined): boolean;
-        toJson<J>(this: J): object;
+        background: import("../annotationProperties").BackgroundProperties;
     };
 } & {
     new (...args: any[]): {
-        background: import("../annotationProperties").ChannelAnnotationBackground;
+        start: import("../annotationProperties").PointProperties;
+        end: import("../annotationProperties").PointProperties;
     };
 } & {
     new (...args: any[]): {
-        start: import("../annotationProperties").AnnotationPoint;
-        end: import("../annotationProperties").AnnotationPoint;
+        handle: import("../annotationProperties").HandleProperties;
     };
 } & {
     new (...args: any[]): {
-        handle: import("../annotationProperties").AnnotationHandleProperties;
-    };
-} & {
-    new (...args: any[]): {
         extendLeft?: boolean | undefined;
@@ -44,7 +43,7 @@ extendRight?: boolean | undefined;
 } & typeof _ModuleSupport.BaseProperties;
-export declare class ParallelChannelAnnotation extends ParallelChannelAnnotation_base {
-    static is(value: unknown): value is ParallelChannelAnnotation;
+export declare class ParallelChannelProperties extends ParallelChannelProperties_base {
+    static is(value: unknown): value is ParallelChannelProperties;
     type: AnnotationType.ParallelChannel;
     height: number;
-    middle: ChannelAnnotationMiddle;
+    middle: ChannelAnnotationMiddleProperties;
     get bottom(): {
@@ -61,3 +60,5 @@ start: {
     isValidWithContext(context: AnnotationContext, warningPrefix?: string): boolean;
+    getDefaultColor(colorPickerType: AnnotationOptionsColorPickerType): string | undefined;
+    getDefaultOpacity(colorPickerType: AnnotationOptionsColorPickerType): number | undefined;
 }
 export {};

dist/types/src/features/annotations/parallel-channel/parallelChannelScene.d.ts

 import type { AnnotationContext, Coords, LineCoords } from '../annotationTypes';
 import { ChannelScene } from '../scenes/channelScene';
 import { DivariantHandle, UnivariantHandle } from '../scenes/handle';
-import type { ParallelChannelAnnotation } from './parallelChannelProperties';
-type ChannelHandle = keyof ParallelChannel['handles'];
-export declare class ParallelChannel extends ChannelScene<ParallelChannelAnnotation> {
-    static is(value: unknown): value is ParallelChannel;
+import type { ParallelChannelProperties } from './parallelChannelProperties';
+type ChannelHandle = keyof ParallelChannelScene['handles'];
+export declare class ParallelChannelScene extends ChannelScene<ParallelChannelProperties> {
+    static is(value: unknown): value is ParallelChannelScene;
     type: string;
@@ -22,7 +22,7 @@ activeHandle?: ChannelHandle;
     toggleActive(active: boolean): void;
-    dragHandle(datum: ParallelChannelAnnotation, target: Coords, context: AnnotationContext, onInvalid: () => void): void;
-    protected getOtherCoords(datum: ParallelChannelAnnotation, topLeft: Coords, topRight: Coords, context: AnnotationContext): Coords[];
-    updateLines(datum: ParallelChannelAnnotation, top: LineCoords, bottom: LineCoords): void;
-    updateHandles(datum: ParallelChannelAnnotation, top: LineCoords, bottom: LineCoords): void;
+    dragHandle(datum: ParallelChannelProperties, target: Coords, context: AnnotationContext): void;
+    protected getOtherCoords(datum: ParallelChannelProperties, topLeft: Coords, topRight: Coords, context: AnnotationContext): Coords[];
+    updateLines(datum: ParallelChannelProperties, top: LineCoords, bottom: LineCoords): void;
+    updateHandles(datum: ParallelChannelProperties, top: LineCoords, bottom: LineCoords): void;
 }
 export {};

dist/types/src/features/annotations/parallel-channel/parallelChannelState.d.ts

 import { _ModuleSupport, _Util } from 'ag-charts-community';
-import type { Point } from '../annotationTypes';
-import { ParallelChannelAnnotation } from './parallelChannelProperties';
-export declare class ParallelChannelStateMachine extends _ModuleSupport.StateMachine<'start' | 'end' | 'height', 'click' | 'hover' | 'drag' | 'cancel'> {
+import type { GuardDragClickDoubleEvent } from '../annotationTypes';
+import type { AnnotationsStateMachineContext } from '../annotationsSuperTypes';
+import { ParallelChannelProperties } from './parallelChannelProperties';
+import type { ParallelChannelScene } from './parallelChannelScene';
+declare const StateMachine: typeof _ModuleSupport.StateMachine;
+interface ParallelChannelStateMachineContext extends Omit<AnnotationsStateMachineContext, 'create'> {
+    create: (datum: ParallelChannelProperties) => void;
+    delete: () => void;
+    datum: () => ParallelChannelProperties | undefined;
+    node: () => ParallelChannelScene | undefined;
+    guardDragClickDoubleEvent: GuardDragClickDoubleEvent;
+}
+export declare class ParallelChannelStateMachine extends StateMachine<'start' | 'end' | 'height', 'click' | 'hover' | 'drag' | 'cancel' | 'reset'> {
     debug: _Util.DebugLogger;
-    constructor(appendDatum: (datum: ParallelChannelAnnotation) => void, validateDatumPoint: (point: Point) => boolean);
+    constructor(ctx: ParallelChannelStateMachineContext);
 }
+export {};

dist/types/src/features/annotations/scenes/channelScene.d.ts

 import { _Scene } from 'ag-charts-community';
-import type { AnnotationPoint } from '../annotationProperties';
+import type { PointProperties } from '../annotationProperties';
 import type { AnnotationContext, LineCoords } from '../annotationTypes';
@@ -14,7 +14,7 @@ import type { Handle } from './handle';
     visible?: boolean;
-    start: Pick<AnnotationPoint, 'x' | 'y'>;
-    end: Pick<AnnotationPoint, 'x' | 'y'>;
+    start: Pick<PointProperties, 'x' | 'y'>;
+    end: Pick<PointProperties, 'x' | 'y'>;
     bottom: {
-        start: Pick<AnnotationPoint, 'x' | 'y'>;
-        end: Pick<AnnotationPoint, 'x' | 'y'>;
+        start: Pick<PointProperties, 'x' | 'y'>;
+        end: Pick<PointProperties, 'x' | 'y'>;
     };
@@ -36,3 +36,3 @@ }> extends LinearScene<Datum> {
     };
-    getCursor(): string;
+    getCursor(): string | undefined;
     containsPoint(x: number, y: number): boolean;
@@ -39,0 +39,0 @@ protected abstract updateLines(datum: Datum, top: LineCoords, bottom: LineCoords): void;

dist/types/src/features/annotations/scenes/handle.d.ts

@@ -24,3 +24,3 @@ import { _Scene } from 'ag-charts-community';
     static readonly GLOW_SIZE: number;
-    static readonly INACTIVE_STROKE_WIDTH = 1;
+    static readonly INACTIVE_STROKE_WIDTH = 2;
     protected abstract handle: _Scene.Rect | _Scene.Circle;
@@ -31,2 +31,3 @@ protected abstract glow: _Scene.Rect | _Scene.Circle;
     visible: boolean;
+    zIndex: number;
     abstract update(styles: {
@@ -43,3 +44,3 @@ [K in keyof (_Scene.Rect | _Scene.Circle)]?: (_Scene.Rect | _Scene.Circle)[K];
     toggleLocked(locked: boolean): void;
-    getCursor(): string;
+    getCursor(): string | undefined;
     containsPoint(x: number, y: number): boolean;
@@ -77,3 +78,3 @@ }
     };
-    getCursor(): "default" | "col-resize" | "row-resize";
+    getCursor(): "col-resize" | "row-resize" | undefined;
 }
@@ -80,0 +81,0 @@ export declare class DivariantHandle extends Handle {

dist/types/src/features/annotations/scenes/linearScene.d.ts

@@ -1,9 +0,9 @@
-import type { AnnotationPoint } from '../annotationProperties';
+import type { PointProperties } from '../annotationProperties';
 import type { AnnotationContext, Coords } from '../annotationTypes';
-import { Annotation } from './annotation';
+import { AnnotationScene } from './annotationScene';
 export declare abstract class LinearScene<Datum extends {
-    start: Pick<AnnotationPoint, 'x' | 'y'>;
-    end: Pick<AnnotationPoint, 'x' | 'y'>;
+    start: Pick<PointProperties, 'x' | 'y'>;
+    end: Pick<PointProperties, 'x' | 'y'>;
     locked?: boolean;
-}> extends Annotation {
+}> extends AnnotationScene {
     protected dragState?: {
@@ -15,6 +15,6 @@ offset: Coords;
     dragStart(datum: Datum, target: Coords, context: AnnotationContext): void;
-    drag(datum: Datum, target: Coords, context: AnnotationContext, onInvalid: () => void): void;
-    protected abstract dragHandle(datum: Datum, target: Coords, context: AnnotationContext, onInvalid: () => void): void;
+    drag(datum: Datum, target: Coords, context: AnnotationContext): void;
+    protected abstract dragHandle(datum: Datum, target: Coords, context: AnnotationContext): void;
     protected dragAll(datum: Datum, target: Coords, context: AnnotationContext): void;
     protected getOtherCoords(_datum: Datum, _topLeft: Coords, _topRight: Coords, _context: AnnotationContext): Array<Coords>;
 }

dist/types/src/features/background/background.d.ts

 import { _ModuleSupport } from 'ag-charts-community';
-import { BackgroundImage } from './backgroundImage';
-export declare class Background extends _ModuleSupport.Background<BackgroundImage> {
+import { Image } from '../image/image';
+export declare class Background extends _ModuleSupport.Background<Image> {
     private readonly ctx;
-    image: BackgroundImage;
+    image: Image;
     constructor(ctx: _ModuleSupport.ModuleContext);
@@ -7,0 +7,0 @@ protected onLayoutComplete(event: _ModuleSupport.LayoutCompleteEvent): void;

dist/types/src/features/color-picker/colorPicker.d.ts

 import { _ModuleSupport } from 'ag-charts-community';
 export declare class ColorPicker extends _ModuleSupport.BaseModuleInstance implements _ModuleSupport.ModuleInstance {
-    readonly ctx: _ModuleSupport.ModuleContext;
+    private readonly ctx;
     private readonly element;
@@ -10,3 +10,4 @@ private anchor?;
         color?: string;
-        onChange?: (colorString: string) => void;
+        opacity?: number;
+        onChange?: (colorOpacity: string, color: string, opacity: number) => void;
         onClose: () => void;
@@ -13,0 +14,0 @@ }): void;

dist/types/src/features/context-menu/contextMenu.d.ts

@@ -19,3 +19,2 @@ import type { AgContextMenuOptions } from 'ag-charts-community';
     extraLegendItemActions: NonNullable<AgContextMenuOptions['extraLegendItemActions']>;
-    private readonly scene;
     private readonly interactionManager;
@@ -22,0 +21,0 @@ private readonly registry;

dist/types/src/features/context-menu/contextMenuStyles.d.ts

 export declare const DEFAULT_CONTEXT_MENU_CLASS = "ag-chart-context-menu";
 export declare const DEFAULT_CONTEXT_MENU_DARK_CLASS = "ag-charts-dark-context-menu";
-export { default as defaultContextMenuCss } from './contextMenuStyles.css';

dist/types/src/features/crosshair/crosshair.d.ts

@@ -37,2 +37,3 @@ import { _ModuleSupport, _Scene } from 'ag-charts-community';
     private onHighlightChange;
+    private isInRange;
     private updatePositions;
@@ -39,0 +40,0 @@ private getData;

dist/types/src/features/crosshair/crosshairLabel.d.ts

 import type { AgCrosshairLabelRendererParams, AgCrosshairLabelRendererResult } from 'ag-charts-community';
 import { _ModuleSupport, _Scene } from 'ag-charts-community';
-import defaultLabelCss from './crosshairLabel.css';
-export { defaultLabelCss };
 declare const BaseProperties: typeof _ModuleSupport.BaseProperties;
@@ -27,3 +25,3 @@ export declare class CrosshairLabelProperties extends _Scene.ChangeDetectableProperties {
     setLabelHtml(html?: string): void;
-    computeBBox(): _Scene.BBox;
+    getBBox(): _Scene.BBox;
     toggle(visible?: boolean): void;
@@ -33,1 +31,2 @@ destroy(): void;
 }
+export {};

dist/types/src/features/crosshair/crosshairModule.d.ts

@@ -1,2 +0,2 @@
-import type { _ModuleSupport } from 'ag-charts-community';
+import { type _ModuleSupport } from 'ag-charts-community';
 export declare const CrosshairModule: _ModuleSupport.AxisOptionModule;

dist/types/src/features/status-bar/statusBar.d.ts

 import { _ModuleSupport, _Scene } from 'ag-charts-community';
-declare const Label: typeof _Scene.Label;
-declare class StatusBarLabel extends Label {
-}
 export declare class StatusBar extends _ModuleSupport.BaseModuleInstance implements _ModuleSupport.ModuleInstance, _ModuleSupport.ScopeProvider {
+    private readonly ctx;
     enabled: boolean;
@@ -12,5 +10,7 @@ openKey?: string;
     volumeKey?: string;
-    readonly title: StatusBarLabel;
-    readonly positive: StatusBarLabel;
-    readonly negative: StatusBarLabel;
+    readonly title: _Scene.Label<never, any>;
+    readonly positive: _Scene.Label<never, any>;
+    readonly negative: _Scene.Label<never, any>;
+    readonly neutral: _Scene.Label<never, any>;
+    readonly altNeutral: _Scene.Label<never, any>;
     layoutStyle: 'block' | 'overlay';
@@ -31,3 +31,3 @@ readonly id = "status-bar";
     private updateHighlight;
+    private getChartType;
 }
-export {};

dist/types/src/features/zoom/zoomContextMenu.d.ts

@@ -6,9 +6,10 @@ import type { _ModuleSupport, _Scene } from 'ag-charts-community';
     private readonly zoomManager;
+    private readonly getModuleProperties;
+    private readonly getRect;
     private readonly updateZoom;
-    rect?: _Scene.BBox;
-    constructor(contextMenuRegistry: _ModuleSupport.ContextMenuRegistry, zoomManager: _ModuleSupport.ZoomManager, updateZoom: (zoom: DefinedZoomState) => void);
-    registerActions(enabled: boolean | undefined, zoom: DefinedZoomState, props: ZoomProperties): void;
-    toggleActions(zoom: DefinedZoomState, props: ZoomProperties): void;
+    constructor(contextMenuRegistry: _ModuleSupport.ContextMenuRegistry, zoomManager: _ModuleSupport.ZoomManager, getModuleProperties: () => ZoomProperties, getRect: () => _Scene.BBox | undefined, updateZoom: (zoom: DefinedZoomState) => void);
+    registerActions(enabled: boolean | undefined, zoom: DefinedZoomState): void;
+    toggleActions(zoom: DefinedZoomState): void;
     private onZoomToHere;
     private onPanToHere;
 }

dist/types/src/features/zoom/zoomRange.d.ts

@@ -6,6 +6,7 @@ import { _ModuleSupport } from 'ag-charts-community';
     end?: Date | number;
+    private axisId?;
     private domain?;
     private initialStart?;
     private initialEnd?;
-    constructor(onChange: (range?: {
+    constructor(onChange: (axisId?: string, range?: {
         min: number;
@@ -22,8 +23,17 @@ max: number;
     } | undefined;
-    extendToEnd(extent: number): void;
-    extendWith(fn: (end: Date | number) => Date | number): void;
-    updateWith(fn: (start: Date | number, end: Date | number) => [Date | number, Date | number]): void;
+    extendToEnd(extent: number): {
+        start: number | Date;
+        end: number | Date;
+    } | undefined;
+    extendWith(fn: (end: Date | number) => Date | number): {
+        start: number | Date;
+        end: number | Date;
+    } | undefined;
+    updateWith(fn: (start: Date | number, end: Date | number) => [Date | number, Date | number]): {
+        start: number | Date;
+        end: number | Date;
+    } | undefined;
     extendAll(): void;
-    updateAxis(axes: Array<_ModuleSupport.AxisLayout>): boolean;
+    updateAxis(axes: _ModuleSupport.AxisLayout[]): boolean;
     private getRangeWithValues;
 }

dist/types/src/features/zoom/zoomToolbar.d.ts

@@ -9,3 +9,6 @@ import { _ModuleSupport } from 'ag-charts-community';
     private readonly updateAxisZoom;
+    private selectedZoom;
+    private readonly destroyFns;
     constructor(toolbarManager: _ModuleSupport.ToolbarManager, zoomManager: _ModuleSupport.ZoomManager, getResetZoom: () => DefinedZoomState, updateZoom: (zoom: DefinedZoomState) => void, updateAxisZoom: (axisId: string, direction: _ModuleSupport.ChartAxisDirection, partialZoom: _ModuleSupport.ZoomState | undefined) => void);
+    destroy(): void;
     toggle(enabled: boolean | undefined, zoom: DefinedZoomState, props: ZoomProperties): void;
@@ -16,2 +19,3 @@ toggleButtons(zoom: DefinedZoomState, props: ZoomProperties): void;
     private onButtonPressRanges;
+    private onZoomChanged;
     private onButtonPressZoom;
@@ -18,0 +22,0 @@ private onButtonPressZoomAxis;

dist/types/src/features/zoom/zoomUtils.d.ts

@@ -12,2 +12,3 @@ import { type AgZoomAnchorPoint, _ModuleSupport, _Scene } from 'ag-charts-community';
 export declare function dy(zoom: DefinedZoomState): number;
+export declare function isZoomRangeEqual(left: _ModuleSupport.ZoomState, right: _ModuleSupport.ZoomState, epsilon?: number): boolean;
 export declare function isZoomEqual(left: DefinedZoomState, right: DefinedZoomState, epsilon?: number): boolean;
@@ -14,0 +15,0 @@ export declare function isZoomLess(zoom: DefinedZoomState, minRatioX: number, minRatioY: number): boolean;

dist/types/src/gradient-legend/gradientLegend.d.ts

@@ -1,14 +0,13 @@
-import { type AgChartLegendPosition, type AgGradientLegendScaleOptions, _ModuleSupport, _Scale, _Scene } from 'ag-charts-community';
-declare class GradientLegendAxis extends _ModuleSupport.CartesianAxis<_Scale.LinearScale, number> {
-    colorDomain: number[];
-    constructor(ctx: _ModuleSupport.ModuleContext);
-    calculateDomain(): void;
-    protected getTickSize(): number;
+import { type AgChartLegendPosition, type AgGradientLegendScaleOptions, _ModuleSupport, _Scene } from 'ag-charts-community';
+declare const BaseProperties: typeof _ModuleSupport.BaseProperties;
+declare class GradientBar extends BaseProperties {
+    thickness: number;
+    preferredLength: number;
 }
 declare class GradientLegendScale implements AgGradientLegendScaleOptions {
-    axis: GradientLegendAxis;
-    constructor(axis: GradientLegendAxis);
+    protected axisTicks: _ModuleSupport.AxisTicks;
+    constructor(axisTicks: _ModuleSupport.AxisTicks);
     label: _ModuleSupport.AxisLabel;
     interval: _ModuleSupport.AxisInterval<number>;
-    padding?: GradientLegendAxis['seriesAreaPadding'];
+    padding?: _ModuleSupport.AxisTicks['padding'];
 }
@@ -19,18 +18,15 @@ export declare class GradientLegend {
     readonly id: string;
-    private readonly axis;
-    private readonly group;
+    private readonly axisTicks;
+    private readonly highlightManager;
+    private readonly legendGroup;
     private readonly gradientRect;
     private readonly gradientFill;
-    private readonly axisGridGroup;
-    private readonly axisGroup;
     private readonly arrow;
-    private readonly gradient;
+    private readonly ticksGroup;
     private readonly destroyFns;
-    private readonly layoutService;
-    private readonly highlightManager;
     enabled: boolean;
     position: AgChartLegendPosition;
-    reverseOrder?: boolean;
-    pagination?: any;
-    private getOrientation;
+    reverseOrder: boolean;
+    readonly gradient: GradientBar;
+    private isVertical;
     /**
@@ -42,9 +38,6 @@ * Spacing between the legend and the edge of the chart's element.
     data: _ModuleSupport.GradientLegendDatum[];
-    listeners: any;
     constructor(ctx: _ModuleSupport.ModuleContext);
     destroy(): void;
     attachLegend(scene: _Scene.Scene): void;
-    detachLegend(): void;
-    private latestGradientBox?;
-    private update;
+    private onStartLayout;
     private normalizeColorArrays;
@@ -55,5 +48,4 @@ private updateGradientRect;
     private getMeasurements;
-    computeBBox(): _Scene.BBox;
     private onChartHoverChange;
 }
 export {};

dist/types/src/series/candlestick/candlestickSeries.d.ts

@@ -44,2 +44,3 @@ import { type AgCandlestickSeriesItemOptions, _ModuleSupport, _Scene } from 'ag-charts-community';
             xValue?: any;
+            focusable?: boolean | undefined;
         }[];
@@ -46,0 +47,0 @@ itemId: string;

dist/types/src/series/chord/chordLink.d.ts

 import { _Scene } from 'ag-charts-community';
 declare const Path: typeof _Scene.Path;
+export declare function bezierControlPoints({ radius, startAngle, endAngle, tension, }: {
+    radius: number;
+    startAngle: number;
+    endAngle: number;
+    tension: number;
+}): {
+    x: readonly [number, number, number, number];
+    y: readonly [number, number, number, number];
+};
 export declare class ChordLink extends Path {
@@ -12,2 +21,3 @@ centerX: number;
     tension: number;
+    protected computeBBox(): _Scene.BBox | undefined;
     private tensionedCurveTo;
@@ -14,0 +24,0 @@ updatePath(): void;

dist/types/src/series/heatmap/heatmapSeriesProperties.d.ts

 import type { AgHeatmapSeriesItemStylerParams, AgHeatmapSeriesLabelFormatterParams, AgHeatmapSeriesOptions, AgHeatmapSeriesStyle, AgHeatmapSeriesTooltipRendererParams, Styler, TextAlign, VerticalAlign } from 'ag-charts-community';
 import { _ModuleSupport } from 'ag-charts-community';
-import { AutoSizedLabel } from '../util/labelFormatter';
+import { AutoSizedLabel } from '../util/autoSizedLabel';
 declare const CartesianSeriesProperties: typeof _ModuleSupport.CartesianSeriesProperties;
@@ -5,0 +5,0 @@ export declare class HeatmapSeriesProperties extends CartesianSeriesProperties<AgHeatmapSeriesOptions> {

dist/types/src/series/map-line-background/mapLineBackgroundSeries.d.ts

@@ -37,3 +37,3 @@ import { _ModuleSupport, _Scene, _Util } from 'ag-charts-community';
     getSeriesDomain(): number[];
-    getLegendData<T extends _ModuleSupport.ChartLegendType>(): _ModuleSupport.ChartLegendDatum<T>[];
+    getLegendData(): never[];
     getTooltipHtml(): _ModuleSupport.TooltipContent;
@@ -40,0 +40,0 @@ protected computeFocusBounds(_opts: _ModuleSupport.PickFocusInputs): _Scene.BBox | undefined;

dist/types/src/series/map-shape-background/mapShapeBackgroundSeries.d.ts

@@ -36,3 +36,3 @@ import { _ModuleSupport, _Util } from 'ag-charts-community';
     getSeriesDomain(): number[];
-    getLegendData<T extends _ModuleSupport.ChartLegendType>(): _ModuleSupport.ChartLegendDatum<T>[];
+    getLegendData(): never[];
     getTooltipHtml(): _ModuleSupport.TooltipContent;
@@ -39,0 +39,0 @@ pickFocus(_opts: _ModuleSupport.PickFocusInputs): undefined;

dist/types/src/series/map-shape/mapShapeSeriesProperties.d.ts

 import type { AgMapShapeSeriesItemStylerParams, AgMapShapeSeriesLabelFormatterParams, AgMapShapeSeriesOptions, AgMapShapeSeriesStyle, AgMapShapeSeriesTooltipRendererParams, Styler } from 'ag-charts-community';
 import { _ModuleSupport } from 'ag-charts-community';
-import { AutoSizeableSecondaryLabel } from '../util/labelFormatter';
+import { AutoSizeableSecondaryLabel } from '../util/autoSizedLabel';
 declare const SeriesProperties: typeof _ModuleSupport.SeriesProperties;
@@ -5,0 +5,0 @@ export interface MapShapeNodeLabelDatum {

dist/types/src/series/map-util/geoGeometry.d.ts

@@ -13,3 +13,3 @@ import { _ModuleSupport, _Scene } from 'ag-charts-community';
     private readonly strokePath;
-    computeBBox(): _Scene.BBox | undefined;
+    protected computeBBox(): _Scene.BBox | undefined;
     updatePath(): void;
@@ -16,0 +16,0 @@ drawPath(ctx: any): void;

dist/types/src/series/ohlc/ohlcSeries.d.ts

@@ -40,2 +40,3 @@ import { type AgOhlcSeriesItemOptions, _ModuleSupport, _Scene } from 'ag-charts-community';
             xValue?: any;
+            focusable?: boolean | undefined;
         }[];
@@ -42,0 +43,0 @@ itemId: string;

dist/types/src/series/radar/radarSeriesProperties.d.ts

@@ -1,2 +0,2 @@
-import type { AgBaseRadarSeriesOptions, AgRadarSeriesItemStylerParams, AgRadarSeriesLabelFormatterParams, AgRadarSeriesTooltipRendererParams, AgRadialSeriesOptionsKeys, FillOptions, StrokeOptions, Styler } from 'ag-charts-community';
+import type { AgBaseRadarSeriesOptions, AgRadarSeriesLabelFormatterParams, AgRadarSeriesTooltipRendererParams, AgRadialSeriesOptionsKeys, FillOptions, StrokeOptions } from 'ag-charts-community';
 import { _ModuleSupport, _Scene } from 'ag-charts-community';
@@ -27,3 +27,2 @@ export interface RadarNodeDatum extends _ModuleSupport.SeriesNodeDatum {
     lineDashOffset: number;
-    itemStyler?: Styler<AgRadarSeriesItemStylerParams<unknown>, AgRadarSeriesFormat>;
     rotation: number;
@@ -30,0 +29,0 @@ readonly marker: _ModuleSupport.SeriesMarker<AgRadialSeriesOptionsKeys>;

dist/types/src/series/sankey/sankeyLink.d.ts

@@ -10,5 +10,5 @@ import { _Scene } from 'ag-charts-community';
     inset: number;
-    computeBBox(): _Scene.BBox | undefined;
+    protected computeBBox(): _Scene.BBox | undefined;
     updatePath(): void;
 }
 export {};

dist/types/src/series/sunburst/sunburstSeriesProperties.d.ts

 import type { AgSunburstSeriesItemStylerParams, AgSunburstSeriesLabelFormatterParams, AgSunburstSeriesOptions, AgSunburstSeriesStyle, AgSunburstSeriesTooltipRendererParams, Styler } from 'ag-charts-community';
 import { _ModuleSupport } from 'ag-charts-community';
-import { AutoSizeableSecondaryLabel, AutoSizedLabel } from '../util/labelFormatter';
+import { AutoSizeableSecondaryLabel, AutoSizedLabel } from '../util/autoSizedLabel';
 declare const HierarchySeriesProperties: typeof _ModuleSupport.HierarchySeriesProperties, HighlightStyle: typeof _ModuleSupport.HighlightStyle;
@@ -5,0 +5,0 @@ declare class SunburstSeriesTileHighlightStyle extends HighlightStyle {

dist/types/src/series/treemap/treemapSeriesProperties.d.ts

 import type { AgTreemapSeriesItemStylerParams, AgTreemapSeriesLabelFormatterParams, AgTreemapSeriesOptions, AgTreemapSeriesStyle, AgTreemapSeriesTooltipRendererParams, Styler, TextAlign, VerticalAlign } from 'ag-charts-community';
 import { _ModuleSupport, _Scene } from 'ag-charts-community';
-import { AutoSizeableSecondaryLabel, AutoSizedLabel } from '../util/labelFormatter';
+import { AutoSizeableSecondaryLabel, AutoSizedLabel } from '../util/autoSizedLabel';
 declare const Label: typeof _Scene.Label;
@@ -5,0 +5,0 @@ declare const BaseProperties: typeof _ModuleSupport.BaseProperties, HierarchySeriesProperties: typeof _ModuleSupport.HierarchySeriesProperties, HighlightStyle: typeof _ModuleSupport.HighlightStyle;

dist/types/src/series/util/labelFormatter.d.ts

@@ -1,13 +0,10 @@
-import { type OverflowStrategy, type TextWrap, _Scene } from 'ag-charts-community';
-declare const Label: typeof _Scene.Label;
-declare class BaseAutoSizedLabel<FormatterParams> extends Label<FormatterParams> {
-    static lineHeight(fontSize: number): number;
-    wrapping: TextWrap;
-    overflowStrategy: OverflowStrategy;
-    minimumFontSize?: number;
+import type { AgChartAutoSizedBaseLabelOptions, AgChartAutoSizedLabelOptions, AgChartAutoSizedSecondaryLabelOptions, FontSize } from 'ag-charts-types';
+interface AutoSizedBaseLabelOptions extends AgChartAutoSizedBaseLabelOptions<unknown, any> {
+    fontSize: FontSize;
 }
-export declare class AutoSizedLabel<FormatterParams> extends BaseAutoSizedLabel<FormatterParams> {
-    spacing: number;
+interface AutoSizedLabelOptions extends AgChartAutoSizedLabelOptions<unknown, any> {
+    fontSize: FontSize;
 }
-export declare class AutoSizeableSecondaryLabel<FormatterParams> extends BaseAutoSizedLabel<FormatterParams> {
+interface AutoSizedSecondaryLabelOptions extends AgChartAutoSizedSecondaryLabelOptions<unknown, any> {
+    fontSize: FontSize;
 }
@@ -18,4 +15,3 @@ type FontSizeCandidate = {
 };
-export declare function generateLabelSecondaryLabelFontSizeCandidates<FormatterParams>(label: BaseAutoSizedLabel<FormatterParams>, secondaryLabel: BaseAutoSizedLabel<FormatterParams>): FontSizeCandidate[];
-export declare function maximumValueSatisfying<T>(from: number, to: number, iteratee: (value: number) => T | undefined): T | undefined;
+export declare function generateLabelSecondaryLabelFontSizeCandidates(label: AutoSizedBaseLabelOptions, secondaryLabel: AutoSizedBaseLabelOptions): FontSizeCandidate[];
 type LayoutParams = {
@@ -50,3 +46,3 @@ padding: number;
 };
-export declare function formatStackedLabels<Meta, FormatterParams>(labelValue: string, labelProps: AutoSizedLabel<FormatterParams>, secondaryLabelValue: string, secondaryLabelProps: AutoSizeableSecondaryLabel<FormatterParams>, { padding }: LayoutParams, sizeFittingHeight: SizeFittingHeightFn<Meta>): ({
+export declare function formatStackedLabels<Meta>(labelValue: string, labelProps: AutoSizedLabelOptions, secondaryLabelValue: string, secondaryLabelProps: AutoSizedSecondaryLabelOptions, { padding }: LayoutParams, sizeFittingHeight: SizeFittingHeightFn<Meta>): ({
     width: number;
@@ -66,4 +62,4 @@ height: number;
 }) | undefined;
-export declare function formatSingleLabel<Meta, FormatterParams>(value: string, props: BaseAutoSizedLabel<FormatterParams>, { padding }: LayoutParams, sizeFittingHeight: SizeFittingHeightFn<Meta>): [LabelFormatting, Meta] | undefined;
-export declare function formatLabels<Meta = never, FormatterParams = any>(baseLabelValue: string | undefined, labelProps: AutoSizedLabel<FormatterParams>, baseSecondaryLabelValue: string | undefined, secondaryLabelProps: AutoSizeableSecondaryLabel<FormatterParams>, layoutParams: LayoutParams, sizeFittingHeight: SizeFittingHeightFn<Meta>): StackedLabelFormatting<Meta> | undefined;
+export declare function formatSingleLabel<Meta>(value: string, props: AutoSizedBaseLabelOptions, { padding }: LayoutParams, sizeFittingHeight: SizeFittingHeightFn<Meta>): [LabelFormatting, Meta] | undefined;
+export declare function formatLabels<Meta = never>(baseLabelValue: string | undefined, labelProps: AutoSizedLabelOptions, baseSecondaryLabelValue: string | undefined, secondaryLabelProps: AutoSizedSecondaryLabelOptions, layoutParams: LayoutParams, sizeFittingHeight: SizeFittingHeightFn<Meta>): StackedLabelFormatting<Meta> | undefined;
 export {};

package.json

 {
   "name": "ag-charts-enterprise",
-  "version": "10.0.2",
+  "version": "10.1.0",
   "description": "Advanced Charting / Charts supporting Javascript / Typescript / React / Angular / Vue",
@@ -26,10 +26,17 @@ "main": "./dist/package/main.cjs.js",
     "charts",
+    "graph",
+    "graphs",
     "data",
+    "react",
+    "react-component",
+    "react-charts",
+    "react-graphs",
     "angular",
     "angular-component",
-    "react",
-    "react-component",
+    "angular-charts",
+    "angular-graphs",
     "reactjs",
     "vue",
-    "vuejs"
+    "vuejs",
+    "enterprise-charts"
   ],
@@ -60,3 +67,3 @@ "author": "AG Grid <[e-mail]>",
     "@typescript-eslint/parser": "^5.51.0",
-    "ag-charts-community": "10.0.2",
+    "ag-charts-community": "10.1.0",
     "canvas": "^2.10.2",
@@ -81,3 +88,3 @@ "del": "^6.0.0",
   "dependencies": {
-    "ag-charts-community": "10.0.2"
+    "ag-charts-community": "10.1.0"
   },
@@ -84,0 +91,0 @@ "publishConfig": {

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>
+# Enterprise 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-enterprise">
+        <img src="https://img.shields.io/npm/dm/ag-charts-enterprise?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-enterprise">
+        <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-enterprise" 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  Enterprise 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  Enterprise 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 Enterprise
+## 📖 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 Enterprise 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+ Enterprise 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 Enterprise 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 Enterprise 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-enterprise
+```
+
+### Setup
+
+<!-- START SETUP -->
+
+1. Provide a Container
+
+```html
+<!doctype html>
+<html lang="en">
+    <head>
+        <title>AG Charts Quick Start</title>
+        <!--  Enterprise Charts Core Library -->
+        <script src="https://cdn.jsdelivr.net/npm/ag-charts-enterprise/dist/umd/ag-charts-enterprise.js"></script>
+    </head>
+    <body>
+        <!-- Container for Chart -->
+        <div id="myChart"></div>
+        <!-- Charts configuration file -->
+        <script src="index.js"></script>
+    </body>
+</html>
+```
+
+2. Instantiate the Enterprise 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 Enterprise 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>  Enterprise 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

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

7325900

increased by7.82%

Number of package files

273

increased by12.35%

Lines of code

142107

increased by8.42%

Number of lines in readme file

328

increased by190.27%

Number of low supply chain risk alerts

0

decreased by-100%

Dependency changes

• + Addedag-charts-community@10.1.0(transitive)

• + Addedag-charts-locale@10.1.0(transitive)

• + Addedag-charts-types@10.1.0(transitive)

• - Removedag-charts-community@10.0.2(transitive)

• - Removedag-charts-locale@10.0.2(transitive)

• - Removedag-charts-types@10.0.2(transitive)

• Updatedag-charts-community@10.1.0