2023 Volume 2 - 22.*
diff --git a/ej2-vue/Release-notes/28.1.35.md b/ej2-vue/Release-notes/28.1.35.md
new file mode 100644
index 000000000..09b6341cd
--- /dev/null
+++ b/ej2-vue/Release-notes/28.1.35.md
@@ -0,0 +1,16 @@
+---
+title: Essential Studio for Vue Weekly Release Release Notes
+description: Essential Studio for Vue Weekly Release Release Notes
+platform: ej2-vue
+documentation: ug
+---
+
+# Essential Studio for Vue Release Notes
+
+{% include release-info.html date="December 19, 2024" version="v28.1.35" %}
+
+{% directory path: _includes/release-notes/v28.1.35 %}
+
+{% include {{file.url}} %}
+
+{% enddirectory %}
\ No newline at end of file
diff --git a/ej2-vue/Release-notes/28.1.36.md b/ej2-vue/Release-notes/28.1.36.md
new file mode 100644
index 000000000..ac6c81e74
--- /dev/null
+++ b/ej2-vue/Release-notes/28.1.36.md
@@ -0,0 +1,16 @@
+---
+title: Essential Studio for Vue Weekly Release Release Notes
+description: Essential Studio for Vue Weekly Release Release Notes
+platform: ej2-vue
+documentation: ug
+---
+
+# Essential Studio for Vue Release Notes
+
+{% include release-info.html date="December 24, 2024" version="v28.1.36" %}
+
+{% directory path: _includes/release-notes/v28.1.36 %}
+
+{% include {{file.url}} %}
+
+{% enddirectory %}
\ No newline at end of file
diff --git a/ej2-vue/Release-notes/28.1.37.md b/ej2-vue/Release-notes/28.1.37.md
new file mode 100644
index 000000000..2a652035a
--- /dev/null
+++ b/ej2-vue/Release-notes/28.1.37.md
@@ -0,0 +1,16 @@
+---
+title: Essential Studio for Vue Weekly Release Release Notes
+description: Essential Studio for Vue Weekly Release Release Notes
+platform: ej2-vue
+documentation: ug
+---
+
+# Essential Studio for Vue Release Notes
+
+{% include release-info.html date="December 31, 2024" version="v28.1.37" %}
+
+{% directory path: _includes/release-notes/v28.1.37 %}
+
+{% include {{file.url}} %}
+
+{% enddirectory %}
\ No newline at end of file
diff --git a/ej2-vue/Release-notes/28.1.38.md b/ej2-vue/Release-notes/28.1.38.md
new file mode 100644
index 000000000..2ab3c120c
--- /dev/null
+++ b/ej2-vue/Release-notes/28.1.38.md
@@ -0,0 +1,16 @@
+---
+title: Essential Studio for Vue Weekly Release Release Notes
+description: Essential Studio for Vue Weekly Release Release Notes
+platform: ej2-vue
+documentation: ug
+---
+
+# Essential Studio for Vue Release Notes
+
+{% include release-info.html date="January 07, 2025" version="v28.1.38" %}
+
+{% directory path: _includes/release-notes/v28.1.38 %}
+
+{% include {{file.url}} %}
+
+{% enddirectory %}
\ No newline at end of file
diff --git a/ej2-vue/Release-notes/28.1.39.md b/ej2-vue/Release-notes/28.1.39.md
new file mode 100644
index 000000000..6795652ae
--- /dev/null
+++ b/ej2-vue/Release-notes/28.1.39.md
@@ -0,0 +1,16 @@
+---
+title: Essential Studio for Vue Weekly Release Release Notes
+description: Essential Studio for Vue Weekly Release Release Notes
+platform: ej2-vue
+documentation: ug
+---
+
+# Essential Studio for Vue Release Notes
+
+{% include release-info.html date="January 14, 2025" version="v28.1.39" %}
+
+{% directory path: _includes/release-notes/v28.1.39 %}
+
+{% include {{file.url}} %}
+
+{% enddirectory %}
\ No newline at end of file
diff --git a/ej2-vue/Release-notes/28.1.41.md b/ej2-vue/Release-notes/28.1.41.md
new file mode 100644
index 000000000..c2a8fb8ab
--- /dev/null
+++ b/ej2-vue/Release-notes/28.1.41.md
@@ -0,0 +1,16 @@
+---
+title: Essential Studio for Vue Weekly Release Release Notes
+description: Essential Studio for Vue Weekly Release Release Notes
+platform: ej2-vue
+documentation: ug
+---
+
+# Essential Studio for Vue Release Notes
+
+{% include release-info.html date="January 21, 2025" version="v28.1.41" %}
+
+{% directory path: _includes/release-notes/v28.1.41 %}
+
+{% include {{file.url}} %}
+
+{% enddirectory %}
\ No newline at end of file
diff --git a/ej2-vue/accumulation-chart/advanced-accessibility-configuration.md b/ej2-vue/accumulation-chart/advanced-accessibility-configuration.md
new file mode 100644
index 000000000..680a9cb55
--- /dev/null
+++ b/ej2-vue/accumulation-chart/advanced-accessibility-configuration.md
@@ -0,0 +1,74 @@
+---
+layout: post
+title: Accessibility customization in Syncfusion Vue Pie chart component.
+description: Learn here all about Accessibility customization in Syncfusion Vue Accumulation chart component of Syncfusion Essential JS 2 and more.
+control: Accessibility customization
+platform: ej2-vue
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Accessibility customization
+
+The Syncfusion® Vue Accumulation Chart component is structured to visualize data in a graphical manner. It provides robust customization options for accessibility, allowing you to enhance the user experience for those with disabilities. The main attributes of the Vue Accumulation Chart component's accessibility customization are briefly explained in this section.
+
+The accumulation chart component has a number of characteristics that enable accessibility features to be customized, including:
+
+* [`accessibilityDescription`](https://ej2.syncfusion.com/vue/documentation/api/accumulation-chart/accessibilityModel/#accessibilitydescription) - Provides a text description for the accumulation chart, improving support for screen readers.
+* [`accessibilityRole`](https://ej2.syncfusion.com/vue/documentation/api/accumulation-chart/accessibilityModel/#accessibilityrole) - Specifies the role of the accumulation chart, helping screen readers to identify the element appropriately.
+* [`focusable`](https://ej2.syncfusion.com/vue/documentation/api/accumulation-chart/accessibilityModel/#focusable) - Allows the accumulation chart to receive focus, making it accessible via keyboard navigation.
+* [`focusBorderColor`](https://ej2.syncfusion.com/vue/documentation/api/accumulation-chart/#focusbordercolor) - Sets the color of the focus border, enhancing visibility when the accumulation chart is focused.
+* [`focusBorderMargin`](https://ej2.syncfusion.com/vue/documentation/api/accumulation-chart/#focusbordermargin) - Defines the margin around the focus border.
+* [`focusBorderWidth`](https://ej2.syncfusion.com/vue/documentation/api/accumulation-chart/#focusborderwidth) - Specifies the width of the focus border.
+* [`tabIndex`](https://ej2.syncfusion.com/vue/documentation/api/accumulation-chart/accessibilityModel/#tabindex) - Specifies the tab order for the accumulation chart element, enabling efficient keyboard navigation.
+
+{% tabs %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+{% include code-snippet/chart/accessibility/pie-chart/app-composition.vue %}
+{% endhighlight %}
+{% highlight html tabtitle="Options API (~/src/App.vue)" %}
+{% include code-snippet/chart/accessibility/pie-chart/app.vue %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/chart/accessibility/pie-chart" %}
+
+## Series
+
+The [`series`](https://ej2.syncfusion.com/vue/documentation/api/accumulation-chart/#series) supports the customization of accessibility for data points, allowing key characteristics to be adjusted for enhanced accessibility, such as:
+
+* [`accessibilityDescription`](https://ej2.syncfusion.com/vue/documentation/api/accumulation-chart/accessibilityModel/#accessibilitydescription) - Provides a text description for the series root element, enhancing support for screen readers.
+* [`accessibilityRole`](https://ej2.syncfusion.com/vue/documentation/api/accumulation-chart/accessibilityModel/#accessibilityrole) - Specifies the role of the series, helping screen readers to identify the element appropriately.
+* [`focusable`](https://ej2.syncfusion.com/vue/documentation/api/accumulation-chart/accessibilityModel/#focusable) - Allows the series to receive focus, making it accessible via keyboard navigation.
+* [`tabIndex`](https://ej2.syncfusion.com/vue/documentation/api/accumulation-chart/accessibilityModel/#tabindex) - Specifies the tab order of the series element, enabling efficient keyboard navigation.
+
+{% tabs %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+{% include code-snippet/chart/accessibility/series/app-composition.vue %}
+{% endhighlight %}
+{% highlight html tabtitle="Options API (~/src/App.vue)" %}
+{% include code-snippet/chart/accessibility/series/app.vue %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/chart/accessibility/series" %}
+
+## Legend
+
+The [`legendSettings`](https://ej2.syncfusion.com/vue/documentation/api/accumulation-chart/#legendsettings) provide information about the series shown in the accumulation chart. The following [`accessibility`](https://ej2.syncfusion.com/vue/documentation/api/accumulation-chart/legendSettingsModel/#accessibility) properties in [`legendSettings`](https://ej2.syncfusion.com/vue/documentation/api/accumulation-chart/#legendsettings) can be used to alter the accessibility of the accumulation chart's legend:
+
+* [`accessibilityDescription`](https://ej2.syncfusion.com/vue/documentation/api/accumulation-chart/accessibilityModel/#accessibilitydescription) - Provides a text description for the legend root element, enhancing support for screen readers..
+* [`accessibilityRole`](https://ej2.syncfusion.com/vue/documentation/api/accumulation-chart/accessibilityModel/#accessibilityrole) - Specifies the role of the legend items to screen readers, providing appropriate context.
+* [`focusable`](https://ej2.syncfusion.com/vue/documentation/api/accumulation-chart/accessibilityModel/#focusable) - Specifies whether legend items are focusable via keyboard navigation.
+* [`tabIndex`](https://ej2.syncfusion.com/vue/documentation/api/accumulation-chart/accessibilityModel/#tabindex) - Specifies the tab order of the legend element, enabling efficient keyboard navigation.
+
+{% tabs %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+{% include code-snippet/chart/accessibility/legend/app-composition.vue %}
+{% endhighlight %}
+{% highlight html tabtitle="Options API (~/src/App.vue)" %}
+{% include code-snippet/chart/accessibility/legend/app.vue %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/chart/accessibility/legend" %}
\ No newline at end of file
diff --git a/ej2-vue/accumulation-chart/legend.md b/ej2-vue/accumulation-chart/legend.md
index cd145447c..f799757f5 100644
--- a/ej2-vue/accumulation-chart/legend.md
+++ b/ej2-vue/accumulation-chart/legend.md
@@ -187,4 +187,19 @@ The [`itemPadding`](https://ej2.syncfusion.com/vue/documentation/api/accumulatio
{% endhighlight %}
{% endtabs %}
-{% previewsample "page.domainurl/code-snippet/chart/series/pie-cs19" %}
\ No newline at end of file
+{% previewsample "page.domainurl/code-snippet/chart/series/pie-cs19" %}
+
+## Legend layout
+
+The [`layout`](https://ej2.syncfusion.com/vue/documentation/api/accumulation-chart/legendSettingsModel/#layout) property in [`legendSettings`](https://ej2.syncfusion.com/vue/documentation/api/accumulation-chart/#legendsettings) allows you to display the legend either horizontally or vertically. By default, the [`layout`](https://ej2.syncfusion.com/vue/documentation/api/accumulation-chart/legendSettingsModel/#layout) is set to **Auto**. The [`maximumColumns`](https://ej2.syncfusion.com/vue/documentation/api/accumulation-chart/legendSettingsModel/#maximumcolumns) property in [`legendSettings`](https://ej2.syncfusion.com/vue/documentation/api/accumulation-chart/#legendsettings) defines the maximum number of columns that can be displayed within the available space when using the auto layout. Additionally, enabling the [`fixedWidth`](https://ej2.syncfusion.com/vue/documentation/api/accumulation-chart/legendSettingsModel/#fixedwidth) property in [`legendSettings`](https://ej2.syncfusion.com/vue/documentation/api/accumulation-chart/#legendsettings) ensures that all legend items are displayed with equal widths. The width of each item is determined by the maximum width among the legend items.
+
+{% tabs %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+{% include code-snippet/chart/series/pie-cs41/app-composition.vue %}
+{% endhighlight %}
+{% highlight html tabtitle="Options API (~/src/App.vue)" %}
+{% include code-snippet/chart/series/pie-cs41/app.vue %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/chart/series/pie-cs41" %}
\ No newline at end of file
diff --git a/ej2-vue/accumulation-chart/tool-tip.md b/ej2-vue/accumulation-chart/tool-tip.md
index 0ff10e9ab..79113bb0e 100644
--- a/ej2-vue/accumulation-chart/tool-tip.md
+++ b/ej2-vue/accumulation-chart/tool-tip.md
@@ -128,4 +128,19 @@ By default, tooltip shows information of x and y value in points. You can show m
{% endhighlight %}
{% endtabs %}
-{% previewsample "page.domainurl/code-snippet/chart/series/pie-cs33" %}
\ No newline at end of file
+{% previewsample "page.domainurl/code-snippet/chart/series/pie-cs33" %}
+
+## Enable highlight
+
+By setting the [`enableHighlight`](https://ej2.syncfusion.com/vue/documentation/api/accumulation-chart/tooltipSettingsModel/#enablehighlight) property to **true**, the hovered pie slice is highlighted, while the remaining slices are dimmed, enhancing focus and clarity.
+
+{% tabs %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+{% include code-snippet/chart/series/pie-cs42/app-composition.vue %}
+{% endhighlight %}
+{% highlight html tabtitle="Options API (~/src/App.vue)" %}
+{% include code-snippet/chart/series/pie-cs42/app.vue %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/chart/series/pie-cs42" %}
diff --git a/ej2-vue/appearance/css-variables.md b/ej2-vue/appearance/css-variables.md
index 6467c2985..3927c7dc8 100644
--- a/ej2-vue/appearance/css-variables.md
+++ b/ej2-vue/appearance/css-variables.md
@@ -17,16 +17,19 @@ Syncfusion currently offers two modern and highly customizable themes using CSS
* Material 3 Theme
* Fluent 2 Theme
* Bootstrap 5.3 Theme
+* Tailwind 3.4 Theme
## CSS themes - Syncfusion Vue components
-[Material 3](https://m3.material.io/), [Fluent 2](https://fluent2.microsoft.design/get-started/whatisnew) and [Bootstrap 5.3](https://getbootstrap.com/docs/5.3/getting-started/introduction/) themes have been introduced across all EJ2 Controls, featuring both `light` and `dark` variants. This themes utilizes `CSS variables` to allow easy customization of control colors in CSS format. With this implementation, users can seamlessly switch between light and dark color schemes, providing a flexible solution to meet their preferences and application needs.
+[Material 3](https://m3.material.io/), [Fluent 2](https://fluent2.microsoft.design/get-started/whatisnew), [Bootstrap 5.3](https://getbootstrap.com/docs/5.3/getting-started/introduction/) and [Tailwind 3.4](https://tailwindcss.com/docs/installation) themes have been introduced across all EJ2 Controls, featuring both `light` and `dark` variants. This themes utilizes `CSS variables` to allow easy customization of control colors in CSS format. With this implementation, users can seamlessly switch between light and dark color schemes, providing a flexible solution to meet their preferences and application needs.
> Kindly note that in the Material 3 theme, CSS variables with rgb() values are used for color variables. The use of hex values in this context may lead to improper functionality. For example, in previous versions of the Material theme or other themes, the primary color variable was defined as follows: $primary: #6200ee;. However, in the Material 3 theme, the primary color variable is defined as follows: --color-sf-primary: 98, 0, 238;.
### Utilization of CSS variables in modern themes
-Modern themes like Material 3, Fluent 2 and Bootstrap 5.3 incorporate support with CSS variables, where `Material 3` utilizes `rgb()` values for customizing colors while `Fluent 2` uses `hex` values for color customization. `Bootstrap 5.3` allows color customization with both `rgb()` and `hex` values. For more information you can refer this [documentation](./theme#syncfusion-material-3-theme) for color variables of these themes. The examples below shows CSS variables with their values used for the respective themes.
+Modern themes make it easy to change the colors of controls using CSS variables. Each theme has its own way of setting these variables, so it's important to follow the specific instructions for each theme. Doing this helps keep the styling consistent and efficient across different parts of your application.
+
+Below are examples of how CSS variables can be defined for these themes:
{% tabs %}
{% highlight ts tabtitle="material3.css" %}
@@ -38,6 +41,9 @@ Modern themes like Material 3, Fluent 2 and Bootstrap 5.3 incorporate support wi
{% highlight ts tabtitle="bootstrap5.3.css" %}
{% include code-snippet/common/css-value-cs1/bootstrap5.3.css %}
{% endhighlight %}
+{% highlight css tabtitle="tailwind3.4.css" %}
+{% include code-snippet/common/css-value-cs1/tailwind3.css %}
+{% endhighlight %}
{% endtabs %}
### How to get these themes?
@@ -52,9 +58,11 @@ To access themes provided by Syncfusion, you have two primary options,
|Package | [Material 3 Light](https://www.npmjs.com/package/@syncfusion/ej2-material3-theme) | [Material 3 Dark](https://www.npmjs.com/package/@syncfusion/ej2-material3-dark-theme) |
| | [Fluent 2 Light](https://www.npmjs.com/package/@syncfusion/ej2-fluent2-theme) | [Fluent 2 Dark](https://www.npmjs.com/package/@syncfusion/ej2-fluent2-dark-theme) |
| | [Bootstrap 5.3 Light](https://www.npmjs.com/package/@syncfusion/ej2-bootstrap5.3-theme) | [Bootstrap 5.3 Dark](https://www.npmjs.com/package/@syncfusion/ej2-bootstrap5.3-dark-theme) |
+| | [Tailwind 3.4 Light](https://www.npmjs.com/package/@syncfusion/ej2-tailwind3-theme) | [Tailwind 3.4 Dark](https://www.npmjs.com/package/@syncfusion/ej2-tailwind3-dark-theme) |
| CDN | [Material 3 Light](https://cdn.syncfusion.com/ej2/27.1.48/material3.css) | [Material 3 Dark](https://cdn.syncfusion.com/ej2/27.1.48/material3-dark.css) |
| | [Fluent 2 light](https://cdn.syncfusion.com/ej2/27.1.48/fluent2.css) | [Fluent 2 Dark](https://cdn.syncfusion.com/ej2/27.1.48/fluent2-dark.css) |
| | [Bootstrap5.3 light](https://cdn.syncfusion.com/ej2/27.1.48/bootstrap5.3.css) | [Bootstrap 5.3 Dark](https://cdn.syncfusion.com/ej2/27.1.48/bootstrap5.3-dark.css) |
+| | [Tailwind 3.4 Light](https://cdn.syncfusion.com/ej2/28.1.33/tailwind3.css) | [Tailwind 3.4 Dark](https://cdn.syncfusion.com/ej2/28.1.33/tailwind3-dark.css) |
### Color Customization in themes
@@ -116,11 +124,29 @@ Example for `Bootstrap 5.3` customization using CSS class.
+Example for `Tailwind 3.4` customization using CSS class.
+
+{% tabs %}
+{% highlight html tabtitle="app.vue" %}
+{% include code-snippet/common/tailwind3-cs2/app.vue %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/common/tailwind3-cs2" %}
+
+**Default primary value**
+
+
+
+**Customized primary value**
+
+
+
With this CSS variable support, you can effortlessly customize the color variable values for Syncfusion Vue Components.
### Switching Light and Dark mode with CSS variables
-Switching between modes has become easier with the updated modern themes, which offer Light and Dark variants. In both the `Material 3` and `Fluent 2` light themes, there are distinct class variables for light and dark modes in a `single file`, providing flexibility for seamless switching between the two modes within your application.
+Switching between modes has become easier with the updated modern themes, which offer Light and Dark variants. In all themes, there are distinct class variables for light and dark modes in a `single file`, providing flexibility for seamless switching between the two modes within your application.
{% tabs %}
{% highlight html tabtitle="app.vue" %}
@@ -154,9 +180,21 @@ Similar to `Fluent 2`, we offer both Light and Dark variants with `Bootstrap 5.3
{% previewsample "page.domainurl/code-snippet/common/bootstrap5.3-cs1" %}
+### Mode switching in Tailwind 3.4 theme
+
+Similar to `Fluent 2`, we offer both Light and Dark variants with `Tailwind 3.4`. In the Tailwind 3.4 theme, there are distinct class variables for light and dark modes, as shown in the preview below.
+
+{% tabs %}
+{% highlight html tabtitle="app.vue" %}
+{% include code-snippet/common/tailwind3-cs1/app.vue %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/common/tailwind3-cs1" %}
+
### How to switch dark mode?
-To activate dark mode, just append the `e-dark-mode` class to the body section of your application for both `Material 3`, `Fluent 2` and `Bootstrap 5.3` themes. Once applied, the theme seamlessly switches to dark mode. Please refer to the example image below for visual guidance.
+To activate dark mode, just append the `e-dark-mode` class to the body section of your application for both `Material 3`, `Fluent 2`, `Bootstrap 5.3` and `Tailwind 3.4` themes. Once applied, the theme seamlessly switches to dark mode. Please refer to the example image below for visual guidance.
`Material 3` dark mode
@@ -170,6 +208,10 @@ To activate dark mode, just append the `e-dark-mode` class to the body section o
+`Tailwind 3.4` dark mode
+
+
+
### ThemeStudio Application
The ThemeStudio application now includes seamless integration with the Material 3, Fluent 2 and Bootstrap 5.3 themes, offering a comprehensive solution for customization requirements. This enhancement enables users to effortlessly customize and personalize their themes.
diff --git a/ej2-vue/appearance/icons.md b/ej2-vue/appearance/icons.md
index 08529e6b9..e42c32744 100644
--- a/ej2-vue/appearance/icons.md
+++ b/ej2-vue/appearance/icons.md
@@ -193,6 +193,10 @@ The complete package of Essential JS 2 icons is listed below. The corresponding
+### Tailwind 3.4
+
+
+
### Fluent 2
diff --git a/ej2-vue/appearance/images/tailwind3-customize.png b/ej2-vue/appearance/images/tailwind3-customize.png
new file mode 100644
index 000000000..837249c88
Binary files /dev/null and b/ej2-vue/appearance/images/tailwind3-customize.png differ
diff --git a/ej2-vue/appearance/images/tailwind3-dark.png b/ej2-vue/appearance/images/tailwind3-dark.png
new file mode 100644
index 000000000..14160b09a
Binary files /dev/null and b/ej2-vue/appearance/images/tailwind3-dark.png differ
diff --git a/ej2-vue/appearance/images/tailwind3-default.png b/ej2-vue/appearance/images/tailwind3-default.png
new file mode 100644
index 000000000..9c0ad784a
Binary files /dev/null and b/ej2-vue/appearance/images/tailwind3-default.png differ
diff --git a/ej2-vue/appearance/theme.md b/ej2-vue/appearance/theme.md
index 5ed0b23a7..47b9388b2 100644
--- a/ej2-vue/appearance/theme.md
+++ b/ej2-vue/appearance/theme.md
@@ -14,6 +14,8 @@ The Syncfusion Vue library has provided the below list of in-built themes,
|Theme |Style Sheet Name|
|--------|--------|
+|Tailwind 3.4 | tailwind3.css |
+|Tailwind 3.4 Dark | tailwind3-dark.css |
|Bootstrap 5.3 | bootstrap5.3.css |
|Bootstrap 5.3 Dark | bootstrap5.3-dark.css |
|Fluent 2 | fluent2.css |
@@ -148,6 +150,215 @@ To refer to individual component's optimized CSS files from an individual packag
The below list of common variables used in the Syncfusion Vue library themes for all components. You can change these variables to customize the corresponding theme.
+### Syncfusion Tailwind 3.4 theme
+
+
+
+
+
+
Name
+
Value (Default Theme)
+
Value (Dark Theme)
+
+
+
+
+
--color-sf-black
+
+ rgb(0,0,0)
+
+
+ rgb(0,0,0)
+
+
+
+
--color-sf-white
+
+ rgb(255,255,255)
+
+
+ rgb(255,255,255)
+
+
+
+
--color-sf-primary
+
+ rgba(79, 70, 229)
+
+
+ rgba(99, 102, 241)
+
+
+
+
--color-sf-primary-text-color
+
+ #fff
+
+
+ #fff
+
+
+
+
--color-sf-primary-light
+
+ #3730a3
+
+
+ #3730a3
+
+
+
+
--color-sf-primary-lighter
+
+ #e0e7ff
+
+
+ #1e1b4b
+
+
+
+
--color-sf-primary-dark
+
+ #4338ca
+
+
+ #818cf8
+
+
+
+
--color-sf-primary-darker
+
+ #3730a3
+
+
+ #4f46e5
+
+
+
+
--color-sf-success
+
+ #15803d
+
+
+ #22c55e
+
+
+
+
--color-sf-info
+
+ #0e7490
+
+
+ #38bdf8
+
+
+
+
--color-sf-warning
+
+ #c2410c
+
+
+ #f97316
+
+
+
+
--color-sf-danger
+
+ #dc2626
+
+
+ #f87171
+
+
+
+
--color-sf-success-light
+
+ #dcfce7
+
+
+ #164c37
+
+
+
+
--color-sf-info-light
+
+ #cffafe
+
+
+ #0e485b
+
+
+
+
--color-sf-warning-light
+
+ #ffedd5
+
+
+ #573422
+
+
+
+
--color-sf-danger-light
+
+ #fee2e2
+
+
+ #54252f
+
+
+
+
--color-sf-success-dark
+
+ #166534
+
+
+ #4ade80
+
+
+
+
--color-sf-info-dark
+
+ #155e75
+
+
+ #38bdf8
+
+
+
+
--color-sf-warning-dark
+
+ #9a3412
+
+
+ #fb923c
+
+
+
+
--color-sf-danger-dark
+
+ #b91c1c
+
+
+ #ef4444
+
+
+
+
+
### Syncfusion Bootstrap 5.3 theme
diff --git a/ej2-vue/auto-complete/resize.md b/ej2-vue/auto-complete/resize.md
new file mode 100644
index 000000000..b1498bd34
--- /dev/null
+++ b/ej2-vue/auto-complete/resize.md
@@ -0,0 +1,27 @@
+---
+layout: post
+title: Resizing in Vue AutoComplete component | Syncfusion
+description: Learn here all about Popup Resizing in Syncfusion Vue AutoComplete component of Syncfusion Essential JS 2 and more.
+control: Resizing
+platform: ej2-vue
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Resizing in Vue AutoComplete component
+
+You can dynamically adjust the size of the popup in the Autocomplete component by using the [AllowResize](https://ej2.syncfusion.com/vue/documentation/api/auto-complete/#allowresize) property. When enabled, users can resize the popup, improving visibility and control, with the resized dimensions being retained across sessions for a consistent user experience.
+
+The following sample illustrates the implementation of the Popup Resize feature.
+
+{% tabs %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+{% include code-snippet/auto-complete/getting-started-cs27/app-composition.vue %}
+{% endhighlight %}
+{% highlight html tabtitle="Options API (~/src/App.vue)" %}
+{% include code-snippet/auto-complete/getting-started-cs27/app.vue %}
+{% endhighlight %}
+{% endtabs %}
+
+
+
diff --git a/ej2-vue/avatar/vue-3-getting-started.md b/ej2-vue/avatar/vue-3-getting-started.md
index b8e1cad48..b0addd870 100644
--- a/ej2-vue/avatar/vue-3-getting-started.md
+++ b/ej2-vue/avatar/vue-3-getting-started.md
@@ -165,7 +165,7 @@ Here is the summarized code for the above steps in the **src/App.vue** file:
/* Add your custom avatar image. */
.e-avatar {
- background-image: url(https://ej2.syncfusion.com/vue/documentation/samples/avatar/media-formats-cs1/pic01.png);
+ background-image: url(https://ej2.syncfusion.com/demos/src/grid/images/2.png);
margin: 2px;
}
diff --git a/ej2-vue/carousel/accessibility.md b/ej2-vue/carousel/accessibility.md
index bc5a9cd51..698a60d31 100644
--- a/ej2-vue/carousel/accessibility.md
+++ b/ej2-vue/carousel/accessibility.md
@@ -54,7 +54,9 @@ The Carousel component is designed by considering [WAI-ARIA](https://www.w3.org/
## Keyboard interaction
-By default, keyboard navigation is enabled. This component implements keyboard navigation support by following the WAI-ARIA practices. Once focused on the active Carousel element, you can use the following key combination for interacting with the Carousel.
+All Carousel actions can be controlled using keyboard keys through the [`allowKeyboardInteraction`](https://ej2.syncfusion.com/vue/documentation/api/carousel/#allowkeyboardinteraction) property, which is enabled by default. If you wish to disable the default keyboard interactions, you can set this property to `false`. This is particularly useful if the carousel contains input elements, as pressing the arrow keys might cause the carousel to move unexpectedly. By disabling keyboard interaction, the carousel remains static, allowing the user to focus on the input fields without any interruptions.
+
+This control implements keyboard navigation support by following WAI-ARIA practices. Once focused on the active Carousel element, you can use the following key combinations to interact with the Carousel.
| Key | Description |
| ------------------ | --------------------------------------------------------------- |
diff --git a/ej2-vue/chart/advanced-accessibility-configuration.md b/ej2-vue/chart/advanced-accessibility-configuration.md
new file mode 100644
index 000000000..6e2bcb517
--- /dev/null
+++ b/ej2-vue/chart/advanced-accessibility-configuration.md
@@ -0,0 +1,175 @@
+---
+layout: post
+title: Accessibility customization in Vue Chart component | Syncfusion
+description: Learn here all about Accessibility customization in Syncfusion Vue Chart component of Syncfusion Essential JS 2 and more.
+control: Accessibility customization
+platform: ej2-vue
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Accessibility customization in Vue Chart component
+
+The Syncfusion® Vue Chart component is structured to visualize data in a graphical manner. It provides robust customization options for accessibility, allowing you to enhance the user experience for those with disabilities. The main attributes of the Vue Chart component's accessibility customization are briefly explained in this section.
+
+The chart component has a number of characteristics that enable accessibility features to be customized, including:
+
+* [`accessibilityDescription`](https://ej2.syncfusion.com/vue/documentation/api/chart/accessibilityModel/#accessibilitydescription) - Provides a text description for the chart, improving support for screen readers.
+* [`accessibilityRole`](https://ej2.syncfusion.com/vue/documentation/api/chart/accessibilityModel/#accessibilityrole) - Specifies the role of the chart, helping screen readers to identify the element appropriately.
+* [`focusable`](https://ej2.syncfusion.com/vue/documentation/api/chart/accessibilityModel/#focusable) - Allows the chart to receive focus, making it accessible via keyboard navigation.
+* [`focusBorderColor`](https://ej2.syncfusion.com/vue/documentation/api/chart#focusbordercolor) - Sets the color of the focus border, enhancing visibility when the chart is focused.
+* [`focusBorderMargin`](https://ej2.syncfusion.com/vue/documentation/api/chart#focusbordermargin) - Defines the margin around the focus border.
+* [`focusBorderWidth`](https://ej2.syncfusion.com/vue/documentation/api/chart#focusborderwidth) - Specifies the width of the focus border.
+* [`tabIndex`](https://ej2.syncfusion.com/vue/documentation/api/chart/accessibilityModel/#tabindex) - Specifies the tab order of the chart element, enabling efficient keyboard navigation.
+
+{% tabs %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+{% include code-snippet/chart/accessibility/line-chart/app-composition.vue %}
+{% endhighlight %}
+{% highlight html tabtitle="Options API (~/src/App.vue)" %}
+{% include code-snippet/chart/accessibility/line-chart/app.vue %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/chart/accessibility/line-chart" %}
+
+## Series
+
+The [`series`](https://ej2.syncfusion.com/vue/documentation/api/chart#series) supports the customization of accessibility for data points, allowing key characteristics to be adjusted for enhanced accessibility, such as:
+
+* [`accessibilityDescription`](https://ej2.syncfusion.com/vue/documentation/api/chart/seriesAccessibilityModel/#accessibilitydescription) - Provides a text description for the series root element, enhancing support for screen readers.
+* [`accessibilityDescriptionFormat`](https://ej2.syncfusion.com/vue/documentation/api/chart/seriesAccessibilityModel/#accessibilitydescriptionformat) - Specifies a format for the accessibility description of each point in the series, allowing dynamic content. The format string can include the placeholders such as ${series.name}, ${point.x}, ${point.y}, ${point.high}, etc. For example, the format "${series.name} : ${point.x}" displays the series name and x-value of the point in the accessibility description. Data point's values like high, low, open, and close are applicable based on the series types.
+* [`accessibilityRole`](https://ej2.syncfusion.com/vue/documentation/api/chart/seriesAccessibilityModel/#accessibilityrole) - Specifies the role of the series, helping screen readers to identify the element appropriately.
+* [`focusable`](https://ej2.syncfusion.com/vue/documentation/api/chart/seriesAccessibilityModel/#focusable) - Allows the series to receive focus, making it accessible via keyboard navigation.
+* [`tabIndex`](https://ej2.syncfusion.com/vue/documentation/api/chart/seriesAccessibilityModel/#tabindex) - Specifies the tab order of the series element, enabling efficient keyboard navigation.
+
+{% tabs %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+{% include code-snippet/chart/accessibility/column-series/app-composition.vue %}
+{% endhighlight %}
+{% highlight html tabtitle="Options API (~/src/App.vue)" %}
+{% include code-snippet/chart/accessibility/column-series/app.vue %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/chart/accessibility/column-series" %}
+
+## Title and subtitle
+
+In the Vue chart component, the [`titleStyle`](https://ej2.syncfusion.com/vue/documentation/api/chart#titlestyle) and [`subTitleStyle`](https://ej2.syncfusion.com/vue/documentation/api/chart#subtitlestyle) attributes allow you to customize the accessibility of the chart's title and subtitle. The following [`accessibility`](https://ej2.syncfusion.com/vue/documentation/api/chart/titleSettingsModel/#accessibility) properties in [`titleStyle`](https://ej2.syncfusion.com/vue/documentation/api/chart#titlestyle) and [`subTitleStyle`](https://ej2.syncfusion.com/vue/documentation/api/chart#subtitlestyle) can be customized for accessibility:
+
+* [`accessibilityDescription`](https://ej2.syncfusion.com/vue/documentation/api/chart/accessibilityModel/#accessibilitydescription) - Provides a text description for the chart title and subtitle, enhancing support for screen readers.
+* [`accessibilityRole`](https://ej2.syncfusion.com/vue/documentation/api/chart/accessibilityModel/#accessibilityrole) - Specifies the role of the chart title and subtitle, helping screen readers to identify the element appropriately.
+* [`focusable`](https://ej2.syncfusion.com/vue/documentation/api/chart/accessibilityModel/#focusable) - Enables or disables the keyboard navigation focus for the title and subtitle.
+* [`tabIndex`](https://ej2.syncfusion.com/vue/documentation/api/chart/accessibilityModel/#tabindex) - Specifies the tab order of the title and subtitle element, enabling efficient keyboard navigation.
+
+{% tabs %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+{% include code-snippet/chart/accessibility/title/app-composition.vue %}
+{% endhighlight %}
+{% highlight html tabtitle="Options API (~/src/App.vue)" %}
+{% include code-snippet/chart/accessibility/title/app.vue %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/chart/accessibility/title" %}
+
+## Annotations
+
+The [`annotations`](https://ej2.syncfusion.com/vue/documentation/api/chart#annotations) property allows you to add annotations to the chart in specific regions. The following [`accessibility`](https://ej2.syncfusion.com/vue/documentation/api/chart/chartAnnotationSettingsModel/#accessibility) properties in [`annotations`](https://ej2.syncfusion.com/vue/documentation/api/chart#annotations) can be customized for accessibility:
+
+* [`accessibilityDescription`](https://ej2.syncfusion.com/vue/documentation/api/chart/accessibilityModel/#accessibilitydescription) - Provides a text description for the annotation, enhancing support for screen readers.
+* [`accessibilityRole`](https://ej2.syncfusion.com/vue/documentation/api/chart/accessibilityModel/#accessibilityrole) - Specifies the role of the annotation, helping screen readers to identify the element appropriately.
+* [`focusable`](https://ej2.syncfusion.com/vue/documentation/api/chart/accessibilityModel/#focusable) - Specifies whether annotations are focusable via keyboard navigation.
+* [`tabIndex`](https://ej2.syncfusion.com/vue/documentation/api/chart/accessibilityModel/#tabindex) - Specifies the tab order of the annotation element, enabling efficient keyboard navigation.
+
+{% tabs %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+{% include code-snippet/chart/accessibility/annotation/app-composition.vue %}
+{% endhighlight %}
+{% highlight html tabtitle="Options API (~/src/App.vue)" %}
+{% include code-snippet/chart/accessibility/annotation/app.vue %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/chart/accessibility/annotation" %}
+
+## Trendline
+
+The [`trendlines`](https://ej2.syncfusion.com/vue/documentation/api/chart#trendlinemodule) property allows you to display trends in the data. The following [`accessibility`](https://ej2.syncfusion.com/vue/documentation/api/chart/trendlineModel/#accessibility) properties in [`trendlines`](https://ej2.syncfusion.com/vue/documentation/api/chart#trendlinemodule) can be customized for accessibility:
+
+* [`accessibilityDescription`](https://ej2.syncfusion.com/vue/documentation/api/chart/accessibilityModel/#accessibilitydescription) - Provides a text description for the trendline, enhancing support for screen readers.
+* [`accessibilityRole`](https://ej2.syncfusion.com/vue/documentation/api/chart/accessibilityModel/#accessibilityrole) - Specifies the role of the trendline, helping screen readers to identify the element appropriately.
+* [`focusable`](https://ej2.syncfusion.com/vue/documentation/api/chart/accessibilityModel/#focusable) - Specifies whether trendlines are focusable via keyboard navigation.
+* [`tabIndex`](https://ej2.syncfusion.com/vue/documentation/api/chart/accessibilityModel/#tabindex) - Specifies the tab order of the trendline element, enabling efficient keyboard navigation.
+
+{% tabs %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+{% include code-snippet/chart/accessibility/trendline/app-composition.vue %}
+{% endhighlight %}
+{% highlight html tabtitle="Options API (~/src/App.vue)" %}
+{% include code-snippet/chart/accessibility/trendline/app.vue %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/chart/accessibility/trendline" %}
+
+## Zooming
+
+The [`zoomSettings`](https://ej2.syncfusion.com/vue/documentation/api/chart#zoomsettings) attributes allow you to adjust the chart's zooming capability. The following [`accessibility`](https://ej2.syncfusion.com/vue/documentation/api/chart/zoomSettingsModel/#accessibility) properties in [`zoomSettings`](https://ej2.syncfusion.com/vue/documentation/api/chart#zoomsettings) offer the parameters for accessibility customization:
+
+* [`accessibilityDescription`](https://ej2.syncfusion.com/vue/documentation/api/chart/accessibilityModel/#accessibilitydescription) - Provides a text description for the zoom toolkit items, enhancing support for screen readers.
+* [`accessibilityRole`](https://ej2.syncfusion.com/vue/documentation/api/chart/accessibilityModel/#accessibilityrole) - Specifies the role of the zoom toolkit items, helping screen readers to identify the element appropriately.
+* [`focusable`](https://ej2.syncfusion.com/vue/documentation/api/chart/accessibilityModel/#focusable) - Specifies whether zoom toolkit items are focusable via keyboard navigation.
+* [`tabIndex`](https://ej2.syncfusion.com/vue/documentation/api/chart/accessibilityModel/#tabindex) - Specifies the tab order of the zooming element, enabling efficient keyboard navigation.
+
+{% tabs %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+{% include code-snippet/chart/accessibility/zoom/app-composition.vue %}
+{% endhighlight %}
+{% highlight html tabtitle="Options API (~/src/App.vue)" %}
+{% include code-snippet/chart/accessibility/zoom/app.vue %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/chart/accessibility/zoom" %}
+
+## Technical indicators
+
+The [`indicators`](https://ej2.syncfusion.com/vue/documentation/api/chart#indicators) property allows you to analyze the trends and patterns in the data. The following [`accessibility`](https://ej2.syncfusion.com/vue/documentation/api/chart/technicalIndicatorModel/#accessibility) properties in [`indicators`](https://ej2.syncfusion.com/vue/documentation/api/chart#indicators) can be customized for accessibility:
+
+* [`accessibilityDescription`](https://ej2.syncfusion.com/vue/documentation/api/chart/accessibilityModel/#accessibilitydescription) - Provides a text description for the indicators, enhancing support for screen readers.
+* [`accessibilityRole`](https://ej2.syncfusion.com/vue/documentation/api/chart/accessibilityModel/#accessibilityrole) - Specifies the role of the indicators, helping screen readers to identify the element appropriately.
+* [`focusable`](https://ej2.syncfusion.com/vue/documentation/api/chart/accessibilityModel/#focusable) - Specifies whether indicators are focusable via keyboard navigation.
+* [`tabIndex`](https://ej2.syncfusion.com/vue/documentation/api/chart/accessibilityModel/#tabindex) - Specifies the tab order of the indicators element, enabling efficient keyboard navigation.
+
+{% tabs %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+{% include code-snippet/chart/accessibility/indicator/app-composition.vue %}
+{% endhighlight %}
+{% highlight html tabtitle="Options API (~/src/App.vue)" %}
+{% include code-snippet/chart/accessibility/indicator/app.vue %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/chart/accessibility/indicator" %}
+
+## Legend
+
+The [`legendSettings`](https://ej2.syncfusion.com/vue/documentation/api/chart#legendsettings) provide information about the series shown in the chart. The following [`accessibility`](https://ej2.syncfusion.com/vue/documentation/api/chart/legendSettingsModel/#accessibility) properties in [`legendSettings`](https://ej2.syncfusion.com/vue/documentation/api/chart#legendsettings) can be used to alter the accessibility of the chart's legend:
+
+* [`accessibilityDescription`](https://ej2.syncfusion.com/vue/documentation/api/chart/accessibilityModel/#accessibilitydescription) - Provides a text description for the legend root element, enhancing support for screen readers.
+* [`accessibilityRole`](https://ej2.syncfusion.com/vue/documentation/api/chart/accessibilityModel/#accessibilityrole) - Specifies the role of the legend items to screen readers, providing appropriate context.
+* [`focusable`](https://ej2.syncfusion.com/vue/documentation/api/chart/accessibilityModel/#focusable) - Specifies whether legend items are focusable via keyboard navigation.
+* [`tabIndex`](https://ej2.syncfusion.com/vue/documentation/api/chart/accessibilityModel/#tabindex) - Specifies the tab order of the legend element, enabling efficient keyboard navigation.
+
+{% tabs %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+{% include code-snippet/chart/accessibility/chart-legend/app-composition.vue %}
+{% endhighlight %}
+{% highlight html tabtitle="Options API (~/src/App.vue)" %}
+{% include code-snippet/chart/accessibility/chart-legend/app.vue %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/chart/accessibility/chart-legend" %}
\ No newline at end of file
diff --git a/ej2-vue/chart/axis-labels.md b/ej2-vue/chart/axis-labels.md
index b8de59e02..bfbee86ef 100644
--- a/ej2-vue/chart/axis-labels.md
+++ b/ej2-vue/chart/axis-labels.md
@@ -160,7 +160,7 @@ are `Rectangle`, `Brace`, `WithoutBorder`, `WithoutTopBorder`, `WithoutTopandBot
## Edge Label Placement
-Labels with long text at the edges of an axis may appear partially in the chart. To avoid this, use [`edgeLabelPlacement`](https://ej2.syncfusion.com/vue/documentation/api/chart/axis/#edgelabelplacement) property in axis, which moves the label inside the chart area for better appearance or hides it.
+Labels with long text at the edges of an axis may appear partially in the chart. To avoid this, use [`edgeLabelPlacement`](https://ej2.syncfusion.com/vue/documentation/api/chart/axisModel/#edgelabelplacement) property in axis, which moves the label inside the chart area for better appearance or hides it. By default, the [`edgeLabelPlacement`](https://ej2.syncfusion.com/vue/documentation/api/chart/axisModel/#edgelabelplacement) property is set to **Shift** to ensure that labels are shifted inside the chart area, avoiding any overlap or coincidence.
{% tabs %}
{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
diff --git a/ej2-vue/chart/chart-appearance.md b/ej2-vue/chart/chart-appearance.md
index 684d94b54..2fe4c923b 100644
--- a/ej2-vue/chart/chart-appearance.md
+++ b/ej2-vue/chart/chart-appearance.md
@@ -129,6 +129,21 @@ Using [`background`](https://ej2.syncfusion.com/vue/documentation/api/chart/char
{% previewsample "page.domainurl/code-snippet/chart/series/column-cs9" %}
+**Chart area margin**
+
+You can customize the space between the chart area from its chart container through [`margin`](https://ej2.syncfusion.com/vue/documentation/api/chart/chartAreaModel/#margin) property.
+
+{% tabs %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+{% include code-snippet/chart/series/column-cs44/app-composition.vue %}
+{% endhighlight %}
+{% highlight html tabtitle="Options API (~/src/App.vue)" %}
+{% include code-snippet/chart/series/column-cs44/app.vue %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/chart/series/column-cs44" %}
+
## Animation
You can customize animation for a particular series using [`animation`](https://ej2.syncfusion.com/vue/documentation/api/chart/animationModel/) property. You can enable or disable animation of the series using `enable` property, `duration` specifies the duration of an animation and `delay` allows us to start the animation at desire time.
diff --git a/ej2-vue/chart/chart-type/area.md b/ej2-vue/chart/chart-type/area.md
index 72cf934bc..a58792099 100644
--- a/ej2-vue/chart/chart-type/area.md
+++ b/ej2-vue/chart/chart-type/area.md
@@ -91,24 +91,9 @@ The [opacity](https://ej2.syncfusion.com/vue/documentation/api/chart/series/#opa
{% previewsample "page.domainurl/code-snippet/chart/series/area-cs15" %}
-**Dash array**
-
-The [dashArray](https://ej2.syncfusion.com/vue/documentation/api/chart/series/#dasharray) property determines the pattern of dashes and gaps in the series.
-
-{% tabs %}
-{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
-{% include code-snippet/chart/series/area-cs16/app-composition.vue %}
-{% endhighlight %}
-{% highlight html tabtitle="Options API (~/src/App.vue)" %}
-{% include code-snippet/chart/series/area-cs16/app.vue %}
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/chart/series/area-cs16" %}
-
## Area border
-Use the [`border`](https://ej2.syncfusion.com/vue/documentation/api/chart/series/#border) property to customize the width and color of the series border.
+Use the [`border`](https://ej2.syncfusion.com/vue/documentation/api/chart/series/#border) property to customize the width, color and dash array of the series border.
{% tabs %}
{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
diff --git a/ej2-vue/chart/chart-type/bar.md b/ej2-vue/chart/chart-type/bar.md
index aa23299be..238294c69 100644
--- a/ej2-vue/chart/chart-type/bar.md
+++ b/ej2-vue/chart/chart-type/bar.md
@@ -91,24 +91,9 @@ The [opacity](https://ej2.syncfusion.com/vue/documentation/api/chart/series/#opa
{% previewsample "page.domainurl/code-snippet/chart/series/bar-cs11" %}
-**Dash array**
-
-The [dashArray](https://ej2.syncfusion.com/vue/documentation/api/chart/series/#dasharray) property determines the pattern of dashes and gaps in the series.
-
-{% tabs %}
-{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
-{% include code-snippet/chart/series/bar-cs12/app-composition.vue %}
-{% endhighlight %}
-{% highlight html tabtitle="Options API (~/src/App.vue)" %}
-{% include code-snippet/chart/series/bar-cs12/app.vue %}
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/chart/series/bar-cs12" %}
-
**Border**
-Use the [border](https://ej2.syncfusion.com/vue/documentation/api/chart/series/#border) property to customize the width and color of the series border.
+Use the [`border`](https://ej2.syncfusion.com/vue/documentation/api/chart/series/#border) property to customize the width, color and dash array of the series border.
{% tabs %}
{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
diff --git a/ej2-vue/chart/chart-type/box-whisker.md b/ej2-vue/chart/chart-type/box-whisker.md
index 07d8d34ca..de8fe87a1 100644
--- a/ej2-vue/chart/chart-type/box-whisker.md
+++ b/ej2-vue/chart/chart-type/box-whisker.md
@@ -93,24 +93,9 @@ The [opacity](https://ej2.syncfusion.com/vue/documentation/api/chart/series/#opa
{% previewsample "page.domainurl/code-snippet/chart/series/box-cs7" %}
-**Dash array**
-
-The [dashArray](https://ej2.syncfusion.com/vue/documentation/api/chart/series/#dasharray) property determines the pattern of dashes and gaps in the series.
-
-{% tabs %}
-{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
-{% include code-snippet/chart/series/box-cs8/app-composition.vue %}
-{% endhighlight %}
-{% highlight html tabtitle="Options API (~/src/App.vue)" %}
-{% include code-snippet/chart/series/box-cs8/app.vue %}
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/chart/series/box-cs8" %}
-
**Border**
-Use the [border](https://ej2.syncfusion.com/vue/documentation/api/chart/series/#border) property to customize the width and color of the series border.
+Use the [`border`](https://ej2.syncfusion.com/vue/documentation/api/chart/series/#border) property to customize the width, color and dash array of the series border.
{% tabs %}
{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
diff --git a/ej2-vue/chart/chart-type/column.md b/ej2-vue/chart/chart-type/column.md
index 7e0e6bb61..e3403f62b 100644
--- a/ej2-vue/chart/chart-type/column.md
+++ b/ej2-vue/chart/chart-type/column.md
@@ -91,24 +91,9 @@ The [opacity](https://ej2.syncfusion.com/vue/documentation/api/chart/series/#opa
{% previewsample "page.domainurl/code-snippet/chart/series/column-cs34" %}
-**Dash array**
-
-The [dashArray](https://ej2.syncfusion.com/vue/documentation/api/chart/series/#dasharray) property determines the pattern of dashes and gaps in the series.
-
-{% tabs %}
-{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
-{% include code-snippet/chart/series/column-cs35/app-composition.vue %}
-{% endhighlight %}
-{% highlight html tabtitle="Options API (~/src/App.vue)" %}
-{% include code-snippet/chart/series/column-cs35/app.vue %}
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/chart/series/column-cs35" %}
-
**Border**
-Use the [border](https://ej2.syncfusion.com/vue/documentation/api/chart/series/#border) property to customize the width and color of the series border.
+Use the [`border`](https://ej2.syncfusion.com/vue/documentation/api/chart/series/#border) property to customize the width, color and dash array of the series border.
{% tabs %}
{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
diff --git a/ej2-vue/chart/chart-type/range-area.md b/ej2-vue/chart/chart-type/range-area.md
index 531120a90..8fc2b34f1 100644
--- a/ej2-vue/chart/chart-type/range-area.md
+++ b/ej2-vue/chart/chart-type/range-area.md
@@ -93,9 +93,9 @@ The [opacity](https://ej2.syncfusion.com/vue/documentation/api/chart/series/#opa
{% previewsample "page.domainurl/code-snippet/chart/series/rangearea-cs3" %}
-**Dash array**
+**Border**
-The [dashArray](https://ej2.syncfusion.com/vue/documentation/api/chart/series/#dasharray) property determines the pattern of dashes and gaps in the series.
+Use the [`border`](https://ej2.syncfusion.com/vue/documentation/api/chart/series/#border) property to customize the width, color and dash array of the series border.
{% tabs %}
{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
diff --git a/ej2-vue/chart/chart-type/range-column.md b/ej2-vue/chart/chart-type/range-column.md
index 57c29ace0..170d94ede 100644
--- a/ej2-vue/chart/chart-type/range-column.md
+++ b/ej2-vue/chart/chart-type/range-column.md
@@ -93,24 +93,9 @@ The [opacity](https://ej2.syncfusion.com/vue/documentation/api/chart/series/#opa
{% previewsample "page.domainurl/code-snippet/chart/series/rangecolumn-cs3" %}
-**Dash array**
-
-The [dashArray](https://ej2.syncfusion.com/vue/documentation/api/chart/series/#dasharray) property determines the pattern of dashes and gaps in the series.
-
-{% tabs %}
-{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
-{% include code-snippet/chart/series/rangecolumn-cs4/app-composition.vue %}
-{% endhighlight %}
-{% highlight html tabtitle="Options API (~/src/App.vue)" %}
-{% include code-snippet/chart/series/rangecolumn-cs4/app.vue %}
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/chart/series/rangecolumn-cs4" %}
-
**Border**
-Use the [border](https://ej2.syncfusion.com/vue/documentation/api/chart/series/#border) property to customize the width and color of the series border.
+Use the [`border`](https://ej2.syncfusion.com/vue/documentation/api/chart/series/#border) property to customize the width, color and dash array of the series border.
{% tabs %}
{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
diff --git a/ej2-vue/chart/chart-type/range-step-area.md b/ej2-vue/chart/chart-type/range-step-area.md
index 853e61cb4..a73de0020 100644
--- a/ej2-vue/chart/chart-type/range-step-area.md
+++ b/ej2-vue/chart/chart-type/range-step-area.md
@@ -93,9 +93,9 @@ The [opacity](https://ej2.syncfusion.com/vue/documentation/api/chart/series/#opa
{% previewsample "page.domainurl/code-snippet/chart/series/area-cs24" %}
-**Dash array**
+**Border**
-The [dashArray](https://ej2.syncfusion.com/vue/documentation/api/chart/series/#dasharray) property determines the pattern of dashes and gaps in the series.
+Use the [`border`](https://ej2.syncfusion.com/vue/documentation/api/chart/series/#border) property to customize the width, color and dash array of the series border.
{% tabs %}
{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
diff --git a/ej2-vue/chart/chart-type/spline-area.md b/ej2-vue/chart/chart-type/spline-area.md
index bf3f65516..315dbbcaf 100644
--- a/ej2-vue/chart/chart-type/spline-area.md
+++ b/ej2-vue/chart/chart-type/spline-area.md
@@ -90,9 +90,9 @@ The [opacity](https://ej2.syncfusion.com/vue/documentation/api/chart/series/#opa
{% previewsample "page.domainurl/code-snippet/chart/series/splinearea-cs3" %}
-**Dash array**
+**Border**
-The [dashArray](https://ej2.syncfusion.com/vue/documentation/api/chart/series/#dasharray) property determines the pattern of dashes and gaps in the series.
+Use the [`border`](https://ej2.syncfusion.com/vue/documentation/api/chart/series/#border) property to customize the width, color and dash array of the series border.
{% tabs %}
{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
diff --git a/ej2-vue/chart/chart-type/spline-range-area.md b/ej2-vue/chart/chart-type/spline-range-area.md
index 2df1b709e..26f5b24c0 100644
--- a/ej2-vue/chart/chart-type/spline-range-area.md
+++ b/ej2-vue/chart/chart-type/spline-range-area.md
@@ -92,9 +92,9 @@ The [opacity](https://ej2.syncfusion.com/vue/documentation/api/chart/series/#opa
{% previewsample "page.domainurl/code-snippet/chart/series/splinerangearea-cs3" %}
-**Dash array**
+**Border**
-The [dashArray](https://ej2.syncfusion.com/vue/documentation/api/chart/series/#dasharray) property determines the pattern of dashes and gaps in the series.
+Use the [`border`](https://ej2.syncfusion.com/vue/documentation/api/chart/series/#border) property to customize the width, color and dash array of the series border.
{% tabs %}
{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
diff --git a/ej2-vue/chart/chart-type/stack-area.md b/ej2-vue/chart/chart-type/stack-area.md
index db32233ca..b0782c0b8 100644
--- a/ej2-vue/chart/chart-type/stack-area.md
+++ b/ej2-vue/chart/chart-type/stack-area.md
@@ -91,9 +91,9 @@ The [opacity](https://ej2.syncfusion.com/vue/documentation/api/chart/series/#opa
{% previewsample "page.domainurl/code-snippet/chart/series/stackarea-cs3" %}
-**Dash array**
+**Border**
-The [dashArray](https://ej2.syncfusion.com/vue/documentation/api/chart/series/#dasharray) property determines the pattern of dashes and gaps in the series.
+Use the [`border`](https://ej2.syncfusion.com/vue/documentation/api/chart/series/#border) property to customize the width, color and dash array of the series border.
{% tabs %}
{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
diff --git a/ej2-vue/chart/chart-type/stack-bar.md b/ej2-vue/chart/chart-type/stack-bar.md
index 5fe4d8df4..7166bf9af 100644
--- a/ej2-vue/chart/chart-type/stack-bar.md
+++ b/ej2-vue/chart/chart-type/stack-bar.md
@@ -91,24 +91,9 @@ The [opacity](https://ej2.syncfusion.com/vue/documentation/api/chart/series/#opa
{% previewsample "page.domainurl/code-snippet/chart/series/stackbar-cs3" %}
-**Dash array**
-
-The [dashArray](https://ej2.syncfusion.com/vue/documentation/api/chart/series/#dasharray) property determines the pattern of dashes and gaps in the series.
-
-{% tabs %}
-{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
-{% include code-snippet/chart/series/stackbar-cs4/app-composition.vue %}
-{% endhighlight %}
-{% highlight html tabtitle="Options API (~/src/App.vue)" %}
-{% include code-snippet/chart/series/stackbar-cs4/app.vue %}
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/chart/series/stackbar-cs4" %}
-
**Border**
-Use the [border](https://ej2.syncfusion.com/vue/documentation/api/chart/series/#border) property to customize the width and color of the series border.
+Use the [`border`](https://ej2.syncfusion.com/vue/documentation/api/chart/series/#border) property to customize the width, color and dash array of the series border.
{% tabs %}
{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
diff --git a/ej2-vue/chart/chart-type/stack-column.md b/ej2-vue/chart/chart-type/stack-column.md
index 4ea06b033..cb64ae0db 100644
--- a/ej2-vue/chart/chart-type/stack-column.md
+++ b/ej2-vue/chart/chart-type/stack-column.md
@@ -91,24 +91,9 @@ The [opacity](https://ej2.syncfusion.com/vue/documentation/api/chart/series/#opa
{% previewsample "page.domainurl/code-snippet/chart/series/stackcolumn-cs3" %}
-**Dash array**
-
-The [dashArray](https://ej2.syncfusion.com/vue/documentation/api/chart/series/#dasharray) property determines the pattern of dashes and gaps in the series.
-
-{% tabs %}
-{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
-{% include code-snippet/chart/series/stackcolumn-cs4/app-composition.vue %}
-{% endhighlight %}
-{% highlight html tabtitle="Options API (~/src/App.vue)" %}
-{% include code-snippet/chart/series/stackcolumn-cs4/app.vue %}
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/chart/series/stackcolumn-cs4" %}
-
**Border**
-Use the [border](https://ej2.syncfusion.com/vue/documentation/api/chart/series/#border) property to customize the width and color of the series border.
+Use the [`border`](https://ej2.syncfusion.com/vue/documentation/api/chart/series/#border) property to customize the width, color and dash array of the series border.
{% tabs %}
{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
diff --git a/ej2-vue/chart/chart-type/stacked-area.md b/ej2-vue/chart/chart-type/stacked-area.md
index c4f1c872f..f5feb9de3 100644
--- a/ej2-vue/chart/chart-type/stacked-area.md
+++ b/ej2-vue/chart/chart-type/stacked-area.md
@@ -91,9 +91,9 @@ The [opacity](https://ej2.syncfusion.com/vue/documentation/api/chart/series/#opa
{% previewsample "page.domainurl/code-snippet/chart/series/stackedarea-cs3" %}
-**Dash array**
+**Border**
-The [dashArray](https://ej2.syncfusion.com/vue/documentation/api/chart/series/#dasharray) property determines the pattern of dashes and gaps in the series.
+Use the [`border`](https://ej2.syncfusion.com/vue/documentation/api/chart/series/#border) property to customize the width, color and dash array of the series border.
{% tabs %}
{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
diff --git a/ej2-vue/chart/chart-type/stacked-bar.md b/ej2-vue/chart/chart-type/stacked-bar.md
index 8f45c139a..6b5874510 100644
--- a/ej2-vue/chart/chart-type/stacked-bar.md
+++ b/ej2-vue/chart/chart-type/stacked-bar.md
@@ -91,24 +91,9 @@ The [opacity](https://ej2.syncfusion.com/vue/documentation/api/chart/series/#opa
{% previewsample "page.domainurl/code-snippet/chart/series/stackedbar-cs3" %}
-**Dash array**
-
-The [dashArray](https://ej2.syncfusion.com/vue/documentation/api/chart/series/#dasharray) property determines the pattern of dashes and gaps in the series.
-
-{% tabs %}
-{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
-{% include code-snippet/chart/series/stackedbar-cs4/app-composition.vue %}
-{% endhighlight %}
-{% highlight html tabtitle="Options API (~/src/App.vue)" %}
-{% include code-snippet/chart/series/stackedbar-cs4/app.vue %}
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/chart/series/stackedbar-cs4" %}
-
**Border**
-Use the [border](https://ej2.syncfusion.com/vue/documentation/api/chart/series/#border) property to customize the width and color of the series border.
+Use the [`border`](https://ej2.syncfusion.com/vue/documentation/api/chart/series/#border) property to customize the width, color and dash array of the series border.
{% tabs %}
{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
diff --git a/ej2-vue/chart/chart-type/stacked-column.md b/ej2-vue/chart/chart-type/stacked-column.md
index fd106e12c..4c91846b8 100644
--- a/ej2-vue/chart/chart-type/stacked-column.md
+++ b/ej2-vue/chart/chart-type/stacked-column.md
@@ -91,24 +91,9 @@ The [opacity](https://ej2.syncfusion.com/vue/documentation/api/chart/series/#opa
{% previewsample "page.domainurl/code-snippet/chart/series/stackedcolumn-cs3" %}
-**Dash array**
-
-The [dashArray](https://ej2.syncfusion.com/vue/documentation/api/chart/series/#dasharray) property determines the pattern of dashes and gaps in the series.
-
-{% tabs %}
-{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
-{% include code-snippet/chart/series/stackedcolumn-cs4/app-composition.vue %}
-{% endhighlight %}
-{% highlight html tabtitle="Options API (~/src/App.vue)" %}
-{% include code-snippet/chart/series/stackedcolumn-cs4/app.vue %}
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/chart/series/stackedcolumn-cs4" %}
-
**Border**
-Use the [border](https://ej2.syncfusion.com/vue/documentation/api/chart/series/#border) property to customize the width and color of the series border.
+Use the [`border`](https://ej2.syncfusion.com/vue/documentation/api/chart/series/#border) property to customize the width, color and dash array of the series border.
{% tabs %}
{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
diff --git a/ej2-vue/chart/chart-type/stacked-step-area.md b/ej2-vue/chart/chart-type/stacked-step-area.md
index 8e2ad8cba..796e88420 100644
--- a/ej2-vue/chart/chart-type/stacked-step-area.md
+++ b/ej2-vue/chart/chart-type/stacked-step-area.md
@@ -91,9 +91,9 @@ The [opacity](https://ej2.syncfusion.com/vue/documentation/api/chart/series/#opa
{% previewsample "page.domainurl/code-snippet/chart/series/stackedsteparea-cs3" %}
-**Dash array**
+**Border**
-The [dashArray](https://ej2.syncfusion.com/vue/documentation/api/chart/series/#dasharray) property determines the pattern of dashes and gaps in the series.
+Use the [`border`](https://ej2.syncfusion.com/vue/documentation/api/chart/series/#border) property to customize the width, color and dash array of the series border.
{% tabs %}
{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
diff --git a/ej2-vue/chart/chart-type/step-area.md b/ej2-vue/chart/chart-type/step-area.md
index d3c0b1942..e95345577 100644
--- a/ej2-vue/chart/chart-type/step-area.md
+++ b/ej2-vue/chart/chart-type/step-area.md
@@ -91,9 +91,9 @@ The [opacity](https://ej2.syncfusion.com/vue/documentation/api/chart/series/#opa
{% previewsample "page.domainurl/code-snippet/chart/series/steparea-cs3" %}
-**Dash array**
+**Border**
-The [dashArray](https://ej2.syncfusion.com/vue/documentation/api/chart/series/#dasharray) property determines the pattern of dashes and gaps in the series.
+Use the [`border`](https://ej2.syncfusion.com/vue/documentation/api/chart/series/#border) property to customize the width, color and dash array of the series border.
{% tabs %}
{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
diff --git a/ej2-vue/chart/cross-hair-and-track-ball.md b/ej2-vue/chart/cross-hair-and-track-ball.md
index 9c8ace256..48183b19f 100644
--- a/ej2-vue/chart/cross-hair-and-track-ball.md
+++ b/ej2-vue/chart/cross-hair-and-track-ball.md
@@ -58,6 +58,21 @@ property of the `crosshairTooltip` is used to customize the background color and
>Note: To use crosshair feature, we need to inject `Crosshair` into the `provide`.
+**Snap to data**
+
+Enabling the [`snapToData`](https://ej2.syncfusion.com/vue/documentation/api/chart/crosshairSettingsModel/#snaptodata) property in the crosshair aligns it with the nearest data point instead of following the exact mouse position.
+
+{% tabs %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+{% include code-snippet/chart/user-interaction/crosshair-cs4/app-composition.vue %}
+{% endhighlight %}
+{% highlight html tabtitle="Options API (~/src/App.vue)" %}
+{% include code-snippet/chart/user-interaction/crosshair-cs4/app.vue %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/chart/user-interaction/crosshair-cs4" %}
+
## Trackball
Trackball is used to track a data point closest to the mouse or touch position. Trackball marker indicates the
diff --git a/ej2-vue/chart/legend.md b/ej2-vue/chart/legend.md
index 5c58eccbe..44764aedc 100644
--- a/ej2-vue/chart/legend.md
+++ b/ej2-vue/chart/legend.md
@@ -242,4 +242,19 @@ The [`itemPadding`](https://ej2.syncfusion.com/vue/documentation/api/chart/legen
{% previewsample "page.domainurl/code-snippet/chart/axis/category-cs42" %}
->Note: To use legend feature, we need to inject `Legend` into the `Provide`.
\ No newline at end of file
+>Note: To use legend feature, we need to inject `Legend` into the `Provide`.
+
+## Legend layout
+
+The [`layout`](https://ej2.syncfusion.com/vue/documentation/api/chart/legendSettingsModel/#layout) property in [`legendSettings`](https://ej2.syncfusion.com/vue/documentation/api/chart#legendsettings) allows you to display the legend either horizontally or vertically. By default, the [`layout`](https://ej2.syncfusion.com/vue/documentation/api/chart/legendSettingsModel/#layout) is set to **Auto**. The [`maximumColumns`](https://ej2.syncfusion.com/vue/documentation/api/chart/legendSettingsModel/#maximumcolumns) property in [`legendSettings`](https://ej2.syncfusion.com/vue/documentation/api/chart#legendsettings) defines the maximum number of columns that can be displayed within the available space when using the auto layout. Additionally, enabling the [`fixedWidth`](https://ej2.syncfusion.com/vue/documentation/api/chart/legendSettingsModel/#fixedwidth) property in [`legendSettings`](https://ej2.syncfusion.com/vue/documentation/api/chart#legendsettings) ensures that all legend items are displayed with equal widths. The width of each item is determined by the maximum width among the legend items.
+
+{% tabs %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+{% include code-snippet/chart/axis/category-cs45/app-composition.vue %}
+{% endhighlight %}
+{% highlight html tabtitle="Options API (~/src/App.vue)" %}
+{% include code-snippet/chart/axis/category-cs45/app.vue %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/chart/axis/category-cs45" %}
\ No newline at end of file
diff --git a/ej2-vue/chart/tool-tip.md b/ej2-vue/chart/tool-tip.md
index 36d2c6b5f..7dad5451e 100644
--- a/ej2-vue/chart/tool-tip.md
+++ b/ej2-vue/chart/tool-tip.md
@@ -103,6 +103,21 @@ Any HTML elements can be displayed in the tooltip by using the [`template`](http
{% previewsample "page.domainurl/code-snippet/chart/user-interaction/tooltip-cs4" %}
+## Enable highlight
+
+By setting the [`enableHighlight`](https://ej2.syncfusion.com/vue/documentation/api/chart/tooltipSettingsModel/#enablehighlight) property to **true**, you can highlight all points in the hovered series while dimming points in other series, enhancing focus and clarity.
+
+{% tabs %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+{% include code-snippet/chart/user-interaction/tooltip-cs8/app-composition.vue %}
+{% endhighlight %}
+{% highlight html tabtitle="Options API (~/src/App.vue)" %}
+{% include code-snippet/chart/user-interaction/tooltip-cs8/app.vue %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/chart/user-interaction/tooltip-cs8" %}
+
## Customize the appearance of tooltip
The [`fill`](https://ej2.syncfusion.com/vue/documentation/api/chart/tooltipSettingsModel/#fill) and [`border`](https://ej2.syncfusion.com/vue/documentation/api/chart/tooltipSettingsModel/#border) properties are used to customize the background color and border of the tooltip respectively. The [`textStyle`](https://ej2.syncfusion.com/vue/documentation/api/chart/tooltipSettingsModel/#textstyle) property in the tooltip is used to customize the font of the tooltip text. The [`highlightColor`](https://ej2.syncfusion.com/vue/documentation/api/chart/#highlightcolor) property is used to customize the point color while hovering for tooltip.
diff --git a/ej2-vue/chart/zooming.md b/ej2-vue/chart/zooming.md
index f7044f8ba..88ff38f0d 100644
--- a/ej2-vue/chart/zooming.md
+++ b/ej2-vue/chart/zooming.md
@@ -76,6 +76,21 @@ By default, zoomin, zoomout, pan and reset buttons will be displayed for zoomed
{% previewsample "page.domainurl/code-snippet/chart/user-interaction/zoom-cs4" %}
+### Toolbar customization
+
+The zoom toolbar in the chart can be repositioned using the [`toolbarPosition`](https://ej2.syncfusion.com/vue/documentation/api/chart/zoomSettingsModel/#toolbarposition) property, allowing flexible alignment and placement. It supports horizontal alignments (**Near**, **Center**, and **Far**) and vertical alignments (**Top**, **Middle**, and **Bottom**), with default values set to **Far** and **Top**, respectively. For precise placement, the [`x`](https://ej2.syncfusion.com/vue/documentation/api/chart/toolbarPositionModel/#x) and [`y`](https://ej2.syncfusion.com/vue/documentation/api/chart/toolbarPositionModel/#y) properties can be used to adjust the toolbar's position within the chart area. Additionally, enabling the [`draggable`](https://ej2.syncfusion.com/vue/documentation/api/chart/toolbarPositionModel/#draggable) property allows users to freely move the toolbar within the chart area, ensuring optimal usability.
+
+{% tabs %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+{% include code-snippet/chart/user-interaction/zoom-cs11/app-composition.vue %}
+{% endhighlight %}
+{% highlight html tabtitle="Options API (~/src/App.vue)" %}
+{% include code-snippet/chart/user-interaction/zoom-cs11/app.vue %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/chart/user-interaction/zoom-cs11" %}
+
## Enable pan
Using [`enablePan`](https://ej2.syncfusion.com/vue/documentation/api/chart/zoomSettings/#enablepan) property you can able to pan the zoomed chart without help of toolbar items.
diff --git a/ej2-vue/chat-ui/appearance.md b/ej2-vue/chat-ui/appearance.md
index fc3478f0d..4fa30d2f3 100644
--- a/ej2-vue/chat-ui/appearance.md
+++ b/ej2-vue/chat-ui/appearance.md
@@ -12,7 +12,7 @@ domainurl: ##DomainURL##
## Setting placeholder
-You can use the `placeholder` property to display the placeholder text that appears in the message input field to guide users on what to type. The default is `Type your message…`.
+You can use the [placeholder](../api/chat-ui/chatUIModel/#placeholder) property to display the placeholder text that appears in the message input field to guide users on what to type. The default is `Type your message…`.
{% tabs %}
{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
@@ -27,7 +27,7 @@ You can use the `placeholder` property to display the placeholder text that appe
## Setting width
-You can use the `width` property to specify the dimensions of the Chat UI within the application layout. By default, the value is `100%`.
+You can use the [width](../api/chat-ui/chatUIModel/#width) property to specify the dimensions of the Chat UI within the application layout. By default, the value is `100%`.
{% tabs %}
{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
@@ -42,7 +42,7 @@ You can use the `width` property to specify the dimensions of the Chat UI within
## Setting height
-You can use the `height` property to specify the dimensions of the Chat UI within the application layout. By default, the value is `100%`.
+You can use the [height](../api/chat-ui/chatUIModel/#height) property to specify the dimensions of the Chat UI within the application layout. By default, the value is `100%`.
{% tabs %}
{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
@@ -57,7 +57,7 @@ You can use the `height` property to specify the dimensions of the Chat UI withi
## CssClass
-You can use the `cssClass` property to customize the appearance of the chat UI component.
+You can use the [cssClass](../api/chat-ui/chatUIModel/#cssclass) property to customize the appearance of the chat UI component.
{% tabs %}
{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
diff --git a/ej2-vue/chat-ui/events.md b/ej2-vue/chat-ui/events.md
index cd9ef5f43..8f7624848 100644
--- a/ej2-vue/chat-ui/events.md
+++ b/ej2-vue/chat-ui/events.md
@@ -14,7 +14,7 @@ This section describes the Chat UI events that will be triggered when appropriat
## Created
-The Chat UI component triggers the `created` event when the component rendering is completed.
+The Chat UI component triggers the [created](../api/chat-ui/chatUIModel/#created) event when the component rendering is completed.
{% tabs %}
{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
@@ -27,7 +27,7 @@ The Chat UI component triggers the `created` event when the component rendering
## Sending message
-The `messageSend` event is triggered before sending a message in the Chat UI component.
+The [messageSend](../api/chat-ui/chatUIModel/#messagesend) event is triggered before sending a message in the Chat UI component.
{% tabs %}
{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
@@ -40,7 +40,7 @@ The `messageSend` event is triggered before sending a message in the Chat UI com
## User Typing
-The `userTyping` event is triggered when the user is typing a message in the Chat UI component.
+The [userTyping](../api/chat-ui/chatUIModel/#usertyping) event is triggered when the user is typing a message in the Chat UI component.
{% tabs %}
{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
diff --git a/ej2-vue/chat-ui/footer.md b/ej2-vue/chat-ui/footer.md
index 8fe2ba1e6..061dd0cca 100644
--- a/ej2-vue/chat-ui/footer.md
+++ b/ej2-vue/chat-ui/footer.md
@@ -12,7 +12,18 @@ domainurl: ##DomainURL##
## Show or hide footer
-You can use showFooter property to enable or disable the chat footer.
+You can use [showFooter](../api/chat-ui/chatUIModel/#showfooter) property to enable or disable the chat footer.
+
+{% tabs %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+{% include code-snippet/chat-ui/footer/app-composition.vue %}
+{% endhighlight %}
+{% highlight html tabtitle="Options API (~/src/App.vue)" %}
+{% include code-snippet/chat-ui/footer/app.vue %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/chat-ui/footer" %}
## Footer template
diff --git a/ej2-vue/chat-ui/getting-started.md b/ej2-vue/chat-ui/getting-started.md
index 2c97c6d3d..62b1bf1fe 100644
--- a/ej2-vue/chat-ui/getting-started.md
+++ b/ej2-vue/chat-ui/getting-started.md
@@ -145,7 +145,7 @@ yarn run serve
## Configure messages and user
-You can use the `` tag directive to group all the messages and `` tag to define each message and the `user` property to configure the current user for the chat.
+You can use the `` tag directive to group all the messages and `` tag to define each message and the [user](../api/chat-ui/user) property to configure the current user for the chat.
{% tabs %}
{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
diff --git a/ej2-vue/chat-ui/globalization.md b/ej2-vue/chat-ui/globalization.md
index cfb63d568..3a8798716 100644
--- a/ej2-vue/chat-ui/globalization.md
+++ b/ej2-vue/chat-ui/globalization.md
@@ -13,14 +13,36 @@ domainurl: ##DomainURL##
## Localization
The Chat UI can be localized to any culture by defining the text of the Chat UI in the corresponding culture. The default locale of the Chat UI is `en` (English). The following table represents the default text of the Chat UI in `en` culture.
-
+
|KEY|Text|
|----|----|
|oneUserTyping|{0} is typing|
|twoUserTyping|{0} and {1} are typing|
|threeUserTyping|{0}, {1}, and {2} other are typing|
|multipleUsersTyping|{0}, {1}, and {2} others are typing|
-
+
+{% tabs %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+{% include code-snippet/chat-ui/globalization/localization/app-composition.vue %}
+{% endhighlight %}
+{% highlight html tabtitle="Options API (~/src/App.vue)" %}
+{% include code-snippet/chat-ui/globalization/localization/app.vue %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/chat-ui/globalization/localization" %}
+
## RTL
-RTL provides an option to switch the text direction and layout of the Chat UI component from right to left by setting the `enableRtl` property to `true`.
+RTL provides an option to switch the text direction and layout of the Chat UI component from right to left by setting the [enableRtl](../api/chat-ui/chatUIModel/#enablertl) property to `true`.
+
+{% tabs %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+{% include code-snippet/chat-ui/globalization/rtl/app-composition.vue %}
+{% endhighlight %}
+{% highlight html tabtitle="Options API (~/src/App.vue)" %}
+{% include code-snippet/chat-ui/globalization/rtl/app.vue %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/chat-ui/globalization/rtl" %}
diff --git a/ej2-vue/chat-ui/header.md b/ej2-vue/chat-ui/header.md
index 1526bebaa..71d040233 100644
--- a/ej2-vue/chat-ui/header.md
+++ b/ej2-vue/chat-ui/header.md
@@ -12,19 +12,52 @@ domainurl: ##DomainURL##
## Show or hide header
-You can use `showHeader` property to enable or disable the chat header. It contains the following options `headerText` and `headerIconCss`.
+You can use [showHeader](../api/chat-ui/chatUIModel/#showheader) property to enable or disable the chat header. It contains the following options headerText and headerIconCss.
+
+{% tabs %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+{% include code-snippet/chat-ui/header/showHeader/app-composition.vue %}
+{% endhighlight %}
+{% highlight html tabtitle="Options API (~/src/App.vue)" %}
+{% include code-snippet/chat-ui/header/showHeader/app.vue %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/chat-ui/header/showHeader" %}
### Setting header text
-You can use the `headerText` property to display the text that appears in the header, which indicates the current username or the group name providing the context for the conversation.
+You can use the [headerText](../api/chat-ui/chatUIModel/#headertext) property to display the text that appears in the header, which indicates the current username or the group name providing the context for the conversation.
+
+{% tabs %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+{% include code-snippet/chat-ui/header/header-text/app-composition.vue %}
+{% endhighlight %}
+{% highlight html tabtitle="Options API (~/src/App.vue)" %}
+{% include code-snippet/chat-ui/header/header-text/app.vue %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/chat-ui/header/header-text" %}
### Setting header icon CSS
-You can use the `headerIconCss` property to customize the styling of the header icon.
+You can use the [headerIconCss](../api/chat-ui/chatUIModel/#headericoncss) property to customize the styling of the header icon.
+
+{% tabs %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+{% include code-snippet/chat-ui/header/header-icon/app-composition.vue %}
+{% endhighlight %}
+{% highlight html tabtitle="Options API (~/src/App.vue)" %}
+{% include code-snippet/chat-ui/header/header-icon/app.vue %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/chat-ui/header/header-icon" %}
## Toolbar
-You can render the Chat UI toolbar items by using the items property in the headerToolbar.
+You can render the Chat UI toolbar items by using the `items` property in the [headerToolbar](../api/chat-ui/chatUIModel/#headertoolbar).
### Setting Items
@@ -34,38 +67,126 @@ Items can be constructed with the following built-in command types or item templ
You can customize the header toolbar icons by using the `iconCss` property.
+{% tabs %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+{% include code-snippet/chat-ui/header/iconCss/app-composition.vue %}
+{% endhighlight %}
+{% highlight html tabtitle="Options API (~/src/App.vue)" %}
+{% include code-snippet/chat-ui/header/iconCss/app.vue %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/chat-ui/header/iconCss" %}
+
#### Setting item type
You can change the header toolbar item type by using the `type` property. The `type` supports three types of items such as `Button`, `Separator` and `Input`. By default, the type is `Button`.
In the following example, header toolbar item type is set as `Button`.
+{% tabs %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+{% include code-snippet/chat-ui/header/itemType/app-composition.vue %}
+{% endhighlight %}
+{% highlight html tabtitle="Options API (~/src/App.vue)" %}
+{% include code-snippet/chat-ui/header/itemType/app.vue %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/chat-ui/header/itemType" %}
+
#### Setting text
You can use the `text` property to set the text for the header toolbar item.
+{% tabs %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+{% include code-snippet/chat-ui/header/text/app-composition.vue %}
+{% endhighlight %}
+{% highlight html tabtitle="Options API (~/src/App.vue)" %}
+{% include code-snippet/chat-ui/header/text/app.vue %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/chat-ui/header/text" %}
+
#### Show or hide toolbar item
You can use the `visible` property to specify whether to show or hide the header toolbar item. By default, its value is `true`.
+{% tabs %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+{% include code-snippet/chat-ui/header/visible/app-composition.vue %}
+{% endhighlight %}
+{% highlight html tabtitle="Options API (~/src/App.vue)" %}
+{% include code-snippet/chat-ui/header/visible/app.vue %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/chat-ui/header/visible" %}
+
#### Setting disabled
You can use the `disabled` property to disable the header toolbar item. By default, its value is `false`.
+{% tabs %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+{% include code-snippet/chat-ui/header/disable/app-composition.vue %}
+{% endhighlight %}
+{% highlight html tabtitle="Options API (~/src/App.vue)" %}
+{% include code-snippet/chat-ui/header/disable/app.vue %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/chat-ui/header/disable" %}
+
#### Setting tooltip text
You can use the `tooltip` property to specify the tooltip text to be displayed on hovering the header toolbar item.
+{% tabs %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+{% include code-snippet/chat-ui/header/tooltip/app-composition.vue %}
+{% endhighlight %}
+{% highlight html tabtitle="Options API (~/src/App.vue)" %}
+{% include code-snippet/chat-ui/header/tooltip/app.vue %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/chat-ui/header/tooltip" %}
+
#### Setting CSS Class
You can use the `cssClass` property to customize the header toolbar item.
+{% tabs %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+{% include code-snippet/chat-ui/header/cssClass/app-composition.vue %}
+{% endhighlight %}
+{% highlight html tabtitle="Options API (~/src/App.vue)" %}
+{% include code-snippet/chat-ui/header/cssClass/app.vue %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/chat-ui/header/cssClass" %}
+
#### Setting alignment
You can change the alignment of toolbar item by using the `align` property. It supports three types of alignments such as `Left`, `Center` and `Right`. By default, the value is `Left`.
In the following example, toolbar item type is set with `Right`.
+{% tabs %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+{% include code-snippet/chat-ui/header/align/app-composition.vue %}
+{% endhighlight %}
+{% highlight html tabtitle="Options API (~/src/App.vue)" %}
+{% include code-snippet/chat-ui/header/align/app.vue %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/chat-ui/header/align" %}
+
#### Enabling tab key navigation in toolbar
You can use the `tabIndex` property of a Toolbar item to enable tab key navigation for the item. By default, the user can switch between items using the arrow keys, but the `tabIndex` property allows you to switch between items using the `Tab` and `Shift+Tab` keys as well.
@@ -91,12 +212,12 @@ export default {
},
data () {
return {
- headerToolbar: {
- items: [
- { text: 'Item1', tabIndex: 1 },
- { text: 'Item2', tabIndex: 2 }
- ]
- }
+ headerToolbar: {
+ items: [
+ { text: 'Item1', tabIndex: 1 },
+ { text: 'Item2', tabIndex: 2 }
+ ]
+ }
}
}
}
@@ -133,12 +254,12 @@ export default {
},
data () {
return {
- headerToolbar: {
- items: [
- { text: 'Item1', tabIndex: 0 },
- { text: 'Item2', tabIndex: 0 }
- ]
- }
+ headerToolbar: {
+ items: [
+ { text: 'Item1', tabIndex: 0 },
+ { text: 'Item2', tabIndex: 0 }
+ ]
+ }
}
}
}
@@ -160,6 +281,28 @@ In this case, the user can switch between the two Toolbar items using the Tab an
You can use the `template` tag directive to add custom header toolbar item in the Chat UI component.
+{% tabs %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+{% include code-snippet/chat-ui/header/template/app-composition.vue %}
+{% endhighlight %}
+{% highlight html tabtitle="Options API (~/src/App.vue)" %}
+{% include code-snippet/chat-ui/header/template/app.vue %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/chat-ui/header/template" %}
+
### Item clicked
You can define `itemClicked` event in the `headerToolbar` property which will be triggered when the header toolbar item is clicked.
+
+{% tabs %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+{% include code-snippet/chat-ui/header/itemClick/app-composition.vue %}
+{% endhighlight %}
+{% highlight html tabtitle="Options API (~/src/App.vue)" %}
+{% include code-snippet/chat-ui/header/itemClick/app.vue %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/chat-ui/header/itemClick" %}
diff --git a/ej2-vue/chat-ui/load-on-demand.md b/ej2-vue/chat-ui/load-on-demand.md
index ea1e02b6e..5b9be0ff4 100644
--- a/ej2-vue/chat-ui/load-on-demand.md
+++ b/ej2-vue/chat-ui/load-on-demand.md
@@ -10,4 +10,15 @@ domainurl: ##DomainURL##
# Load on-demand in Vue Chat UI component
-You can use the `loadOnDemand` property to load messages dynamically when the scroll reaches the top of the message list improving performance and reducing load times, particularly in long conversations. This ensures a smooth user experience by only fetching messages as needed rather than loading the entire conversation at once.
+You can use the [loadOnDemand](../api/chat-ui/chatUIModel/#loadondemand) property to load messages dynamically when the scroll reaches the top of the message list improving performance and reducing load times, particularly in long conversations. This ensures a smooth user experience by only fetching messages as needed rather than loading the entire conversation at once.
+
+{% tabs %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+{% include code-snippet/chat-ui/loadOnDemand/app-composition.vue %}
+{% endhighlight %}
+{% highlight html tabtitle="Options API (~/src/App.vue)" %}
+{% include code-snippet/chat-ui/loadOnDemand/app.vue %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/chat-ui/loadOnDemand" %}
diff --git a/ej2-vue/chat-ui/messages.md b/ej2-vue/chat-ui/messages.md
index e9b2030f3..b7146fdf4 100644
--- a/ej2-vue/chat-ui/messages.md
+++ b/ej2-vue/chat-ui/messages.md
@@ -14,56 +14,188 @@ The Chat UI allows to add messages using the `e-message` tag directive. The me
## Configuring Messages
-You can use the `text` property to add message content for the user. Each message can be configured with options such as id, text, author, timestamp, and more.
+You can use the [text](../api/chat-ui/messageModel/#text) property to add message content for the user. Each message can be configured with options such as id, text, author, timestamp, and more.
+
+{% tabs %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+{% include code-snippet/chat-ui/defaultMessage/app-composition.vue %}
+{% endhighlight %}
+{% highlight html tabtitle="Options API (~/src/App.vue)" %}
+{% include code-snippet/chat-ui/defaultMessage/app.vue %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/chat-ui/defaultMessage" %}
### Defining current user
-You can use the `author` property to identify the current user of the chat. Each user can be configured with options such as id, user, avatarUrl, and more.
+You can use the [author](../api/chat-ui/messageModel/#author) property to identify the current user of the chat. Each user can be configured with options such as id, user, avatarUrl, and more.
-> You can use the `user` property to display the user name and `id` property is necessary to differentiate between the multiple users.
+> You can use the [user](../api/chat-ui/userModel/#user) property to display the user name and [id](../api/chat-ui/userModel/#id) property is necessary to differentiate between the multiple users.
+
+{% tabs %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+{% include code-snippet/chat-ui/defaultMessage/app-composition.vue %}
+{% endhighlight %}
+{% highlight html tabtitle="Options API (~/src/App.vue)" %}
+{% include code-snippet/chat-ui/defaultMessage/app.vue %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/chat-ui/defaultMessage" %}
#### Setting avatar URL
-You can use the `avatarUrl` property to define the image URL’s for the user avatar. If no URL is provided, fallback initials of the first and last name from the user’s name will be used.
+You can use the [avatarUrl](../api/chat-ui/userModel/#avatarurl) property to define the image URL’s for the user avatar. If no URL is provided, fallback initials of the first and last name from the user’s name will be used.
+
+{% tabs %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+{% include code-snippet/chat-ui/messages/avatarUrl/app-composition.vue %}
+{% endhighlight %}
+{% highlight html tabtitle="Options API (~/src/App.vue)" %}
+{% include code-snippet/chat-ui/messages/avatarUrl/app.vue %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/chat-ui/messages/avatarUrl" %}
#### Setting avatar background color
-You can use the `avatarBgColor` property to set a specific background color for user avatars using hexadecimal values. If no color is set, a custom background color is set based on specified theme.
+You can use the [avatarBgColor](../api/chat-ui/userModel/#avatarbgcolor) property to set a specific background color for user avatars using hexadecimal values. If no color is set, a custom background color is set based on specified theme.
+
+{% tabs %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+{% include code-snippet/chat-ui/messages/avatar-bgColor/app-composition.vue %}
+{% endhighlight %}
+{% highlight html tabtitle="Options API (~/src/App.vue)" %}
+{% include code-snippet/chat-ui/messages/avatar-bgColor/app.vue %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/chat-ui/messages/avatar-bgColor" %}
#### Setting CSS class
-You can use the cssClass property to customize the appearance of the chat user.
+You can use the [cssClass](../api/chat-ui/userModel/#cssclass) property to customize the appearance of the chat user.
+
+{% tabs %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+{% include code-snippet/chat-ui/messages/cssClass/app-composition.vue %}
+{% endhighlight %}
+{% highlight html tabtitle="Options API (~/src/App.vue)" %}
+{% include code-snippet/chat-ui/messages/cssClass/app.vue %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/chat-ui/messages/cssClass" %}
## Define timestamp
-You can use the `timeStamp` property to indicate the date and time of each message being sent. By default it is set to the current date and time when the message is sent.
+You can use the [timeStamp](../api/chat-ui/messageModel/#timestamp) property to indicate the date and time of each message being sent. By default it is set to the current date and time when the message is sent.
+
+{% tabs %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+{% include code-snippet/chat-ui/messages/showTimestamp/app-composition.vue %}
+{% endhighlight %}
+{% highlight html tabtitle="Options API (~/src/App.vue)" %}
+{% include code-snippet/chat-ui/messages/showTimestamp/app.vue %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/chat-ui/messages/showTimestamp" %}
### Setting timestamp format
-You can use the `timeStampFormat` to display specific time format for the timestamp. The default format is `dd/MM/yyyy hh:mm a`, but this can be customized to meet different localization and display needs.
+You can use the [timeStampFormat](../api/chat-ui/messageModel/#timestampformat) to display specific time format for the timestamp. The default format is `dd/MM/yyyy hh:mm a`, but this can be customized to meet different localization and display needs.
+
+{% tabs %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+{% include code-snippet/chat-ui/messages/timestampFormat/app-composition.vue %}
+{% endhighlight %}
+{% highlight html tabtitle="Options API (~/src/App.vue)" %}
+{% include code-snippet/chat-ui/messages/timestampFormat/app.vue %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/chat-ui/messages/timestampFormat" %}
## Define message status
-You can use the `status` property to update the status for the message(e.g., sent, received, read). It helps in managing message delivery and read receipts within the chat interface.
+You can use the [status](../api/chat-ui/messageModel/#status) property to update the status for the message(e.g., sent, received, read). It helps in managing message delivery and read receipts within the chat interface.
### Setting icon CSS
-You can use the `iconCss` property to update the styling of status icons associated with messages, aiding visual differentiation between statuses.
+You can use the [iconCss](../api/chat-ui/messageStatusModel/#iconcss) property to update the styling of status icons associated with messages, aiding visual differentiation between statuses.
+
+{% tabs %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+{% include code-snippet/chat-ui/messages/iconCss/app-composition.vue %}
+{% endhighlight %}
+{% highlight html tabtitle="Options API (~/src/App.vue)" %}
+{% include code-snippet/chat-ui/messages/iconCss/app.vue %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/chat-ui/messages/iconCss" %}
### Setting text
-You can use the `text` property to provide information about the messages through descriptive text, providing users with the context of the message.
+You can use the [text](../api/chat-ui/messageStatusModel/#text) property to provide information about the messages through descriptive text, providing users with the context of the message.
+
+{% tabs %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+{% include code-snippet/chat-ui/messages/text/app-composition.vue %}
+{% endhighlight %}
+{% highlight html tabtitle="Options API (~/src/App.vue)" %}
+{% include code-snippet/chat-ui/messages/text/app.vue %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/chat-ui/messages/text" %}
### Setting tooltip
-You can use the `tooltip` property to provide information about the messages by tooltips while hovering the status icon, providing users with additional data upon hovering.
+You can use the [tooltip](../api/chat-ui/messageStatusModel/#tooltip) property to provide information about the messages by tooltips while hovering the status icon, providing users with additional data upon hovering.
+
+{% tabs %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+{% include code-snippet/chat-ui/messages/tooltip/app-composition.vue %}
+{% endhighlight %}
+{% highlight html tabtitle="Options API (~/src/App.vue)" %}
+{% include code-snippet/chat-ui/messages/tooltip/app.vue %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/chat-ui/messages/tooltip" %}
## Setting autoscroll
-You can use the `autoScrollToBottom` property to automatically scroll the chats when a new message is received in a conversation. By default, the value is false, requires manual scrolling or the FAB button to quick access to the bottom of the view.
+You can use the [autoScrollToBottom](../api/chat-ui/chatUIModel/#autoscrolltobottom) property to automatically scroll the chats when a new message is received in a conversation. By default, the value is false, requires manual scrolling or the FAB button to quick access to the bottom of the view.
- By default, it scrolls to bottom for each message being sent or when the scroll is maintained at the bottom in the chat, in order to prevent the automatic scroll for different user messages you can use the `autoScrollToBottom` property.
+{% tabs %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+{% include code-snippet/chat-ui/messages/autoScroll/app-composition.vue %}
+{% endhighlight %}
+{% highlight html tabtitle="Options API (~/src/App.vue)" %}
+{% include code-snippet/chat-ui/messages/autoScroll/app.vue %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/chat-ui/messages/autoScroll" %}
+
## Setting suggestions
-You can use the `suggestions` property, to add the suggestions in both initial and on-demand which help users to quick-reply options above the input field.
+You can use the [suggestions](../api/chat-ui/chatUIModel/#suggestions) property, to add the suggestions in both initial and on-demand which help users to quick-reply options above the input field.
+
+{% tabs %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+{% include code-snippet/chat-ui/messages/suggestions/app-composition.vue %}
+{% endhighlight %}
+{% highlight html tabtitle="Options API (~/src/App.vue)" %}
+{% include code-snippet/chat-ui/messages/suggestions/app.vue %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/chat-ui/messages/suggestions" %}
diff --git a/ej2-vue/chat-ui/methods.md b/ej2-vue/chat-ui/methods.md
index 026b692c1..4bc99448e 100644
--- a/ej2-vue/chat-ui/methods.md
+++ b/ej2-vue/chat-ui/methods.md
@@ -12,12 +12,56 @@ domainurl: ##DomainURL##
## Adding message
-You can use the `addMessage` public method to add the messages in the Chat UI. You can add it either as a string or MessageModel collection. It programmatically adds a new message to the chat.
+You can use the [addMessage](../api/chat-ui#addmessage) public method to add the messages in the Chat UI. You can add it either as a string or MessageModel collection. It programmatically adds a new message to the chat.
+
+{% tabs %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+{% include code-snippet/chat-ui/methods/addMessageModel/app-composition.vue %}
+{% endhighlight %}
+{% highlight html tabtitle="Options API (~/src/App.vue)" %}
+{% include code-snippet/chat-ui/methods/addMessageModel/app.vue %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/chat-ui/methods/addMessageModel" %}
+
+{% tabs %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+{% include code-snippet/chat-ui/methods/addMessageString/app-composition.vue %}
+{% endhighlight %}
+{% highlight html tabtitle="Options API (~/src/App.vue)" %}
+{% include code-snippet/chat-ui/methods/addMessageString/app.vue %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/chat-ui/methods/addMessageString" %}
## Edit messages
-You can use the `updateMessage` public method to update the messages in the ChatUI to modify an existing message within the chat, useful for editing or correcting sent messages.
+You can use the [updateMessage](../api/chat-ui#updatemessage) public method to update the messages in the ChatUI to modify an existing message within the chat, useful for editing or correcting sent messages.
+
+{% tabs %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+{% include code-snippet/chat-ui/methods/editMessage/app-composition.vue %}
+{% endhighlight %}
+{% highlight html tabtitle="Options API (~/src/App.vue)" %}
+{% include code-snippet/chat-ui/methods/editMessage/app.vue %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/chat-ui/methods/editMessage" %}
## Scroll to bottom
-You can use the `scrollToBottom` public method to scroll the chat view to the latest message, ensuring users see the new content updated.
+You can use the [scrollToBottom](../api/chat-ui#scrolltobottom) public method to scroll the chat view to the latest message, ensuring users see the new content updated.
+
+{% tabs %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+{% include code-snippet/chat-ui/methods/autoScrollToBottom/app-composition.vue %}
+{% endhighlight %}
+{% highlight html tabtitle="Options API (~/src/App.vue)" %}
+{% include code-snippet/chat-ui/methods/autoScrollToBottom/app.vue %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/chat-ui/methods/autoScrollToBottom" %}
diff --git a/ej2-vue/chat-ui/templates.md b/ej2-vue/chat-ui/templates.md
index 3a0aeaa2a..a2f7ffc1f 100644
--- a/ej2-vue/chat-ui/templates.md
+++ b/ej2-vue/chat-ui/templates.md
@@ -14,24 +14,90 @@ The Chat UI component provides several templates for customizing the appearance
## Empty chat template
-You can use the `emptyChatTemplate` property to customize the chat interface when no messages are displayed. Personalized content, such as welcome messages or images, can be added to create an engaging and inviting experience for users starting a conversation.
+You can use the [emptyChatTemplate](../api/chat-ui#emptychattemplate) property to customize the chat interface when no messages are displayed. Personalized content, such as welcome messages or images, can be added to create an engaging and inviting experience for users starting a conversation.
+
+{% tabs %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+{% include code-snippet/chat-ui/templates/emptyChatTemplate/app-composition.vue %}
+{% endhighlight %}
+{% highlight html tabtitle="Options API (~/src/App.vue)" %}
+{% include code-snippet/chat-ui/templates/emptyChatTemplate/app.vue %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/chat-ui/templates/emptyChatTemplate" %}
## Message template
-You can use the `messageTemplate` property to customize the appearance and styling of each chat message. Modify text styling, layout, and other design elements to ensure a personalized chat experience. The template context includes `message` and `index` items.
+You can use the [messageTemplate](../api/chat-ui#messagetemplate) property to customize the appearance and styling of each chat message. Modify text styling, layout, and other design elements to ensure a personalized chat experience. The template context includes `message` and `index` items.
+
+{% tabs %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+{% include code-snippet/chat-ui/templates/messageTemplate/app-composition.vue %}
+{% endhighlight %}
+{% highlight html tabtitle="Options API (~/src/App.vue)" %}
+{% include code-snippet/chat-ui/templates/messageTemplate/app.vue %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/chat-ui/templates/messageTemplate" %}
## Time Break template
-You can use the `timeBreakTemplate` property to customize how time breaks are displayed with using the template, such as showing "Today," "Yesterday," or specific dates. This enhances conversation organization by clearly separating messages based on time, improving readability for the user. The template context includes `messageDate`.
+You can use the [timeBreakTemplate](../api/chat-ui#timebreaktemplate) property to customize how time breaks are displayed with using the template, such as showing "Today," "Yesterday," or specific dates. This enhances conversation organization by clearly separating messages based on time, improving readability for the user. The template context includes `messageDate`.
+
+{% tabs %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+{% include code-snippet/chat-ui/templates/timeBreakTemplate/app-composition.vue %}
+{% endhighlight %}
+{% highlight html tabtitle="Options API (~/src/App.vue)" %}
+{% include code-snippet/chat-ui/templates/timeBreakTemplate/app.vue %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/chat-ui/templates/timeBreakTemplate" %}
## Typing users template
-You can use the `typingUsersTemplate` property to customize the display of users currently typing in the chat. It allows for styling and positioning of the typing indicator, enhancing the user experience. The template context includes `users`.
+You can use the [typingUsersTemplate](../api/chat-ui#typinguserstemplate) property to customize the display of users currently typing in the chat. It allows for styling and positioning of the typing indicator, enhancing the user experience. The template context includes `users`.
+
+{% tabs %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+{% include code-snippet/chat-ui/templates/typingUsersTemplate/app-composition.vue %}
+{% endhighlight %}
+{% highlight html tabtitle="Options API (~/src/App.vue)" %}
+{% include code-snippet/chat-ui/templates/typingUsersTemplate/app.vue %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/chat-ui/templates/typingUsersTemplate" %}
## Suggestion template
-You can use the `suggestionTemplate` property to customize the quick reply suggestions that appear above the input field. Templates here can help create visually appealing and functional suggestion layouts. The template context includes `suggestion` and `index` items.
+You can use the [suggestionTemplate](../api/chat-ui#suggestiontemplate) property to customize the quick reply suggestions that appear above the input field. Templates here can help create visually appealing and functional suggestion layouts. The template context includes `suggestion` and `index` items.
+
+{% tabs %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+{% include code-snippet/chat-ui/templates/suggestionTemplate/app-composition.vue %}
+{% endhighlight %}
+{% highlight html tabtitle="Options API (~/src/App.vue)" %}
+{% include code-snippet/chat-ui/templates/suggestionTemplate/app.vue %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/chat-ui/templates/suggestionTemplate" %}
## Footer template
-You can use the `footerTemplate` property to customize the default footer area and manage message send actions with a personalized design. This flexibility allows users to create unique footers that meet their specific needs.
+You can use the [footerTemplate](../api/chat-ui#footertemplate) property to customize the default footer area and manage message send actions with a personalized design. This flexibility allows users to create unique footers that meet their specific needs.
+
+{% tabs %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+{% include code-snippet/chat-ui/templates/footerTemplate/app-composition.vue %}
+{% endhighlight %}
+{% highlight html tabtitle="Options API (~/src/App.vue)" %}
+{% include code-snippet/chat-ui/templates/footerTemplate/app.vue %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/chat-ui/templates/footerTemplate" %}
diff --git a/ej2-vue/chat-ui/timebreaks.md b/ej2-vue/chat-ui/timebreaks.md
index 46531034d..471925564 100644
--- a/ej2-vue/chat-ui/timebreaks.md
+++ b/ej2-vue/chat-ui/timebreaks.md
@@ -12,7 +12,18 @@ domainurl: ##DomainURL##
## Show or hide time breaks
-You can use the `showTimeBreak` property to display date-wise separations between all the messages which enhances the readability and message organizing. The default value is `false`, indicating time breaks are disabled unless it is enabled.
+You can use the [showTimeBreak](../api/chat-ui#showtimebreak) property to display date-wise separations between all the messages which enhances the readability and message organizing. The default value is `false`, indicating time breaks are disabled unless it is enabled.
+
+{% tabs %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+{% include code-snippet/chat-ui/timebreak/app-composition.vue %}
+{% endhighlight %}
+{% highlight html tabtitle="Options API (~/src/App.vue)" %}
+{% include code-snippet/chat-ui/timebreak/app.vue %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/chat-ui/timebreak" %}
## Time break template
diff --git a/ej2-vue/chat-ui/timestamp.md b/ej2-vue/chat-ui/timestamp.md
index c9e9597d9..7bf3c01d8 100644
--- a/ej2-vue/chat-ui/timestamp.md
+++ b/ej2-vue/chat-ui/timestamp.md
@@ -12,8 +12,30 @@ domainurl: ##DomainURL##
## Show or hide timestamp
-You can use the `showTimeStamp` property to enable or disable timestamps for all messages which displays the exact date and time when they were sent. By default, the value is `true`.
+You can use the [showTimeStamp](../api/chat-ui#showtimestamp) property to enable or disable timestamps for all messages which displays the exact date and time when they were sent. By default, the value is `true`.
+
+{% tabs %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+{% include code-snippet/chat-ui/timestamp/app-composition.vue %}
+{% endhighlight %}
+{% highlight html tabtitle="Options API (~/src/App.vue)" %}
+{% include code-snippet/chat-ui/timestamp/app.vue %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/chat-ui/timestamp" %}
## Setting time stamp format
-You can use the `timeStampFormat` property to display time formats for all the messages which are displayed with the messages being sent. By default, the value is `dd/MM/yyyy hh:mm a`.
+You can use the [timeStampFormat](../api/chat-ui#timestampformat) property to display time formats for all the messages which are displayed with the messages being sent. By default, the value is `dd/MM/yyyy hh:mm a`.
+
+{% tabs %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+{% include code-snippet/chat-ui/timestampFormat/app-composition.vue %}
+{% endhighlight %}
+{% highlight html tabtitle="Options API (~/src/App.vue)" %}
+{% include code-snippet/chat-ui/timestampFormat/app.vue %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/chat-ui/timestampFormat" %}
diff --git a/ej2-vue/chat-ui/typing-indicator.md b/ej2-vue/chat-ui/typing-indicator.md
index 8445a5a11..c91c32313 100644
--- a/ej2-vue/chat-ui/typing-indicator.md
+++ b/ej2-vue/chat-ui/typing-indicator.md
@@ -12,10 +12,21 @@ domainurl: ##DomainURL##
## Show or hide typing indicator
-You can use the `typingUsers` property to display the current user’s who are typing to indicate the active participants typing response within the chat conversations. If the property is empty the typing indicators will be removed.
+You can use the [typingUsers](../api/chat-ui#typingusers) property to display the current user’s who are typing to indicate the active participants typing response within the chat conversations. If the property is empty the typing indicators will be removed.
The typing users are the `UserModel[]` collection, where you can update the user’s dynamically to display the current typing user.
+{% tabs %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+{% include code-snippet/chat-ui/typingUsers/app-composition.vue %}
+{% endhighlight %}
+{% highlight html tabtitle="Options API (~/src/App.vue)" %}
+{% include code-snippet/chat-ui/typingUsers/app.vue %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/chat-ui/typingUsers" %}
+
## Typing indicator template
> Refer to the [Templates](./templates#typing-users-template) section for more details about the Typing indicator template.
diff --git a/ej2-vue/chat-ui/vue3-getting-started.md b/ej2-vue/chat-ui/vue3-getting-started.md
index da81d1059..5f2431634 100644
--- a/ej2-vue/chat-ui/vue3-getting-started.md
+++ b/ej2-vue/chat-ui/vue3-getting-started.md
@@ -241,7 +241,7 @@ yarn run dev
## Configure messages and user
-You can use the `` tag directive to group all the messages and `` tag to define each message and the `user` property to configure the current user for the chat.
+You can use the `` tag directive to group all the messages and `` tag to define each message and the [user](../api/chat-ui/user/) property to configure the current user for the chat.
{% tabs %}
{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
diff --git a/ej2-vue/chips/customization.md b/ej2-vue/chips/customization.md
index e6748e3c4..fde6a6457 100644
--- a/ej2-vue/chips/customization.md
+++ b/ej2-vue/chips/customization.md
@@ -108,4 +108,19 @@ Outline chip has the border with the background transparent. It can be set using
{% endhighlight %}
{% endtabs %}
-{% previewsample "page.domainurl/code-snippet/chips/default-cs7" %}
\ No newline at end of file
+{% previewsample "page.domainurl/code-snippet/chips/default-cs7" %}
+
+## Template
+
+The [`template`](https://helpej2.syncfusion.com/vue/documentation/api/chips/#template) property of the Chips component allows users to fully customize the layout and design of each chip. By using the `template` property, users can include custom HTML elements, such as links, icons, or additional content.
+
+{% tabs %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+{% include code-snippet/chips/default-cs14/app-composition.vue %}
+{% endhighlight %}
+{% highlight html tabtitle="Options API (~/src/App.vue)" %}
+{% include code-snippet/chips/default-cs14/app.vue %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/chips/default-cs14" %}
diff --git a/ej2-vue/circular-gauge/gauge-pointers.md b/ej2-vue/circular-gauge/gauge-pointers.md
index ac822c700..4f82d0294 100644
--- a/ej2-vue/circular-gauge/gauge-pointers.md
+++ b/ej2-vue/circular-gauge/gauge-pointers.md
@@ -180,9 +180,10 @@ The pointers can be dragged along the axis line by clicking and dragging them. T
### Enabling drag functionality for a specific pointer
-To enable or disable the drag functionality for specific pointers along the axis line, use the `enableDrag` property in the required pointer model.
+To enable or disable the drag functionality for specific pointers along the axis line, use the [enableDrag](https://ej2.syncfusion.com/vue/documentation/api/circular-gauge/pointerModel/#enabledrag) property in the required pointer model.
>When the `enableDrag` property is enabled for any individual pointer model, the `enablePointerDrag` property becomes ineffective.
+
The following example demonstrates how to enable the drag functionality for multiple pointers individually.
{% tabs %}
diff --git a/ej2-vue/code-snippet/ai-assistview/appearance/cssClass/app-composition.vue b/ej2-vue/code-snippet/ai-assistview/appearance/cssClass/app-composition.vue
index 05c04db0f..80a8239c1 100644
--- a/ej2-vue/code-snippet/ai-assistview/appearance/cssClass/app-composition.vue
+++ b/ej2-vue/code-snippet/ai-assistview/appearance/cssClass/app-composition.vue
@@ -1,5 +1,5 @@
-