diff --git a/ej2-javascript/accumulation-chart/funnel.md b/ej2-javascript/accumulation-chart/funnel.md
index 759fbdb5e..43a63c944 100644
--- a/ej2-javascript/accumulation-chart/funnel.md
+++ b/ej2-javascript/accumulation-chart/funnel.md
@@ -226,6 +226,72 @@ Individual points can be customized using the `pointRender` event.
{% previewsample "page.domainurl/code-snippet/chart/chart-types-cs24" %}
{% endif %}
+## Mode
+
+The Funnel chart supports both Standard and Trapezoidal modes of rendering. The default value of the `funnelMode` is `Standard`.
+
+### Standard Mode
+
+The `Standard` funnel mode follows the traditional funnel shape, with the width continuously narrowing down to a point at the bottom.
+
+{% if page.publishingplatform == "typescript" %}
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+{% include code-snippet/chart/chart-types-cs495/index.ts %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/chart/chart-types-cs495/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/chart/chart-types-cs495" %}
+
+{% elsif page.publishingplatform == "javascript" %}
+
+{% tabs %}
+{% highlight js tabtitle="index.js" %}
+{% include code-snippet/chart/chart-types-cs495/index.js %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/chart/chart-types-cs495/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/chart/chart-types-cs495" %}
+{% endif %}
+
+### Trapezoidal Mode
+
+The `Trapezoidal` mode is a modified funnel shape where the width narrows, but features a flattened or parallel section near the top, creating a trapezoidal appearance. This mode helps compare different data points more clearly while maintaining a funnel-like structure.
+
+{% if page.publishingplatform == "typescript" %}
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+{% include code-snippet/chart/chart-types-cs489/index.ts %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/chart/chart-types-cs489/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/chart/chart-types-cs489" %}
+
+{% elsif page.publishingplatform == "javascript" %}
+
+{% tabs %}
+{% highlight js tabtitle="index.js" %}
+{% include code-snippet/chart/chart-types-cs489/index.js %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/chart/chart-types-cs489/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/chart/chart-types-cs489" %}
+{% endif %}
+
## See also
* [Data label](./data-label)
diff --git a/ej2-javascript/accumulation-chart/title-and-sub-title.md b/ej2-javascript/accumulation-chart/title-and-sub-title.md
index 347f8bf79..79059950f 100644
--- a/ej2-javascript/accumulation-chart/title-and-sub-title.md
+++ b/ej2-javascript/accumulation-chart/title-and-sub-title.md
@@ -73,6 +73,37 @@ Accumulation Chart can be customizing a title using [`titleStyle`](../api/accumu
{% previewsample "page.domainurl/code-snippet/chart/chart-types-cs63" %}
{% endif %}
+### Position
+
+The `position` property customizes the placement of the accumulation chart title. It supports the following options: `Right`, `Left`, `Bottom`, `Top`, and `Custom`. The Custom option allows you to position the title anywhere on the chart using x and y coordinates, providing flexible title alignment based on layout requirements.
+
+{% if page.publishingplatform == "typescript" %}
+
+ {% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+{% include code-snippet/chart/chart-types-cs496/index.ts %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/chart/chart-types-cs496/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/chart/chart-types-cs496" %}
+
+{% elsif page.publishingplatform == "javascript" %}
+
+{% tabs %}
+{% highlight js tabtitle="index.js" %}
+{% include code-snippet/chart/chart-types-cs496/index.js %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/chart/chart-types-cs496/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/chart/chart-types-cs496" %}
+{% endif %}
+
## SubTitle
Accumulation Chart can be given a subtitle using [`subTitle`](../api/accumulation-chart/accumulationChartModel/#subtitle) property, to show the information about the data plotted.
@@ -134,3 +165,34 @@ Accumulation Chart can be customizing a subtitle using [`subTitleStyle`](../api/
{% previewsample "page.domainurl/code-snippet/chart/chart-types-cs65" %}
{% endif %}
+
+### Position
+
+The `position` property customizes the placement of the accumulation chart subtitle. It supports the following options: `Right`, `Left`, `Bottom`, `Top`, and `Custom`. The Custom option allows you to position the subtitle anywhere on the chart using x and y coordinates, providing flexible subtitle alignment based on layout requirements.
+
+{% if page.publishingplatform == "typescript" %}
+
+ {% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+{% include code-snippet/chart/chart-types-cs496/index.ts %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/chart/chart-types-cs496/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/chart/chart-types-cs496" %}
+
+{% elsif page.publishingplatform == "javascript" %}
+
+{% tabs %}
+{% highlight js tabtitle="index.js" %}
+{% include code-snippet/chart/chart-types-cs496/index.js %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/chart/chart-types-cs496/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/chart/chart-types-cs496" %}
+{% endif %}
\ No newline at end of file
diff --git a/ej2-javascript/bullet-chart/js/es5-getting-started.md b/ej2-javascript/bullet-chart/js/es5-getting-started.md
index b32a2acfa..bfeb2b5aa 100644
--- a/ej2-javascript/bullet-chart/js/es5-getting-started.md
+++ b/ej2-javascript/bullet-chart/js/es5-getting-started.md
@@ -178,7 +178,7 @@ var data = [
];
```
-Now assign the local data to `dataSource` property. `value` and `target` values should be mapped with `valueName` and `targetName` respectively.
+Now assign the local data to `dataSource` property. `value` and `target` values should be mapped with `valueField` and `targetField` respectively.
{% tabs %}
{% highlight js tabtitle="index.js" %}
diff --git a/ej2-javascript/bullet-chart/ts/getting-started.md b/ej2-javascript/bullet-chart/ts/getting-started.md
index d37e069d1..fc93b099f 100644
--- a/ej2-javascript/bullet-chart/ts/getting-started.md
+++ b/ej2-javascript/bullet-chart/ts/getting-started.md
@@ -172,7 +172,7 @@ let data: any[] = [
{% endhighlight %}
{% endtabs %}
-Now assign the local data to `dataSource` property. `value` and `target` values should be mapped with `valueName` and `targetName` respectively.
+Now assign the local data to `dataSource` property. `value` and `target` values should be mapped with `valueField` and `targetField` respectively.
{% tabs %}
{% highlight ts tabtitle="index.ts" %}
diff --git a/ej2-javascript/chart/Chart-types/scatter.md b/ej2-javascript/chart/Chart-types/scatter.md
index 35ee48a12..b01e8a120 100644
--- a/ej2-javascript/chart/Chart-types/scatter.md
+++ b/ej2-javascript/chart/Chart-types/scatter.md
@@ -173,6 +173,7 @@ The [shape](../../api/chart/markerSettings/#shape) property allows you to custom
{% previewsample "page.domainurl/code-snippet/chart/chart-types-cs351" %}
{% endif %}
+
**Border**
The [border](../../api/chart/series/#border) property allows you to customize the border of the series by defining its [color](../../api/chart/borderModel/#color), [width](../../api/chart/borderModel/#width), and [dashArray](../../api/chart/borderModel/#dasharray).
@@ -187,7 +188,7 @@ The [border](../../api/chart/series/#border) property allows you to customize th
{% include code-snippet/chart/chart-types-cs488/index.html %}
{% endhighlight %}
{% endtabs %}
-
+
{% previewsample "page.domainurl/code-snippet/chart/chart-types-cs488" %}
{% elsif page.publishingplatform == "javascript" %}
@@ -204,7 +205,6 @@ The [border](../../api/chart/series/#border) property allows you to customize th
{% previewsample "page.domainurl/code-snippet/chart/chart-types-cs488" %}
{% endif %}
-
## Empty points
Data points with `null` or `undefined` values are considered empty. Empty data points are ignored and not plotted on the chart.
diff --git a/ej2-javascript/chart/Chart-types/stack-area.md b/ej2-javascript/chart/Chart-types/stack-area.md
index db336c535..61dff44aa 100644
--- a/ej2-javascript/chart/Chart-types/stack-area.md
+++ b/ej2-javascript/chart/Chart-types/stack-area.md
@@ -397,6 +397,83 @@ The [`pointRender`](../../api/chart#pointrender) event allows you to customize e
{% previewsample "page.domainurl/code-snippet/chart/chart-types-cs414" %}
{% endif %}
+## Stack labels
+
+The `stackLabels` in stacked charts display cumulative total values for stack segments directly using data labels. If a stacked point has negative values, the stack labels are displayed below the point.
+
+{% if page.publishingplatform == "typescript" %}
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+{% include code-snippet/chart/chart-types-cs491/index.ts %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/chart/chart-types-cs491/index.html %}
+{% endhighlight %}
+{% highlight ts tabtitle="datasource.ts" %}
+{% include code-snippet/chart/chart-types-cs491/datasource.ts %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/chart/chart-types-cs491" %}
+
+{% elsif page.publishingplatform == "javascript" %}
+
+{% tabs %}
+{% highlight js tabtitle="index.js" %}
+{% include code-snippet/chart/chart-types-cs491/index.js %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/chart/chart-types-cs491/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/chart/chart-types-cs491" %}
+{% endif %}
+
+### Stack labels customization
+Stack labels have various properties for customization to enhance the visual based on your requirements:
+
+* `visible` - Specifies whether stack labels are visible. Setting to true will display the labels. Default is false.
+* `fill` - Defines the background color of the stack labels. Accepts valid CSS color strings (hex, RGBA, etc.). Default is transparent.
+* `format` - Formats the text displayed in the stack labels. Supports placeholders like {value}. Default is null.
+* `angle` - Specifies the rotation angle for stack labels in degrees. Default is 0.
+* `rx` - Defines the rounded corner radius along the X-axis (horizontal direction) for the stack label background. Default is 5.
+* `ry` - Defines the rounded corner radius along the Y-axis (vertical direction) for the stack label background. Default is 5.
+* `margin` - Configures the margin around the stack label (left, right, top, and bottom).
+* `border` - Configures the appearance of the stack label's border.
+* `font` - Customizes the stack label text, including font size, color, style, weight, and family.
+
+{% if page.publishingplatform == "typescript" %}
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+{% include code-snippet/chart/chart-types-cs491A/index.ts %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/chart/chart-types-cs491A/index.html %}
+{% endhighlight %}
+{% highlight ts tabtitle="datasource.ts" %}
+{% include code-snippet/chart/chart-types-cs491A/datasource.ts %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/chart/chart-types-cs491A" %}
+
+{% elsif page.publishingplatform == "javascript" %}
+
+{% tabs %}
+{% highlight js tabtitle="index.js" %}
+{% include code-snippet/chart/chart-types-cs491A/index.js %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/chart/chart-types-cs491A/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/chart/chart-types-cs491A" %}
+{% endif %}
+
## See also
* [Data label](../data-labels)
diff --git a/ej2-javascript/chart/Chart-types/stack-bar.md b/ej2-javascript/chart/Chart-types/stack-bar.md
index 3e206e901..f7548c767 100644
--- a/ej2-javascript/chart/Chart-types/stack-bar.md
+++ b/ej2-javascript/chart/Chart-types/stack-bar.md
@@ -464,6 +464,83 @@ The [`pointRender`](../../api/chart#pointrender) event allows you to customize e
{% previewsample "page.domainurl/code-snippet/chart/chart-types-cs438" %}
{% endif %}
+## Stack labels
+
+The `stackLabels` in stacked charts display cumulative total values for stack segments directly using data labels. If a stacked point has negative values, the stack labels are displayed below the point.
+
+{% if page.publishingplatform == "typescript" %}
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+{% include code-snippet/chart/chart-types-cs492/index.ts %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/chart/chart-types-cs492/index.html %}
+{% endhighlight %}
+{% highlight ts tabtitle="datasource.ts" %}
+{% include code-snippet/chart/chart-types-cs492/datasource.ts %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/chart/chart-types-cs492" %}
+
+{% elsif page.publishingplatform == "javascript" %}
+
+{% tabs %}
+{% highlight js tabtitle="index.js" %}
+{% include code-snippet/chart/chart-types-cs492/index.js %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/chart/chart-types-cs492/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/chart/chart-types-cs492" %}
+{% endif %}
+
+### Stack labels customization
+Stack labels have various properties for customization to enhance the visual based on your requirements:
+
+* `visible` - Specifies whether stack labels are visible. Setting to true will display the labels. Default is false.
+* `fill` - Defines the background color of the stack labels. Accepts valid CSS color strings (hex, RGBA, etc.). Default is transparent.
+* `format` - Formats the text displayed in the stack labels. Supports placeholders like {value}. Default is null.
+* `angle` - Specifies the rotation angle for stack labels in degrees. Default is 0.
+* `rx` - Defines the rounded corner radius along the X-axis (horizontal direction) for the stack label background. Default is 5.
+* `ry` - Defines the rounded corner radius along the Y-axis (vertical direction) for the stack label background. Default is 5.
+* `margin` - Configures the margin around the stack label (left, right, top, and bottom).
+* `border` - Configures the appearance of the stack label's border.
+* `font` - Customizes the stack label text, including font size, color, style, weight, and family.
+
+{% if page.publishingplatform == "typescript" %}
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+{% include code-snippet/chart/chart-types-cs492A/index.ts %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/chart/chart-types-cs492A/index.html %}
+{% endhighlight %}
+{% highlight ts tabtitle="datasource.ts" %}
+{% include code-snippet/chart/chart-types-cs492A/datasource.ts %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/chart/chart-types-cs492A" %}
+
+{% elsif page.publishingplatform == "javascript" %}
+
+{% tabs %}
+{% highlight js tabtitle="index.js" %}
+{% include code-snippet/chart/chart-types-cs492A/index.js %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/chart/chart-types-cs492A/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/chart/chart-types-cs492A" %}
+{% endif %}
+
## See also
* [Data label](../data-labels)
diff --git a/ej2-javascript/chart/Chart-types/stack-column.md b/ej2-javascript/chart/Chart-types/stack-column.md
index e34fe3bdb..6371d1a56 100644
--- a/ej2-javascript/chart/Chart-types/stack-column.md
+++ b/ej2-javascript/chart/Chart-types/stack-column.md
@@ -464,6 +464,84 @@ The [`pointRender`](../../api/chart#pointrender) event allows you to customize e
{% previewsample "page.domainurl/code-snippet/chart/chart-types-cs432" %}
{% endif %}
+## Stack labels
+
+The `stackLabels` in stacked charts display cumulative total values for stack segments directly using data labels. If a stacked point has negative values, the stack labels are displayed below the point.
+
+{% if page.publishingplatform == "typescript" %}
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+{% include code-snippet/chart/chart-types-cs490/index.ts %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/chart/chart-types-cs490/index.html %}
+{% endhighlight %}
+{% highlight ts tabtitle="datasource.ts" %}
+{% include code-snippet/chart/chart-types-cs490/datasource.ts %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/chart/chart-types-cs490" %}
+
+{% elsif page.publishingplatform == "javascript" %}
+
+{% tabs %}
+{% highlight js tabtitle="index.js" %}
+{% include code-snippet/chart/chart-types-cs490/index.js %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/chart/chart-types-cs490/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/chart/chart-types-cs490" %}
+{% endif %}
+
+### Stack labels customization
+Stack labels have various properties for customization to enhance the visual based on your requirements:
+
+* `visible` - Specifies whether stack labels are visible. Setting to true will display the labels. Default is false.
+* `fill` - Defines the background color of the stack labels. Accepts valid CSS color strings (hex, RGBA, etc.). Default is transparent.
+* `format` - Formats the text displayed in the stack labels. Supports placeholders like {value}. Default is null.
+* `angle` - Specifies the rotation angle for stack labels in degrees. Default is 0.
+* `rx` - Defines the rounded corner radius along the X-axis (horizontal direction) for the stack label background. Default is 5.
+* `ry` - Defines the rounded corner radius along the Y-axis (vertical direction) for the stack label background. Default is 5.
+* `margin` - Configures the margin around the stack label (left, right, top, and bottom).
+* `border` - Configures the appearance of the stack label's border.
+* `font` - Customizes the stack label text, including font size, color, style, weight, and family.
+
+{% if page.publishingplatform == "typescript" %}
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+{% include code-snippet/chart/chart-types-cs490A/index.ts %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/chart/chart-types-cs490A/index.html %}
+{% endhighlight %}
+{% highlight ts tabtitle="datasource.ts" %}
+{% include code-snippet/chart/chart-types-cs490A/datasource.ts %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/chart/chart-types-cs490A" %}
+
+{% elsif page.publishingplatform == "javascript" %}
+
+{% tabs %}
+{% highlight js tabtitle="index.js" %}
+{% include code-snippet/chart/chart-types-cs490A/index.js %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/chart/chart-types-cs490A/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/chart/chart-types-cs490A" %}
+{% endif %}
+
+
## See also
* [Data label](../data-labels/)
diff --git a/ej2-javascript/chart/Chart-types/stack-line.md b/ej2-javascript/chart/Chart-types/stack-line.md
index 1fb8c1960..d8c8f3f6e 100644
--- a/ej2-javascript/chart/Chart-types/stack-line.md
+++ b/ej2-javascript/chart/Chart-types/stack-line.md
@@ -427,6 +427,83 @@ The [`pointRender`](../../api/chart#pointrender) event allows you to customize e
{% previewsample "page.domainurl/code-snippet/chart/chart-types-cs406" %}
{% endif %}
+## Stack labels
+
+The `stackLabels` in stacked charts display cumulative total values for stack segments directly using data labels. If a stacked point has negative values, the stack labels are displayed below the point.
+
+{% if page.publishingplatform == "typescript" %}
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+{% include code-snippet/chart/chart-types-cs493/index.ts %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/chart/chart-types-cs493/index.html %}
+{% endhighlight %}
+{% highlight ts tabtitle="datasource.ts" %}
+{% include code-snippet/chart/chart-types-cs493/datasource.ts %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/chart/chart-types-cs493" %}
+
+{% elsif page.publishingplatform == "javascript" %}
+
+{% tabs %}
+{% highlight js tabtitle="index.js" %}
+{% include code-snippet/chart/chart-types-cs493/index.js %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/chart/chart-types-cs493/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/chart/chart-types-cs493" %}
+{% endif %}
+
+### Stack labels customization
+Stack labels have various properties for customization to enhance the visual based on your requirements:
+
+* `visible` - Specifies whether stack labels are visible. Setting to true will display the labels. Default is false.
+* `fill` - Defines the background color of the stack labels. Accepts valid CSS color strings (hex, RGBA, etc.). Default is transparent.
+* `format` - Formats the text displayed in the stack labels. Supports placeholders like {value}. Default is null.
+* `angle` - Specifies the rotation angle for stack labels in degrees. Default is 0.
+* `rx` - Defines the rounded corner radius along the X-axis (horizontal direction) for the stack label background. Default is 5.
+* `ry` - Defines the rounded corner radius along the Y-axis (vertical direction) for the stack label background. Default is 5.
+* `margin` - Configures the margin around the stack label (left, right, top, and bottom).
+* `border` - Configures the appearance of the stack label's border.
+* `font` - Customizes the stack label text, including font size, color, style, weight, and family.
+
+{% if page.publishingplatform == "typescript" %}
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+{% include code-snippet/chart/chart-types-cs493A/index.ts %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/chart/chart-types-cs493A/index.html %}
+{% endhighlight %}
+{% highlight ts tabtitle="datasource.ts" %}
+{% include code-snippet/chart/chart-types-cs493A/datasource.ts %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/chart/chart-types-cs493A" %}
+
+{% elsif page.publishingplatform == "javascript" %}
+
+{% tabs %}
+{% highlight js tabtitle="index.js" %}
+{% include code-snippet/chart/chart-types-cs493A/index.js %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/chart/chart-types-cs493A/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/chart/chart-types-cs493A" %}
+{% endif %}
+
## See also
* [Data label](../data-labels/)
diff --git a/ej2-javascript/chart/Chart-types/stacked-step-area.md b/ej2-javascript/chart/Chart-types/stacked-step-area.md
index 6a1d87dc9..04070132c 100644
--- a/ej2-javascript/chart/Chart-types/stacked-step-area.md
+++ b/ej2-javascript/chart/Chart-types/stacked-step-area.md
@@ -464,6 +464,83 @@ The [`pointRender`](../../api/chart#pointrender) event allows you to customize e
{% previewsample "page.domainurl/code-snippet/chart/chart-types-cs422" %}
{% endif %}
+## Stack labels
+
+The `stackLabels` in stacked charts display cumulative total values for stack segments directly using data labels. If a stacked point has negative values, the stack labels are displayed below the point.
+
+{% if page.publishingplatform == "typescript" %}
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+{% include code-snippet/chart/chart-types-cs494/index.ts %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/chart/chart-types-cs494/index.html %}
+{% endhighlight %}
+{% highlight ts tabtitle="datasource.ts" %}
+{% include code-snippet/chart/chart-types-cs494/datasource.ts %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/chart/chart-types-cs494" %}
+
+{% elsif page.publishingplatform == "javascript" %}
+
+{% tabs %}
+{% highlight js tabtitle="index.js" %}
+{% include code-snippet/chart/chart-types-cs494/index.js %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/chart/chart-types-cs494/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/chart/chart-types-cs494" %}
+{% endif %}
+
+### Stack labels customization
+Stack labels have various properties for customization to enhance the visual based on your requirements:
+
+* `visible` - Specifies whether stack labels are visible. Setting to true will display the labels. Default is false.
+* `fill` - Defines the background color of the stack labels. Accepts valid CSS color strings (hex, RGBA, etc.). Default is transparent.
+* `format` - Formats the text displayed in the stack labels. Supports placeholders like {value}. Default is null.
+* `angle` - Specifies the rotation angle for stack labels in degrees. Default is 0.
+* `rx` - Defines the rounded corner radius along the X-axis (horizontal direction) for the stack label background. Default is 5.
+* `ry` - Defines the rounded corner radius along the Y-axis (vertical direction) for the stack label background. Default is 5.
+* `margin` - Configures the margin around the stack label (left, right, top, and bottom).
+* `border` - Configures the appearance of the stack label's border.
+* `font` - Customizes the stack label text, including font size, color, style, weight, and family.
+
+{% if page.publishingplatform == "typescript" %}
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+{% include code-snippet/chart/chart-types-cs494A/index.ts %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/chart/chart-types-cs494A/index.html %}
+{% endhighlight %}
+{% highlight ts tabtitle="datasource.ts" %}
+{% include code-snippet/chart/chart-types-cs494A/datasource.ts %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/chart/chart-types-cs494A" %}
+
+{% elsif page.publishingplatform == "javascript" %}
+
+{% tabs %}
+{% highlight js tabtitle="index.js" %}
+{% include code-snippet/chart/chart-types-cs494A/index.js %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/chart/chart-types-cs494A/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/chart/chart-types-cs494A" %}
+{% endif %}
+
## See also
* [Data label](../data-labels/)
diff --git a/ej2-javascript/chart/chart-print.md b/ej2-javascript/chart/chart-print.md
index 12f30f3d9..0e935fb3c 100644
--- a/ej2-javascript/chart/chart-print.md
+++ b/ej2-javascript/chart/chart-print.md
@@ -206,4 +206,36 @@ The chart can be exported as an image in the form of a base64 string by utilizin
{% endtabs %}
{% previewsample "page.domainurl/code-snippet/chart/export-cs6" %}
+{% endif %}
+
+## Excel Export
+
+You can export the rendered chart data to Excel in either `XLSX` or `CSV` format. The `excelProperties` property in the `beforeExport` event allows users to customize the exported Excel sheet by modifying row, column, and cell properties before the file is generated. You can customize row titles, column titles, cell values, as well as row and column widths.
+
+
+{% if page.publishingplatform == "typescript" %}
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+{% include code-snippet/chart/export-cs7/index.ts %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/chart/export-cs7/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/chart/export-cs7" %}
+
+{% elsif page.publishingplatform == "javascript" %}
+
+{% tabs %}
+{% highlight js tabtitle="index.js" %}
+{% include code-snippet/chart/export-cs7/index.js %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/chart/export-cs7/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/chart/export-cs7" %}
{% endif %}
\ No newline at end of file
diff --git a/ej2-javascript/chart/cross-hair-and-track-ball.md b/ej2-javascript/chart/cross-hair-and-track-ball.md
index 893b7bcb0..8a13e5f4a 100644
--- a/ej2-javascript/chart/cross-hair-and-track-ball.md
+++ b/ej2-javascript/chart/cross-hair-and-track-ball.md
@@ -169,3 +169,34 @@ Trackball can be enabled by setting the [`enable`](../api/chart/crosshairSetting
{% previewsample "page.domainurl/code-snippet/chart/user-interaction-cs8" %}
{% endif %}
+
+## Crosshair highlight Category
+
+The `highlightCategory` property in the crosshair highlights the background of the entire category when hovered over. The crosshair color can be customized using the `color` property within the `line` configuration.
+
+{% if page.publishingplatform == "typescript" %}
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+{% include code-snippet/chart/user-interaction-cs54/index.ts %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/chart/user-interaction-cs54/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/chart/user-interaction-cs54" %}
+
+{% elsif page.publishingplatform == "javascript" %}
+
+{% tabs %}
+{% highlight js tabtitle="index.js" %}
+{% include code-snippet/chart/user-interaction-cs54/index.js %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/chart/user-interaction-cs54/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/chart/user-interaction-cs54" %}
+{% endif %}
diff --git a/ej2-javascript/chart/tool-tip.md b/ej2-javascript/chart/tool-tip.md
index 667c29eac..902cb2669 100644
--- a/ej2-javascript/chart/tool-tip.md
+++ b/ej2-javascript/chart/tool-tip.md
@@ -205,6 +205,37 @@ The [`fill`](../api/chart/tooltipSettings/#fill) and [`border`](../api/chart/too
{% previewsample "page.domainurl/code-snippet/chart/user-interaction-cs21" %}
{% endif %}
+## ShowNearestTooltip
+
+The `showNearestTooltip` property in the chart tooltip displays tooltips based on the data points closest to the cursor.
+
+{% if page.publishingplatform == "typescript" %}
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+{% include code-snippet/chart/user-interaction-cs55/index.ts %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/chart/user-interaction-cs55/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/chart/user-interaction-cs55" %}
+
+{% elsif page.publishingplatform == "javascript" %}
+
+{% tabs %}
+{% highlight js tabtitle="index.js" %}
+{% include code-snippet/chart/user-interaction-cs55/index.js %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/chart/user-interaction-cs55/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/chart/user-interaction-cs55" %}
+{% endif %}
+
## See also
* [Format the tooltip value](./how-to/tool-tip-format.md)
diff --git a/ej2-javascript/chart/zooming.md b/ej2-javascript/chart/zooming.md
index 88f4cdc24..1e75a9304 100644
--- a/ej2-javascript/chart/zooming.md
+++ b/ej2-javascript/chart/zooming.md
@@ -212,6 +212,40 @@ Using the [`enableScrollbar`](../api/chart/zoomSettingsModel/#enablescrollbar) p
{% previewsample "page.domainurl/code-snippet/chart/user-interaction-cs43" %}
{% endif %}
+### Position
+The `position` property allows users to specify their preferred scrollbar location. By default, both vertical and horizontal scrollbars are rendered near their respective axes. Using the customization options below, you can position the scrollbar as desired:
+
+* Default: `placeNextToAxisLine`.
+* Horizontal scrollbar: Available positions are `Top` and `Bottom`.
+* Vertical scrollbar: Available positions are `Left` and `Right`.
+
+{% if page.publishingplatform == "typescript" %}
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+{% include code-snippet/chart/user-interaction-cs53/index.ts %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/chart/user-interaction-cs53/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/chart/user-interaction-cs53" %}
+
+{% elsif page.publishingplatform == "javascript" %}
+
+{% tabs %}
+{% highlight js tabtitle="index.js" %}
+{% include code-snippet/chart/user-interaction-cs53/index.js %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/chart/user-interaction-cs53/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/chart/user-interaction-cs53" %}
+{% endif %}
+
## Enable animation
Enable the [enableAnimation](../api/chart/zoomSettingsModel/#enableanimation) property to experience smooth transitions when zooming in on the chart.
diff --git a/ej2-javascript/chips/draganddrop.md b/ej2-javascript/chips/draganddrop.md
new file mode 100644
index 000000000..6f4c23b0b
--- /dev/null
+++ b/ej2-javascript/chips/draganddrop.md
@@ -0,0 +1,51 @@
+---
+layout: post
+title: Drag and drop in ##Platform_Name## Chips control | Syncfusion
+description: Learn here all about Drag and drop in Syncfusion ##Platform_Name## Chips control of Syncfusion Essential JS 2 and more.
+platform: ej2-javascript
+control: Drag and drop
+publishingplatform: ##Platform_Name##
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Drag and drop in ##Platform_Name## Chips control
+
+The Chips control enables drag and drop functionality for any chip when [`allowDragAndDrop`](../api/chips#allowdraganddrop) is set to **true**. Chips can be dragged and dropped within the same or across external ChipList containers.
+
+When dragging a chip, an indicator line appears between chips, showing the exact position where the chip will be dropped. This visual indicator helps users place chips precisely at the desired location.
+
+* To prevent dragging action for a specific chip, use the [`dragStart`](../api/chips#dragstart) event, which triggers when chip dragging begins. Similarly, to prevent dropping action for a specific chip, use the [`dragStop`](../api/chips#dragstop) event, which triggers when dragging ends.
+
+* The [`dragging`](../api/chips#dragging) event triggers while a chip is being dragged. You can customize the appearance of the cloned chip element during this event.
+
+* You can set the drag area for the chips using the [`dragArea`](../api/chips#dragarea) property which allows the dragging of cloned chip only within the specified element. It accepts an element Id or class as a string and defaults to `null`.
+
+In the following sample, the [`allowDragAndDrop`](../api/chips#allowdraganddrop) property is enabled.
+
+{% if page.publishingplatform == "typescript" %}
+
+ {% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+{% include code-snippet/chips/draganddrop/index.ts %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/chips/draganddrop/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/chips/draganddrop" %}
+
+{% elsif page.publishingplatform == "javascript" %}
+
+{% tabs %}
+{% highlight js tabtitle="index.js" %}
+{% include code-snippet/chips/draganddrop/index.js %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/chips/draganddrop/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/chips/draganddrop" %}
+{% endif %}
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/ai-assistview/appearance/cssclass/index.css b/ej2-javascript/code-snippet/ai-assistview/appearance/cssclass/index.css
index 3cb69251d..0fb9dc4ad 100644
--- a/ej2-javascript/code-snippet/ai-assistview/appearance/cssclass/index.css
+++ b/ej2-javascript/code-snippet/ai-assistview/appearance/cssclass/index.css
@@ -12,17 +12,3 @@
top: 45%;
width: 30%;
}
-
-.e-aiassistview.custom-container {
- border-color: #e0e0e0;
- background-color: #f4f4f4;
- box-shadow: 3px 3px 10px 0px rgba(0, 0, 0, 0.2);
-}
-
-.e-aiassistview.custom-container .e-view-header .e-toolbar, .e-aiassistview.custom-container .e-view-header .e-toolbar-items {
- background: #d5d5d5;
-}
-
-.e-aiassistview.custom-container .e-view-content .e-input-group {
- border: 3px solid #e0e0e0 !important;
-}
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/ai-assistview/appearance/cssclass/js/index.html b/ej2-javascript/code-snippet/ai-assistview/appearance/cssclass/js/index.html
index 7937ac123..66d87a187 100644
--- a/ej2-javascript/code-snippet/ai-assistview/appearance/cssclass/js/index.html
+++ b/ej2-javascript/code-snippet/ai-assistview/appearance/cssclass/js/index.html
@@ -17,6 +17,21 @@
+
+
+
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/grid/template-aria-label/1.png b/ej2-javascript/code-snippet/grid/template-aria-label/1.png
new file mode 100644
index 000000000..677201146
Binary files /dev/null and b/ej2-javascript/code-snippet/grid/template-aria-label/1.png differ
diff --git a/ej2-javascript/code-snippet/grid/template-aria-label/2.png b/ej2-javascript/code-snippet/grid/template-aria-label/2.png
new file mode 100644
index 000000000..c038c884a
Binary files /dev/null and b/ej2-javascript/code-snippet/grid/template-aria-label/2.png differ
diff --git a/ej2-javascript/code-snippet/grid/template-aria-label/3.png b/ej2-javascript/code-snippet/grid/template-aria-label/3.png
new file mode 100644
index 000000000..02403629b
Binary files /dev/null and b/ej2-javascript/code-snippet/grid/template-aria-label/3.png differ
diff --git a/ej2-javascript/code-snippet/grid/template-aria-label/4.png b/ej2-javascript/code-snippet/grid/template-aria-label/4.png
new file mode 100644
index 000000000..c2166f16a
Binary files /dev/null and b/ej2-javascript/code-snippet/grid/template-aria-label/4.png differ
diff --git a/ej2-javascript/code-snippet/grid/template-aria-label/5.png b/ej2-javascript/code-snippet/grid/template-aria-label/5.png
new file mode 100644
index 000000000..5477dece4
Binary files /dev/null and b/ej2-javascript/code-snippet/grid/template-aria-label/5.png differ
diff --git a/ej2-javascript/code-snippet/grid/template-aria-label/6.png b/ej2-javascript/code-snippet/grid/template-aria-label/6.png
new file mode 100644
index 000000000..c86c4e53d
Binary files /dev/null and b/ej2-javascript/code-snippet/grid/template-aria-label/6.png differ
diff --git a/ej2-javascript/code-snippet/grid/template-aria-label/7.png b/ej2-javascript/code-snippet/grid/template-aria-label/7.png
new file mode 100644
index 000000000..dba7673f8
Binary files /dev/null and b/ej2-javascript/code-snippet/grid/template-aria-label/7.png differ
diff --git a/ej2-javascript/code-snippet/grid/template-aria-label/8.png b/ej2-javascript/code-snippet/grid/template-aria-label/8.png
new file mode 100644
index 000000000..861f5907a
Binary files /dev/null and b/ej2-javascript/code-snippet/grid/template-aria-label/8.png differ
diff --git a/ej2-javascript/code-snippet/grid/template-aria-label/9.png b/ej2-javascript/code-snippet/grid/template-aria-label/9.png
new file mode 100644
index 000000000..6892ac20b
Binary files /dev/null and b/ej2-javascript/code-snippet/grid/template-aria-label/9.png differ
diff --git a/ej2-javascript/code-snippet/grid/template-aria-label/datasource.ts b/ej2-javascript/code-snippet/grid/template-aria-label/datasource.ts
new file mode 100644
index 000000000..34b16355a
--- /dev/null
+++ b/ej2-javascript/code-snippet/grid/template-aria-label/datasource.ts
@@ -0,0 +1,205 @@
+export let employeeData: Object[] = [{
+ 'EmployeeID': 1,
+ 'LastName': 'Davolio',
+ 'FirstName': 'Nancy',
+ 'Title': 'Sales Representative',
+ 'TitleOfCourtesy': 'Ms.',
+ 'BirthDate': new Date(-664743600000),
+ 'HireDate': new Date(704692800000),
+ 'Address': '507 - 20th Ave. E.\r\nApt. 2A',
+ 'City': 'Seattle',
+ 'Region': 'WA',
+ 'PostalCode': '98122',
+ 'Country': 'USA',
+ 'HomePhone': '(206) 555-9857',
+ 'Extension': '5467',
+ 'Photo': { 'Length': 21626 },
+
+ 'Notes': 'Education includes a BA in psychology from Colorado State University in 1970. She also completed\
+ \'The Art of the Cold Call.\' Nancy is a member of Toastmasters International.',
+ 'ReportsTo': 2,
+ 'PhotoPath': 'http://accweb/emmployees/davolio.bmp'
+},
+{
+ 'EmployeeID': 2,
+ 'LastName': 'Fuller',
+ 'FirstName': 'Andrew',
+ 'Title': 'Vice President, Sales',
+ 'TitleOfCourtesy': 'Dr.',
+ 'BirthDate': new Date(-563828400000),
+ 'HireDate': new Date(713764800000),
+ 'Address': '908 W. Capital Way',
+ 'City': 'Tacoma',
+ 'Region': 'WA',
+ 'PostalCode': '98401',
+ 'Country': 'USA',
+ 'HomePhone': '(206) 555-9482',
+ 'Extension': '3457',
+ 'Photo': { 'Length': 21626 },
+
+ 'Notes': 'Andrew received his BTS commercial in 1974 and a Ph.D. in international marketing from the University of \
+ Dallas in 1981. He is fluent in French and Italian and reads German. He joined the company as a sales representative, \
+ was promoted to sales manager in January 1992 and to vice president of sales in March 1993. Andrew is a member of the \
+ Sales Management Roundtable, the Seattle Chamber of Commerce, and the Pacific Rim Importers Association.',
+ 'ReportsTo': 0,
+ 'PhotoPath': 'http://accweb/emmployees/fuller.bmp'
+},
+{
+ 'EmployeeID': 3,
+ 'LastName': 'Leverling',
+ 'FirstName': 'Janet',
+ 'Title': 'Sales Representative',
+ 'TitleOfCourtesy': 'Ms.',
+ 'BirthDate': new Date(-200088000000),
+ 'HireDate': new Date(702104400000),
+ 'Address': '722 Moss Bay Blvd.',
+ 'City': 'Kirkland',
+ 'Region': 'WA',
+ 'PostalCode': '98033',
+ 'Country': 'USA',
+ 'HomePhone': '(206) 555-3412',
+ 'Extension': '3355',
+ 'Photo': { 'Length': 21722 },
+
+ 'Notes': 'Janet has a BS degree in chemistry from Boston College (1984). \
+ She has also completed a certificate program in food retailing management.\
+ Janet was hired as a sales associate in 1991 and promoted to sales representative in February 1992.',
+ 'ReportsTo': 2,
+ 'PhotoPath': 'http://accweb/emmployees/leverling.bmp'
+},
+{
+ 'EmployeeID': 4,
+ 'LastName': 'Peacock',
+ 'FirstName': 'Margaret',
+ 'Title': 'Sales Representative',
+ 'TitleOfCourtesy': 'Mrs.',
+ 'BirthDate': new Date(-1018814400000),
+ 'HireDate': new Date(736401600000),
+ 'Address': '4110 Old Redmond Rd.',
+ 'City': 'Redmond',
+ 'Region': 'WA',
+ 'PostalCode': '98052',
+ 'Country': 'USA',
+ 'HomePhone': '(206) 555-8122',
+ 'Extension': '5176',
+ 'Photo': { 'Length': 21626 },
+
+ 'Notes': 'Margaret holds a BA in English literature from Concordia College (1958) and an MA from the American \
+ Institute of Culinary Arts (1966). She was assigned to the London office temporarily from July through November 1992.',
+ 'ReportsTo': 2,
+ 'PhotoPath': 'http://accweb/emmployees/peacock.bmp'
+},
+{
+ 'EmployeeID': 5,
+ 'LastName': 'Buchanan',
+ 'FirstName': 'Steven',
+ 'Title': 'Sales Manager',
+ 'TitleOfCourtesy': 'Mr.',
+ 'BirthDate': new Date(-468010800000),
+ 'HireDate': new Date(750830400000),
+ 'Address': '14 Garrett Hill',
+ 'City': 'London',
+ 'Region': null,
+ 'PostalCode':
+ 'SW1 8JR',
+ 'Country': 'UK',
+ 'HomePhone': '(71) 555-4848',
+ 'Extension': '3453',
+ 'Photo': { 'Length': 21626 },
+
+ 'Notes': 'Steven Buchanan graduated from St. Andrews University, Scotland, with a BSC degree in 1976. Upon joining the company as \
+ a sales representative in 1992, he spent 6 months in an orientation program at the Seattle office and then returned to his permanent \
+ post in London. He was promoted to sales manager in March 1993. Mr. Buchanan has completed the courses \'Successful \
+ Telemarketing\' and \'International Sales Management.\' He is fluent in French.',
+ 'ReportsTo': 2,
+ 'PhotoPath': 'http://accweb/emmployees/buchanan.bmp'
+},
+{
+ 'EmployeeID': 6,
+ 'LastName': 'Suyama',
+ 'FirstName': 'Michael',
+ 'Title': 'Sales Representative',
+ 'TitleOfCourtesy': 'Mr.',
+ 'BirthDate': new Date(-205185600000),
+ 'HireDate': new Date(750830400000),
+ 'Address': 'Coventry House\r\nMiner Rd.',
+ 'City': 'London',
+ 'Region': null,
+ 'PostalCode': 'EC2 7JR',
+ 'Country': 'UK',
+ 'HomePhone': '(71) 555-7773',
+ 'Extension': '428',
+ 'Photo': { 'Length': 21626 },
+
+ 'Notes': 'Michael is a graduate of Sussex University (MA, economics, 1983) and the University of California at Los Angeles \
+ (MBA, marketing, 1986). He has also taken the courses \'Multi-Cultural Selling\' and \'Time Management for the Sales Professional.\' \
+ He is fluent in Japanese and can read and write French, Portuguese, and Spanish.',
+ 'ReportsTo': 5,
+ 'PhotoPath': 'http://accweb/emmployees/davolio.bmp'
+},
+{
+ 'EmployeeID': 7,
+ 'LastName': 'King',
+ 'FirstName': 'Robert',
+ 'Title': 'Sales Representative',
+ 'TitleOfCourtesy': 'Mr.',
+ 'BirthDate': new Date(-302731200000),
+ 'HireDate': new Date(757486800000),
+ 'Address': 'Edgeham Hollow\r\nWinchester Way',
+ 'City': 'London',
+ 'Region': null,
+ 'PostalCode': 'RG1 9SP',
+ 'Country': 'UK',
+ 'HomePhone': '(71) 555-5598',
+ 'Extension': '465',
+ 'Photo': { 'Length': 21626 },
+
+ 'Notes': 'Robert King served in the Peace Corps and traveled extensively before completing his degree in English at the \
+ University of Michigan in 1992, the year he joined the company. After completing a course entitled \'Selling in Europe,\' \
+ he was transferred to the London office in March 1993.',
+ 'ReportsTo': 5,
+ 'PhotoPath': 'http://accweb/emmployees/davolio.bmp'
+},
+{
+ 'EmployeeID': 8,
+ 'LastName': 'Callahan',
+ 'FirstName': 'Laura',
+ 'Title': 'Inside Sales Coordinator',
+ 'TitleOfCourtesy': 'Ms.',
+ 'BirthDate': new Date(-377982000000),
+ 'HireDate': new Date(762843600000),
+ 'Address': '4726 - 11th Ave. N.E.',
+ 'City': 'Seattle',
+ 'Region': 'WA',
+ 'PostalCode': '98105',
+ 'Country': 'USA',
+ 'HomePhone': '(206) 555-1189',
+ 'Extension': '2344',
+ 'Photo': { 'Length': 21626 },
+
+ 'Notes': 'Laura received a BA in psychology from the University of Washington. She has also completed a course in business \
+ French. She reads and writes French.',
+ 'ReportsTo': 2,
+ 'PhotoPath': 'http://accweb/emmployees/davolio.bmp'
+},
+{
+ 'EmployeeID': 9,
+ 'LastName': 'Dodsworth',
+ 'FirstName': 'Anne',
+ 'Title': 'Sales Representative',
+ 'TitleOfCourtesy': 'Ms.',
+ 'BirthDate': new Date(-123966000000),
+ 'HireDate': new Date(784875600000),
+ 'Address': '7 Houndstooth Rd.',
+ 'City': 'London',
+ 'Region': null,
+ 'PostalCode': 'WG2 7LT',
+ 'Country': 'UK',
+ 'HomePhone': '(71) 555-4444',
+ 'Extension': '452',
+ 'Photo': { 'Length': 21626 },
+
+ 'Notes': 'Anne has a BA degree in English from St. Lawrence College. She is fluent in French and German.',
+ 'ReportsTo': 5,
+ 'PhotoPath': 'http://accweb/emmployees/davolio.bmp'
+}];
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/grid/template-aria-label/es5-datasource.js b/ej2-javascript/code-snippet/grid/template-aria-label/es5-datasource.js
new file mode 100644
index 000000000..48931ebb2
--- /dev/null
+++ b/ej2-javascript/code-snippet/grid/template-aria-label/es5-datasource.js
@@ -0,0 +1,205 @@
+var employeeData = [{
+ 'EmployeeID': 1,
+ 'LastName': 'Davolio',
+ 'FirstName': 'Nancy',
+ 'Title': 'Sales Representative',
+ 'TitleOfCourtesy': 'Ms.',
+ 'BirthDate': new Date(-664743600000),
+ 'HireDate': new Date(704692800000),
+ 'Address': '507 - 20th Ave. E.\r\nApt. 2A',
+ 'City': 'Seattle',
+ 'Region': 'WA',
+ 'PostalCode': '98122',
+ 'Country': 'USA',
+ 'HomePhone': '(206) 555-9857',
+ 'Extension': '5467',
+ 'Photo': { 'Length': 21626 },
+
+ 'Notes': 'Education includes a BA in psychology from Colorado State University in 1970. She also completed\
+ \'The Art of the Cold Call.\' Nancy is a member of Toastmasters International.',
+ 'ReportsTo': 2,
+ 'PhotoPath': 'http://accweb/emmployees/davolio.bmp'
+},
+{
+ 'EmployeeID': 2,
+ 'LastName': 'Fuller',
+ 'FirstName': 'Andrew',
+ 'Title': 'Vice President, Sales',
+ 'TitleOfCourtesy': 'Dr.',
+ 'BirthDate': new Date(-563828400000),
+ 'HireDate': new Date(713764800000),
+ 'Address': '908 W. Capital Way',
+ 'City': 'Tacoma',
+ 'Region': 'WA',
+ 'PostalCode': '98401',
+ 'Country': 'USA',
+ 'HomePhone': '(206) 555-9482',
+ 'Extension': '3457',
+ 'Photo': { 'Length': 21626 },
+
+ 'Notes': 'Andrew received his BTS commercial in 1974 and a Ph.D. in international marketing from the University of \
+ Dallas in 1981. He is fluent in French and Italian and reads German. He joined the company as a sales representative, \
+ was promoted to sales manager in January 1992 and to vice president of sales in March 1993. Andrew is a member of the \
+ Sales Management Roundtable, the Seattle Chamber of Commerce, and the Pacific Rim Importers Association.',
+ 'ReportsTo': 0,
+ 'PhotoPath': 'http://accweb/emmployees/fuller.bmp'
+},
+{
+ 'EmployeeID': 3,
+ 'LastName': 'Leverling',
+ 'FirstName': 'Janet',
+ 'Title': 'Sales Representative',
+ 'TitleOfCourtesy': 'Ms.',
+ 'BirthDate': new Date(-200088000000),
+ 'HireDate': new Date(702104400000),
+ 'Address': '722 Moss Bay Blvd.',
+ 'City': 'Kirkland',
+ 'Region': 'WA',
+ 'PostalCode': '98033',
+ 'Country': 'USA',
+ 'HomePhone': '(206) 555-3412',
+ 'Extension': '3355',
+ 'Photo': { 'Length': 21722 },
+
+ 'Notes': 'Janet has a BS degree in chemistry from Boston College (1984). \
+ She has also completed a certificate program in food retailing management.\
+ Janet was hired as a sales associate in 1991 and promoted to sales representative in February 1992.',
+ 'ReportsTo': 2,
+ 'PhotoPath': 'http://accweb/emmployees/leverling.bmp'
+},
+{
+ 'EmployeeID': 4,
+ 'LastName': 'Peacock',
+ 'FirstName': 'Margaret',
+ 'Title': 'Sales Representative',
+ 'TitleOfCourtesy': 'Mrs.',
+ 'BirthDate': new Date(-1018814400000),
+ 'HireDate': new Date(736401600000),
+ 'Address': '4110 Old Redmond Rd.',
+ 'City': 'Redmond',
+ 'Region': 'WA',
+ 'PostalCode': '98052',
+ 'Country': 'USA',
+ 'HomePhone': '(206) 555-8122',
+ 'Extension': '5176',
+ 'Photo': { 'Length': 21626 },
+
+ 'Notes': 'Margaret holds a BA in English literature from Concordia College (1958) and an MA from the American \
+ Institute of Culinary Arts (1966). She was assigned to the London office temporarily from July through November 1992.',
+ 'ReportsTo': 2,
+ 'PhotoPath': 'http://accweb/emmployees/peacock.bmp'
+},
+{
+ 'EmployeeID': 5,
+ 'LastName': 'Buchanan',
+ 'FirstName': 'Steven',
+ 'Title': 'Sales Manager',
+ 'TitleOfCourtesy': 'Mr.',
+ 'BirthDate': new Date(-468010800000),
+ 'HireDate': new Date(750830400000),
+ 'Address': '14 Garrett Hill',
+ 'City': 'London',
+ 'Region': null,
+ 'PostalCode':
+ 'SW1 8JR',
+ 'Country': 'UK',
+ 'HomePhone': '(71) 555-4848',
+ 'Extension': '3453',
+ 'Photo': { 'Length': 21626 },
+
+ 'Notes': 'Steven Buchanan graduated from St. Andrews University, Scotland, with a BSC degree in 1976. Upon joining the company as \
+ a sales representative in 1992, he spent 6 months in an orientation program at the Seattle office and then returned to his permanent \
+ post in London. He was promoted to sales manager in March 1993. Mr. Buchanan has completed the courses \'Successful \
+ Telemarketing\' and \'International Sales Management.\' He is fluent in French.',
+ 'ReportsTo': 2,
+ 'PhotoPath': 'http://accweb/emmployees/buchanan.bmp'
+},
+{
+ 'EmployeeID': 6,
+ 'LastName': 'Suyama',
+ 'FirstName': 'Michael',
+ 'Title': 'Sales Representative',
+ 'TitleOfCourtesy': 'Mr.',
+ 'BirthDate': new Date(-205185600000),
+ 'HireDate': new Date(750830400000),
+ 'Address': 'Coventry House\r\nMiner Rd.',
+ 'City': 'London',
+ 'Region': null,
+ 'PostalCode': 'EC2 7JR',
+ 'Country': 'UK',
+ 'HomePhone': '(71) 555-7773',
+ 'Extension': '428',
+ 'Photo': { 'Length': 21626 },
+
+ 'Notes': 'Michael is a graduate of Sussex University (MA, economics, 1983) and the University of California at Los Angeles \
+ (MBA, marketing, 1986). He has also taken the courses \'Multi-Cultural Selling\' and \'Time Management for the Sales Professional.\' \
+ He is fluent in Japanese and can read and write French, Portuguese, and Spanish.',
+ 'ReportsTo': 5,
+ 'PhotoPath': 'http://accweb/emmployees/davolio.bmp'
+},
+{
+ 'EmployeeID': 7,
+ 'LastName': 'King',
+ 'FirstName': 'Robert',
+ 'Title': 'Sales Representative',
+ 'TitleOfCourtesy': 'Mr.',
+ 'BirthDate': new Date(-302731200000),
+ 'HireDate': new Date(757486800000),
+ 'Address': 'Edgeham Hollow\r\nWinchester Way',
+ 'City': 'London',
+ 'Region': null,
+ 'PostalCode': 'RG1 9SP',
+ 'Country': 'UK',
+ 'HomePhone': '(71) 555-5598',
+ 'Extension': '465',
+ 'Photo': { 'Length': 21626 },
+
+ 'Notes': 'Robert King served in the Peace Corps and traveled extensively before completing his degree in English at the \
+ University of Michigan in 1992, the year he joined the company. After completing a course entitled \'Selling in Europe,\' \
+ he was transferred to the London office in March 1993.',
+ 'ReportsTo': 5,
+ 'PhotoPath': 'http://accweb/emmployees/davolio.bmp'
+},
+{
+ 'EmployeeID': 8,
+ 'LastName': 'Callahan',
+ 'FirstName': 'Laura',
+ 'Title': 'Inside Sales Coordinator',
+ 'TitleOfCourtesy': 'Ms.',
+ 'BirthDate': new Date(-377982000000),
+ 'HireDate': new Date(762843600000),
+ 'Address': '4726 - 11th Ave. N.E.',
+ 'City': 'Seattle',
+ 'Region': 'WA',
+ 'PostalCode': '98105',
+ 'Country': 'USA',
+ 'HomePhone': '(206) 555-1189',
+ 'Extension': '2344',
+ 'Photo': { 'Length': 21626 },
+
+ 'Notes': 'Laura received a BA in psychology from the University of Washington. She has also completed a course in business \
+ French. She reads and writes French.',
+ 'ReportsTo': 2,
+ 'PhotoPath': 'http://accweb/emmployees/davolio.bmp'
+},
+{
+ 'EmployeeID': 9,
+ 'LastName': 'Dodsworth',
+ 'FirstName': 'Anne',
+ 'Title': 'Sales Representative',
+ 'TitleOfCourtesy': 'Ms.',
+ 'BirthDate': new Date(-123966000000),
+ 'HireDate': new Date(784875600000),
+ 'Address': '7 Houndstooth Rd.',
+ 'City': 'London',
+ 'Region': null,
+ 'PostalCode': 'WG2 7LT',
+ 'Country': 'UK',
+ 'HomePhone': '(71) 555-4444',
+ 'Extension': '452',
+ 'Photo': { 'Length': 21626 },
+
+ 'Notes': 'Anne has a BA degree in English from St. Lawrence College. She is fluent in French and German.',
+ 'ReportsTo': 5,
+ 'PhotoPath': 'http://accweb/emmployees/davolio.bmp'
+}];
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/grid/template-aria-label/index.css b/ej2-javascript/code-snippet/grid/template-aria-label/index.css
new file mode 100644
index 000000000..e2845daa3
--- /dev/null
+++ b/ej2-javascript/code-snippet/grid/template-aria-label/index.css
@@ -0,0 +1,21 @@
+#container {
+ visibility: hidden;
+}
+
+#loader {
+ color: #008cff;
+ font-family: 'Helvetica Neue','calibiri';
+ font-size: 14px;
+ height: 40px;
+ left: 45%;
+ position: absolute;
+ top: 45%;
+ width: 30%;
+}
+
+.image img {
+ border-radius: 50px;
+ box-shadow: inset 0 0 1px #e0e0e0, inset 0 0 14px rgba(0,0,0,0.2);
+ height: 55px;
+ width: 55px;
+}
diff --git a/ej2-javascript/code-snippet/grid/template-aria-label/index.js b/ej2-javascript/code-snippet/grid/template-aria-label/index.js
new file mode 100644
index 000000000..90e4725e7
--- /dev/null
+++ b/ej2-javascript/code-snippet/grid/template-aria-label/index.js
@@ -0,0 +1,24 @@
+var grid = new ej.grids.Grid({
+ dataSource: employeeData,
+ columns: [
+ {
+ headerText: 'Employee Image', textAlign: 'Center',
+ template: '#template', templateOptions: {enableAriaLabel: true}, width: 150
+ },
+ { field: 'FirstName', headerText: 'First Name', template: '#columnTemplate', templateOptions: {enableAriaLabel: false}, width: 100 },
+ { field: 'LastName', headerText: 'Last Name', width: 100 },
+ { field: 'City', headerText: 'City', width: 100 }
+ ],
+ height: 315,
+ queryCellInfo: queryCellInfo,
+});
+grid.appendTo('#Grid');
+
+function queryCellInfo(args) {
+ if (args.column.field === 'FirstName') {
+ var chip = new ej.buttons.ChipList({
+ text: args.data[args.column.field],
+ });
+ chip.appendTo(args.cell.querySelector('#chipElement'));
+ }
+ }
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/grid/template-aria-label/index.ts b/ej2-javascript/code-snippet/grid/template-aria-label/index.ts
new file mode 100644
index 000000000..6b7599c09
--- /dev/null
+++ b/ej2-javascript/code-snippet/grid/template-aria-label/index.ts
@@ -0,0 +1,28 @@
+import { Grid } from '@syncfusion/ej2-grids';
+import { employeeData } from './datasource.ts';
+import { ChipList } from '@syncfusion/ej2-buttons';
+
+let grid: Grid = new Grid({
+ dataSource: employeeData,
+ columns: [
+ {
+ headerText: 'Employee Image', textAlign: 'Center',
+ template: '#template', templateOptions: {enableAriaLabel: true}, width: 150
+ },
+ { field: 'FirstName', headerText: 'First Name', template: '#columnTemplate', templateOptions: {enableAriaLabel: false}, width: 100 },
+ { field: 'LastName', headerText: 'Last Name', width: 100 },
+ { field: 'City', headerText: 'City', width: 100 }
+ ],
+ height: 315,
+ queryCellInfo: queryCellInfo,
+});
+grid.appendTo('#Grid');
+
+function queryCellInfo(args) {
+ if (args.column.field === 'FirstName') {
+ var chip = new ChipList({
+ text: args.data[args.column.field],
+ });
+ chip.appendTo(args.cell.querySelector('#chipElement'));
+ }
+}
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/grid/template-aria-label/js/index.html b/ej2-javascript/code-snippet/grid/template-aria-label/js/index.html
new file mode 100644
index 000000000..a03391088
--- /dev/null
+++ b/ej2-javascript/code-snippet/grid/template-aria-label/js/index.html
@@ -0,0 +1,42 @@
+
+ EJ2 Grid
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
-
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/image-editor/finetune-cs1/ts/index.html b/ej2-javascript/code-snippet/image-editor/finetune-cs1/ts/index.html
index 222b443f7..92dfb1c60 100644
--- a/ej2-javascript/code-snippet/image-editor/finetune-cs1/ts/index.html
+++ b/ej2-javascript/code-snippet/image-editor/finetune-cs1/ts/index.html
@@ -16,7 +16,6 @@
-
@@ -24,18 +23,20 @@
+