-
-
- 2024 Volume 3 - 27.*
- 2024 Volume 2 - 26.*
- 2024 Volume 1 - 25.* +
- 2024 Volume 4 - 28.*
- 2024 Volume 3 - 27.*
- 2024 Volume 2 - 26.*
- 2024 Volume 1 - 25.*
- 2023 Volume 4 - 24.*
- 2023 Volume 3 - 23.*
- 2023 Volume 2 - 22.*
diff --git a/ej2-react/Release-notes/27.2.3.md b/ej2-react/Release-notes/27.2.3.md
new file mode 100644
index 000000000..8e89a763b
--- /dev/null
+++ b/ej2-react/Release-notes/27.2.3.md
@@ -0,0 +1,16 @@
+---
+title: Essential Studio for React Weekly Release Release Notes
+description: Essential Studio for React Weekly Release Release Notes
+platform: ej2-react
+documentation: ug
+---
+
+# Essential Studio for React Release Notes
+
+{% include release-info.html date="November 21, 2024" version="v27.2.3" %}
+
+{% directory path: _includes/release-notes/v27.2.3 %}
+
+{% include {{file.url}} %}
+
+{% enddirectory %}
\ No newline at end of file
diff --git a/ej2-react/Release-notes/27.2.4.md b/ej2-react/Release-notes/27.2.4.md
new file mode 100644
index 000000000..386b1e9eb
--- /dev/null
+++ b/ej2-react/Release-notes/27.2.4.md
@@ -0,0 +1,16 @@
+---
+title: Essential Studio for React Weekly Release Release Notes
+description: Essential Studio for React Weekly Release Release Notes
+platform: ej2-react
+documentation: ug
+---
+
+# Essential Studio for React Release Notes
+
+{% include release-info.html date="November 26, 2024" version="v27.2.4" %}
+
+{% directory path: _includes/release-notes/v27.2.4 %}
+
+{% include {{file.url}} %}
+
+{% enddirectory %}
\ No newline at end of file
diff --git a/ej2-react/Release-notes/27.2.5.md b/ej2-react/Release-notes/27.2.5.md
new file mode 100644
index 000000000..777cec6cb
--- /dev/null
+++ b/ej2-react/Release-notes/27.2.5.md
@@ -0,0 +1,16 @@
+---
+title: Essential Studio for React Weekly Release Release Notes
+description: Essential Studio for React Weekly Release Release Notes
+platform: ej2-react
+documentation: ug
+---
+
+# Essential Studio for React Release Notes
+
+{% include release-info.html date="December 03, 2024" version="v27.2.5" %}
+
+{% directory path: _includes/release-notes/v27.2.5 %}
+
+{% include {{file.url}} %}
+
+{% enddirectory %}
\ No newline at end of file
diff --git a/ej2-react/Release-notes/28.1.33.md b/ej2-react/Release-notes/28.1.33.md
new file mode 100644
index 000000000..8ef2cec09
--- /dev/null
+++ b/ej2-react/Release-notes/28.1.33.md
@@ -0,0 +1,16 @@
+---
+title: Essential Studio for React Main Release Release Notes
+description: Essential Studio for React Main Release Release Notes
+platform: ej2-react
+documentation: ug
+---
+
+# Essential Studio for React Release Notes
+
+{% include release-info.html date="December 12, 2024" version="v28.1.33" %}
+
+{% directory path: _includes/release-notes/v28.1.33 %}
+
+{% include {{file.url}} %}
+
+{% enddirectory %}
\ No newline at end of file
diff --git a/ej2-react/Release-notes/28.1.35.md b/ej2-react/Release-notes/28.1.35.md
new file mode 100644
index 000000000..0435caf3e
--- /dev/null
+++ b/ej2-react/Release-notes/28.1.35.md
@@ -0,0 +1,16 @@
+---
+title: Essential Studio for React Weekly Release Release Notes
+description: Essential Studio for React Weekly Release Release Notes
+platform: ej2-react
+documentation: ug
+---
+
+# Essential Studio for React 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-react/Release-notes/28.1.36.md b/ej2-react/Release-notes/28.1.36.md
new file mode 100644
index 000000000..d57ad28b2
--- /dev/null
+++ b/ej2-react/Release-notes/28.1.36.md
@@ -0,0 +1,16 @@
+---
+title: Essential Studio for React Weekly Release Release Notes
+description: Essential Studio for React Weekly Release Release Notes
+platform: ej2-react
+documentation: ug
+---
+
+# Essential Studio for React 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-react/Release-notes/28.1.37.md b/ej2-react/Release-notes/28.1.37.md
new file mode 100644
index 000000000..d8d4b516c
--- /dev/null
+++ b/ej2-react/Release-notes/28.1.37.md
@@ -0,0 +1,16 @@
+---
+title: Essential Studio for React Weekly Release Release Notes
+description: Essential Studio for React Weekly Release Release Notes
+platform: ej2-react
+documentation: ug
+---
+
+# Essential Studio for React 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-react/Release-notes/28.1.38.md b/ej2-react/Release-notes/28.1.38.md
new file mode 100644
index 000000000..9a14d95bf
--- /dev/null
+++ b/ej2-react/Release-notes/28.1.38.md
@@ -0,0 +1,16 @@
+---
+title: Essential Studio for React Weekly Release Release Notes
+description: Essential Studio for React Weekly Release Release Notes
+platform: ej2-react
+documentation: ug
+---
+
+# Essential Studio for React 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-react/Release-notes/28.1.39.md b/ej2-react/Release-notes/28.1.39.md
new file mode 100644
index 000000000..8a4405ccb
--- /dev/null
+++ b/ej2-react/Release-notes/28.1.39.md
@@ -0,0 +1,16 @@
+---
+title: Essential Studio for React Weekly Release Release Notes
+description: Essential Studio for React Weekly Release Release Notes
+platform: ej2-react
+documentation: ug
+---
+
+# Essential Studio for React 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-react/Release-notes/28.1.41.md b/ej2-react/Release-notes/28.1.41.md
new file mode 100644
index 000000000..b6e7d7640
--- /dev/null
+++ b/ej2-react/Release-notes/28.1.41.md
@@ -0,0 +1,16 @@
+---
+title: Essential Studio for React Weekly Release Release Notes
+description: Essential Studio for React Weekly Release Release Notes
+platform: ej2-react
+documentation: ug
+---
+
+# Essential Studio for React 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-react/accordion/getting-started.md b/ej2-react/accordion/getting-started.md
index cd124b783..f4e24add5 100644
--- a/ej2-react/accordion/getting-started.md
+++ b/ej2-react/accordion/getting-started.md
@@ -87,7 +87,7 @@ npm install @syncfusion/ej2-react-navigations --save
## Initialize the Accordion using Items
-The React Accordion can be rendered by defining an array of [`items`](https://ej2.syncfusion.com/react/documentation/api/accordion#items).
+The React Accordion can be rendered by defining an array of [`items`](https://ej2.syncfusion.com/react/documentation/api/accordion/#items).
* Import the Accordion component to your `src/App.ts` file using following code.
@@ -174,10 +174,10 @@ You need to follow the below structure of HTML elements to render the Accordion.
{% previewsample "page.domainurl/code-snippet/accordion/accordion-cs5" %}
-> You can add the custom class into Accordion component using [`cssClass`](https://ej2.syncfusion.com/react/documentation/api/accordion/accordionItem#cssclass) property which is used to customize the Accordion component.
+> You can add the custom class into Accordion component using [`cssClass`](https://ej2.syncfusion.com/react/documentation/api/accordion/accordionItem/#cssclass) property which is used to customize the Accordion component.
## See Also
-* [How to load accordion items dynamically](./how-to/load-accordion-items-dynamically/)
+* [How to load accordion items dynamically](./how-to/load-accordion-items-dynamically)
N> You can also explore our [React Accordion example](https://ej2.syncfusion.com/react/demos/#/fabric/accordion/default) that shows you how to configure the Accordion in React.
\ No newline at end of file
diff --git a/ej2-react/accumulation-chart/advanced-accessibility-configuration.md b/ej2-react/accumulation-chart/advanced-accessibility-configuration.md
new file mode 100644
index 000000000..c5de4d425
--- /dev/null
+++ b/ej2-react/accumulation-chart/advanced-accessibility-configuration.md
@@ -0,0 +1,74 @@
+---
+layout: post
+title: Accessibility customization | Syncfusion
+description: Learn here all about Accessibility customization in Syncfusion React Accumulation chart component of Syncfusion Essential JS 2 and more.
+control: Accessibility customization
+platform: ej2-react
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Accessibility customization
+
+The Syncfusion® React Accumulation Chart control 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 React Accumulation Chart control's accessibility customization are briefly explained in this section.
+
+The accumulation chart control has a number of characteristics that enable accessibility features to be customized, including:
+
+* [`accessibilityDescription`](https://ej2.syncfusion.com/react/documentation/api/accumulation-chart/accessibilityModel/#accessibilitydescription) - Provides a text description for the accumulation chart, improving support for screen readers.
+* [`accessibilityRole`](https://ej2.syncfusion.com/react/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/react/documentation/api/accumulation-chart/accessibilityModel/#focusable) - Allows the accumulation chart to receive focus, making it accessible via keyboard navigation.
+* [`focusBorderColor`](https://ej2.syncfusion.com/react/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/react/documentation/api/accumulation-chart#focusbordermargin) - Defines the margin around the focus border.
+* [`focusBorderWidth`](https://ej2.syncfusion.com/react/documentation/api/accumulation-chart#focusborderwidth) - Specifies the width of the focus border.
+* [`tabIndex`](https://ej2.syncfusion.com/react/documentation/api/accumulation-chart/accessibilityModel/#tabindex) - Specifies the tab order for the accumulation chart element, enabling efficient keyboard navigation.
+
+{% tabs %}
+{% highlight ts tabtitle="index.jsx" %}
+{% include code-snippet/chart/series/pie-cs43/app/index.jsx %}
+{% endhighlight %}
+{% highlight ts tabtitle="index.tsx" %}
+{% include code-snippet/chart/series/pie-cs43/app/index.tsx %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/chart/series/pie-cs43" %}
+
+## Series
+
+The [`series`](https://ej2.syncfusion.com/react/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/react/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/react/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/react/documentation/api/accumulation-chart/accessibilityModel/#focusable) - Allows the series to receive focus, making it accessible via keyboard navigation.
+* [`tabIndex`](https://ej2.syncfusion.com/react/documentation/api/accumulation-chart/accessibilityModel/#tabindex) - Specifies the tab order of the series element, enabling efficient keyboard navigation.
+
+{% tabs %}
+{% highlight ts tabtitle="index.jsx" %}
+{% include code-snippet/chart/series/pie-cs44/app/index.jsx %}
+{% endhighlight %}
+{% highlight ts tabtitle="index.tsx" %}
+{% include code-snippet/chart/series/pie-cs44/app/index.tsx %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/chart/series/pie-cs44" %}
+
+## Legend
+
+The [`legendSettings`](https://ej2.syncfusion.com/react/documentation/api/accumulation-chart#legendsettings) provide information about the series shown in the accumulation chart. The following [`accessibility`](https://ej2.syncfusion.com/react/documentation/api/accumulation-chart/legendSettingsModel/#accessibility) properties in [`legendSettings`](https://ej2.syncfusion.com/react/documentation/api/accumulation-chart#legendsettings) can be used to alter the accessibility of the accumulation chart's legend:
+
+* [`accessibilityDescription`](https://ej2.syncfusion.com/react/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/react/documentation/api/accumulation-chart/accessibilityModel/#accessibilityrole) - Specifies the role of the legend items to screen readers, providing appropriate context.
+* [`focusable`](https://ej2.syncfusion.com/react/documentation/api/accumulation-chart/accessibilityModel/#focusable) - Specifies whether legend items are focusable via keyboard navigation.
+* [`tabIndex`](https://ej2.syncfusion.com/react/documentation/api/accumulation-chart/accessibilityModel/#tabindex) - Specifies the tab order of the legend element, enabling efficient keyboard navigation.
+
+{% tabs %}
+{% highlight ts tabtitle="index.jsx" %}
+{% include code-snippet/chart/series/pie-cs45/app/index.jsx %}
+{% endhighlight %}
+{% highlight ts tabtitle="index.tsx" %}
+{% include code-snippet/chart/series/pie-cs45/app/index.tsx %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/chart/series/pie-cs45" %}
\ No newline at end of file
diff --git a/ej2-react/accumulation-chart/funnel.md b/ej2-react/accumulation-chart/funnel.md
index 3dd9d9857..2c6cb2f3d 100644
--- a/ej2-react/accumulation-chart/funnel.md
+++ b/ej2-react/accumulation-chart/funnel.md
@@ -21,7 +21,7 @@ To render a funnel series, use the series [`type`](https://ej2.syncfusion.com/re
{% endhighlight %}
{% endtabs %}
- {% previewsample "page.domainurl/code-snippet/chart/series/funnel-cs1" %}
+{% previewsample "page.domainurl/code-snippet/chart/series/funnel-cs1" %}
## Size
@@ -41,7 +41,7 @@ The size of the funnel chart can be customized by using the `width` and `height
{% previewsample "page.domainurl/code-snippet/chart/series/funnel-cs2" %}
-## Neck Size
+## Neck size
The funnel's neck size can be customized by using the `neckWidth` and `neckHeight` properties.
@@ -95,7 +95,7 @@ Points can be exploded on mouse click by setting the `explode` property to true.
{% previewsample "page.domainurl/code-snippet/chart/series/funnel-cs5" %}
-## Smart Data Label
+## Smart data label
It provides the data label smart arrangement of the funnel and pyramid series. The overlap data label will be placed on left side of the funnel/pyramid series.
@@ -131,7 +131,7 @@ Individual points can be customized using the `pointRender` event.
{% previewsample "page.domainurl/code-snippet/chart/series/funnel-cs7" %}
-## See Also
+## See also
* [Data label](./data-label/)
* [Grouping](./grouping/)
diff --git a/ej2-react/accumulation-chart/legend.md b/ej2-react/accumulation-chart/legend.md
index bbc636ff1..5c9deb994 100644
--- a/ej2-react/accumulation-chart/legend.md
+++ b/ej2-react/accumulation-chart/legend.md
@@ -23,12 +23,11 @@ Here, the legend for a point can be collapsed by giving the empty string to the
{% endhighlight %}
{% endtabs %}
- {% previewsample "page.domainurl/code-snippet/chart/series/legend-cs2" %}
+{% previewsample "page.domainurl/code-snippet/chart/series/legend-cs2" %}
->Note: To use the legends feature, inject the `AccumulationLegend` using the module
-into the `services`.
+>Note: To use the legends feature, inject the `AccumulationLegend` using the module into the `services`.
-## Position and Alignment
+## Position and alignment
By using the position property, you can position the legend at the `left`, `right`, `top` or `bottom` of the chart. You can also align the legend to `center`, `far` or `near` of the chart using the alignment property.
@@ -41,9 +40,9 @@ By using the position property, you can position the legend at the `left`, `
{% endhighlight %}
{% endtabs %}
- {% previewsample "page.domainurl/code-snippet/chart/series/legend-cs3" %}
+{% previewsample "page.domainurl/code-snippet/chart/series/legend-cs3" %}
-## Legend Reverse
+## Legend reverse
You can reverse the order of the legend items by using the [`reverse`](https://ej2.syncfusion.com/react/documentation/api/accumulation-chart/legendSettings/#reverse) property. By default, legend for the first series in the collection will be placed first.
@@ -56,9 +55,9 @@ You can reverse the order of the legend items by using the [`reverse`](https://e
{% endhighlight %}
{% endtabs %}
- {% previewsample "page.domainurl/code-snippet/chart/series/legend-reverse-cs1" %}
+{% previewsample "page.domainurl/code-snippet/chart/series/legend-reverse-cs1" %}
-## Legend Shape
+## Legend shape
To change the legend icon shape, use the `legendShape` property in the `series`. By default, legend icon shape is `seriesType`.
@@ -71,9 +70,9 @@ To change the legend icon shape, use the `legendShape` property in the `series
{% endhighlight %}
{% endtabs %}
- {% previewsample "page.domainurl/code-snippet/chart/series/legend-cs4" %}
+{% previewsample "page.domainurl/code-snippet/chart/series/legend-cs4" %}
-## Legend Size
+## Legend size
The legend size can be changed by using the `width` and `height` properties of the `legendSettings`.
@@ -86,9 +85,9 @@ The legend size can be changed by using the `width` and `height` properties of t
{% endhighlight %}
{% endtabs %}
- {% previewsample "page.domainurl/code-snippet/chart/series/legend-cs5" %}
+{% previewsample "page.domainurl/code-snippet/chart/series/legend-cs5" %}
-## Legend Item Size
+## Legend item size
You can customize the size of the legend items by using the `shapeHeight` and `shapeWidth` properties.
@@ -101,9 +100,9 @@ You can customize the size of the legend items by using the `shapeHeight` and `s
{% endhighlight %}
{% endtabs %}
- {% previewsample "page.domainurl/code-snippet/chart/series/legend-cs6" %}
+{% previewsample "page.domainurl/code-snippet/chart/series/legend-cs6" %}
-## Paging for Legend
+## Paging for legend
Paging will be enabled by default, when the legend items exceeds the legend bounds. You can view the each legend item by navigating between the pages using the navigation buttons.
@@ -116,9 +115,9 @@ Paging will be enabled by default, when the legend items exceeds the legend boun
{% endhighlight %}
{% endtabs %}
- {% previewsample "page.domainurl/code-snippet/chart/series/legend-cs7" %}
+{% previewsample "page.domainurl/code-snippet/chart/series/legend-cs7" %}
-## Legend Text Wrap
+## Legend text wrap
When the legend text exceeds the container, the text can be wrapped by using `textWrap` Property. End user can also wrap the legend text based on the `maximumLabelWidth` property.
@@ -131,12 +130,11 @@ When the legend text exceeds the container, the text can be wrapped by using `te
{% endhighlight %}
{% endtabs %}
- {% previewsample "page.domainurl/code-snippet/chart/series/legend-cs8" %}
+{% previewsample "page.domainurl/code-snippet/chart/series/legend-cs8" %}
-## Enable Animation
+## Enable animation
-You can customize the animation while clicking legend by setting enableAnimation as true or false using
-`enableAnimation` property in Accumulation Chart.
+You can customize the animation while clicking legend by setting enableAnimation as true or false using `enableAnimation` property in Accumulation Chart.
{% tabs %}
{% highlight js tabtitle="index.jsx" %}
@@ -147,9 +145,9 @@ You can customize the animation while clicking legend by setting enableAnimation
{% endhighlight %}
{% endtabs %}
- {% previewsample "page.domainurl/code-snippet/chart/series/legend-cs9" %}
+{% previewsample "page.domainurl/code-snippet/chart/series/legend-cs9" %}
-## Legend Title
+## Legend title
You can set title for legend using `title` property in `legendSettings`. You can also customize the `fontStyle`, `size`, `fontWeight`, `color`, `textAlignment`, `fontFamily`, `opacity` and `textOverflow` of legend title. `titlePosition` is used to set the legend position in `Top`, `Left` and `Right` position. `maximumTitleWidth` is used to set the width of the legend title. By default, it will be `100px`.
@@ -162,9 +160,9 @@ You can set title for legend using `title` property in `legendSettings`. You can
{% endhighlight %}
{% endtabs %}
- {% previewsample "page.domainurl/code-snippet/chart/series/legend-cs10" %}
+{% previewsample "page.domainurl/code-snippet/chart/series/legend-cs10" %}
-## Arrow Page Navigation
+## Arrow page navigation
By default, the page number will be enabled while legend paging. Now, you can disable that page number and also you can get left and right arrows for page navigation. You have to set `false` value to `enablePages` to get this support.
@@ -177,9 +175,9 @@ By default, the page number will be enabled while legend paging. Now, you can di
{% endhighlight %}
{% endtabs %}
- {% previewsample "page.domainurl/code-snippet/chart/series/legend-cs11" %}
+{% previewsample "page.domainurl/code-snippet/chart/series/legend-cs11" %}
-## Legend Item Padding
+## Legend item padding
The [`itemPadding`](https://ej2.syncfusion.com/react/documentation/api/accumulation-chart/legendSettings/#itempadding) property can be used to adjust the space between the legend items.
@@ -192,4 +190,19 @@ The [`itemPadding`](https://ej2.syncfusion.com/react/documentation/api/accumulat
{% endhighlight %}
{% endtabs %}
- {% previewsample "page.domainurl/code-snippet/chart/series/legend-cs12" %}
+{% previewsample "page.domainurl/code-snippet/chart/series/legend-cs12" %}
+
+## Legend layout
+
+The [`layout`](https://ej2.syncfusion.com/react/documentation/api/accumulation-chart/legendSettingsModel/#layout) property in [`legendSettings`](https://ej2.syncfusion.com/react/documentation/api/accumulation-chart#legendsettings) allows you to display the legend either horizontally or vertically. By default, the [`layout`](https://ej2.syncfusion.com/react/documentation/api/accumulation-chart/legendSettingsModel/#layout) is set to **Auto**. The [`maximumColumns`](https://ej2.syncfusion.com/react/documentation/api/accumulation-chart/legendSettingsModel/#maximumcolumns) property in [`legendSettings`](https://ej2.syncfusion.com/react/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/react/documentation/api/accumulation-chart/legendSettingsModel/#fixedwidth) property in [`legendSettings`](https://ej2.syncfusion.com/react/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 ts tabtitle="index.jsx" %}
+{% include code-snippet/chart/series/pie-cs42/app/index.jsx %}
+{% endhighlight %}
+{% highlight ts tabtitle="index.tsx" %}
+{% include code-snippet/chart/series/pie-cs42/app/index.tsx %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/chart/series/pie-cs42" %}
\ No newline at end of file
diff --git a/ej2-react/accumulation-chart/pie-dough-nut.md b/ej2-react/accumulation-chart/pie-dough-nut.md
index ef3dc382c..c685bebb1 100644
--- a/ej2-react/accumulation-chart/pie-dough-nut.md
+++ b/ej2-react/accumulation-chart/pie-dough-nut.md
@@ -10,7 +10,7 @@ domainurl: ##DomainURL##
# Pie dough nut in React Accumulation chart component
-## Pie Chart
+## Pie chart
To render a pie series, use the series [`type`](https://ej2.syncfusion.com/react/documentation/api/accumulation-chart/accumulationSeriesModel/#type) as `Pie` and inject the `PieSeries` module into the `services`. If the `PieSeries` module is not injected, this module will be loaded by default.
@@ -23,7 +23,7 @@ To render a pie series, use the series [`type`](https://ej2.syncfusion.com/react
{% endhighlight %}
{% endtabs %}
- {% previewsample "page.domainurl/code-snippet/chart/series/pie-cs5" %}
+{% previewsample "page.domainurl/code-snippet/chart/series/pie-cs5" %}
## Radius customization
@@ -39,9 +39,9 @@ You can customize this using [`radius`](https://ej2.syncfusion.com/react/documen
{% endhighlight %}
{% endtabs %}
- {% previewsample "page.domainurl/code-snippet/chart/series/pie-cs6" %}
+{% previewsample "page.domainurl/code-snippet/chart/series/pie-cs6" %}
-## Pie Center
+## Pie center
The center position of the pie can be changed by Center X and Center Y. By default, center value of the pie series x and y is 50%. You can customize this using [`center`](https://ej2.syncfusion.com/react/documentation/api/accumulation-chart/accumulationChartModel/#center)property of the series.
@@ -54,9 +54,9 @@ The center position of the pie can be changed by Center X and Center Y. By defau
{% endhighlight %}
{% endtabs %}
- {% previewsample "page.domainurl/code-snippet/chart/series/pie-cs7" %}
+{% previewsample "page.domainurl/code-snippet/chart/series/pie-cs7" %}
-## Various Radius Pie Chart
+## Various radius pie chart
You can use radius mapping to render the slice with different [`radius`](https://ej2.syncfusion.com/react/documentation/api/accumulation-chart/accumulationSeries/#radius) pie and also use [`border`](https://ej2.syncfusion.com/react/documentation/api/accumulation-chart/accumulationChartModel/#border) , fill properties to customize the point. dataLabel is used to represent individual data and its value.
@@ -69,9 +69,9 @@ You can use radius mapping to render the slice with different [`radius`](https:/
{% endhighlight %}
{% endtabs %}
- {% previewsample "page.domainurl/code-snippet/chart/series/pie-cs8" %}
+{% previewsample "page.domainurl/code-snippet/chart/series/pie-cs8" %}
-## Doughnut Chart
+## Doughnut chart
To achieve a doughnut in pie series, customize the [`innerRadius`](https://ej2.syncfusion.com/react/documentation/api/accumulation-chart/accumulationSeries/#innerradius) property of the series. By setting value greater than 0%, a doughnut will appear. The `innerRadius` property takes value from 0% to 100% of the pie radius.
@@ -84,9 +84,9 @@ To achieve a doughnut in pie series, customize the [`innerRadius`](https://ej2.s
{% endhighlight %}
{% endtabs %}
- {% previewsample "page.domainurl/code-snippet/chart/series/doughnut-cs1" %}
+{% previewsample "page.domainurl/code-snippet/chart/series/doughnut-cs1" %}
-## Start and End angles
+## Start and end angles
You can customize the start and end angle of the pie series using the [`startAngle`](https://ej2.syncfusion.com/react/documentation/api/accumulation-chart/accumulationSeries/#startangle) and [`endAngle`](https://ej2.syncfusion.com/react/documentation/api/accumulation-chart/accumulationSeries/#endangle) properties. The default value of `startAngle` is 0 degree, and `endAngle` is 360 degrees. By customizing this, you can achieve a semi pie series.
@@ -99,9 +99,9 @@ You can customize the start and end angle of the pie series using the [`startAng
{% endhighlight %}
{% endtabs %}
- {% previewsample "page.domainurl/code-snippet/chart/series/startangle-cs2" %}
+{% previewsample "page.domainurl/code-snippet/chart/series/startangle-cs2" %}
-## Color & Text Mapping
+## Color & text mapping
The fill color and the text in the data source can be mapped to the chart using `pointColorMapping` in series and `name` in datalabel respectively.
@@ -114,9 +114,9 @@ The fill color and the text in the data source can be mapped to the chart using
{% endhighlight %}
{% endtabs %}
- {% previewsample "page.domainurl/code-snippet/chart/series/startangle-cs3" %}
+{% previewsample "page.domainurl/code-snippet/chart/series/startangle-cs3" %}
-## Border Radius
+## Border radius
You can create rounded corners for each slice using the [`borderRadius`](https://ej2.syncfusion.com/react/documentation/api/accumulation-chart/accumulationSeriesModel/#borderradius) option, giving the chart a modern and polished look.
@@ -124,7 +124,6 @@ You can create rounded corners for each slice using the [`borderRadius`](https:/
{% highlight ts tabtitle="index.jsx" %}
{% include code-snippet/chart/series/pie-cs39/app/index.jsx %}
{% endhighlight %}
-
{% highlight ts tabtitle="index.tsx" %}
{% include code-snippet/chart/series/pie-cs39/app/index.tsx %}
{% endhighlight %}
@@ -145,7 +144,7 @@ Individual points can be customized using the `pointRender` event.
{% endhighlight %}
{% endtabs %}
- {% previewsample "page.domainurl/code-snippet/chart/series/startangle-cs4" %}
+{% previewsample "page.domainurl/code-snippet/chart/series/startangle-cs4" %}
## Hide pie or doughnut border
@@ -160,7 +159,7 @@ By default, the border will appear in the pie/doughnut chart while mouse hover o
{% endhighlight %}
{% endtabs %}
- {% previewsample "page.domainurl/code-snippet/chart/series/startangle-cs5" %}
+{% previewsample "page.domainurl/code-snippet/chart/series/startangle-cs5" %}
## Patterns
@@ -170,7 +169,6 @@ You can apply different patterns to the pie slices using the [`applyPattern`](ht
{% highlight ts tabtitle="index.jsx" %}
{% include code-snippet/chart/series/pie-cs40/app/index.jsx %}
{% endhighlight %}
-
{% highlight ts tabtitle="index.tsx" %}
{% include code-snippet/chart/series/pie-cs40/app/index.tsx %}
{% endhighlight %}
@@ -199,9 +197,9 @@ You can also achieve drill-up (back to the initial state) by using [chartMouseCl
{% endhighlight %}
{% endtabs %}
- {% previewsample "page.domainurl/code-snippet/chart/grid-visual-cs1" %}
+{% previewsample "page.domainurl/code-snippet/chart/grid-visual-cs1" %}
-## See Also
+## See also
* [Data label](./data-label/)
* [Grouping](./grouping/)
diff --git a/ej2-react/accumulation-chart/pyramid.md b/ej2-react/accumulation-chart/pyramid.md
index 737159ace..50f567671 100644
--- a/ej2-react/accumulation-chart/pyramid.md
+++ b/ej2-react/accumulation-chart/pyramid.md
@@ -62,7 +62,7 @@ The size of the pyramid chart can be customized by using the `width` and `heigh
{% previewsample "page.domainurl/code-snippet/chart/series/pyramid-cs3" %}
-## Gap Between the Segments
+## Gap between the segments
Pyramid chart provides options to customize the space between the segments by using the `gapRatio` property of the series. It ranges from 0 to 1.
@@ -116,7 +116,7 @@ Individual points can be customized using the `pointRender` event.
{% previewsample "page.domainurl/code-snippet/chart/series/pyramid-cs6" %}
-## See Also
+## See also
* [Data label](./data-label/)
* [Grouping](./grouping/)
\ No newline at end of file
diff --git a/ej2-react/accumulation-chart/tool-tip.md b/ej2-react/accumulation-chart/tool-tip.md
index e30fb0384..df4102063 100644
--- a/ej2-react/accumulation-chart/tool-tip.md
+++ b/ej2-react/accumulation-chart/tool-tip.md
@@ -128,4 +128,19 @@ Using [`tooltipRender`](https://ej2.syncfusion.com/react/documentation/api/accum
{% endhighlight %}
{% endtabs %}
-{% previewsample "page.domainurl/code-snippet/chart/series/legend-cs19" %}
\ No newline at end of file
+{% previewsample "page.domainurl/code-snippet/chart/series/legend-cs19" %}
+
+## Enable highlight
+
+By setting the [`enableHighlight`](https://ej2.syncfusion.com/react/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 ts tabtitle="index.jsx" %}
+{% include code-snippet/chart/series/pie-cs41/app/index.jsx %}
+{% endhighlight %}
+{% highlight ts tabtitle="index.tsx" %}
+{% include code-snippet/chart/series/pie-cs41/app/index.tsx %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/chart/series/pie-cs41" %}
\ No newline at end of file
diff --git a/ej2-react/ai-assistview/appearance.md b/ej2-react/ai-assistview/appearance.md
index 80bb69662..69153e55e 100644
--- a/ej2-react/ai-assistview/appearance.md
+++ b/ej2-react/ai-assistview/appearance.md
@@ -12,7 +12,7 @@ domainurl: ##DomainURL##
## Setting width
-You can use the [width](https://ej2.syncfusion.com/react/documentation/api/ai-assist-view/#width) property to set the width of the AI AssistView. The default value is `100%`.
+You can use the [width](https://ej2.syncfusion.com/react/documentation/api/ai-assistview/#width) property to set the width of the AI AssistView. The default value is `100%`.
{% tabs %}
{% highlight js tabtitle="index.jsx" %}
@@ -27,7 +27,7 @@ You can use the [width](https://ej2.syncfusion.com/react/documentation/api/ai-as
## Setting height
-You can use the [height](https://ej2.syncfusion.com/react/documentation/api/ai-assist-view/#height) property to set the height of the AI AssistView. The default value is `100%`.
+You can use the [height](https://ej2.syncfusion.com/react/documentation/api/ai-assistview/#height) property to set the height of the AI AssistView. The default value is `100%`.
{% tabs %}
{% highlight js tabtitle="index.jsx" %}
@@ -42,7 +42,7 @@ You can use the [height](https://ej2.syncfusion.com/react/documentation/api/ai-a
## Cssclass
-You can customize the appearance of the AI AssistView component by using the [cssClass](https://ej2.syncfusion.com/react/documentation/api/ai-assist-view/#cssclass) property.
+You can customize the appearance of the AI AssistView component by using the [cssClass](https://ej2.syncfusion.com/react/documentation/api/ai-assistview/#cssclass) property.
{% tabs %}
{% highlight js tabtitle="index.jsx" %}
diff --git a/ej2-react/ai-assistview/assist-view.md b/ej2-react/ai-assistview/assist-view.md
index e7d99c96d..15ef3fa45 100644
--- a/ej2-react/ai-assistview/assist-view.md
+++ b/ej2-react/ai-assistview/assist-view.md
@@ -12,7 +12,7 @@ domainurl: ##DomainURL##
## Setting prompt text
-You can use the [prompt](https://ej2.syncfusion.com/react/documentation/api/ai-assist-view/#prompt) property to define the prompt text for the AI AssistView component.
+You can use the [prompt](https://ej2.syncfusion.com/react/documentation/api/ai-assistview/#prompt) property to define the prompt text for the AI AssistView component.
{% tabs %}
{% highlight js tabtitle="index.jsx" %}
@@ -27,7 +27,7 @@ You can use the [prompt](https://ej2.syncfusion.com/react/documentation/api/ai-a
## Setting prompt placeholder
-You can use the [promptPlaceholder](https://ej2.syncfusion.com/react/documentation/api/ai-assist-view/#promptplaceholder) property to set the placeholder text for the prompt textarea. The default value is `Type prompt for assistance...`.
+You can use the [promptPlaceholder](https://ej2.syncfusion.com/react/documentation/api/ai-assistview/#promptplaceholder) property to set the placeholder text for the prompt textarea. The default value is `Type prompt for assistance...`.
{% tabs %}
{% highlight js tabtitle="index.jsx" %}
@@ -42,7 +42,7 @@ You can use the [promptPlaceholder](https://ej2.syncfusion.com/react/documentati
## Prompt-response collection
-You can use the [prompts](https://ej2.syncfusion.com/react/documentation/api/ai-assist-view/#prompts) property to initialize the component with the configured data as a collection of prompts and responses or individual entries.
+You can use the [prompts](https://ej2.syncfusion.com/react/documentation/api/ai-assistview/#prompts) property to initialize the component with the configured data as a collection of prompts and responses or individual entries.
> The `prompts` collection stores all the prompts and responses generated.
@@ -59,7 +59,7 @@ You can use the [prompts](https://ej2.syncfusion.com/react/documentation/api/ai-
## Adding prompt suggestions
-You can use the [promptSuggestions](https://ej2.syncfusion.com/react/documentation/api/ai-assist-view/#promptsuggestions) property, to add the suggestions in both initial and on-demand which help users to refine their prompts. Additionally, custom header can be set for suggestions further enhancing the user experience.
+You can use the [promptSuggestions](https://ej2.syncfusion.com/react/documentation/api/ai-assistview/#promptsuggestions) property, to add the suggestions in both initial and on-demand which help users to refine their prompts. Additionally, custom header can be set for suggestions further enhancing the user experience.
{% tabs %}
{% highlight js tabtitle="index.jsx" %}
@@ -74,7 +74,7 @@ You can use the [promptSuggestions](https://ej2.syncfusion.com/react/documentati
### Adding suggestion headers
-You can use the [promptSuggestionsHeader](https://ej2.syncfusion.com/react/documentation/api/ai-assist-view/#promptsuggestionsheader) property to set the header text for the prompt suggestions in the AI AssistView.
+You can use the [promptSuggestionsHeader](https://ej2.syncfusion.com/react/documentation/api/ai-assistview/#promptsuggestionsheader) property to set the header text for the prompt suggestions in the AI AssistView.
{% tabs %}
{% highlight js tabtitle="index.jsx" %}
@@ -89,7 +89,7 @@ You can use the [promptSuggestionsHeader](https://ej2.syncfusion.com/react/docum
## Adding prompt iconCss
-You can customize the appearance of the prompter avatar by using the [promptIconCss](https://ej2.syncfusion.com/react/documentation/api/ai-assist-view/#prompticoncss) property.
+You can customize the appearance of the prompter avatar by using the [promptIconCss](https://ej2.syncfusion.com/react/documentation/api/ai-assistview/#prompticoncss) property.
{% tabs %}
{% highlight js tabtitle="index.jsx" %}
@@ -104,7 +104,7 @@ You can customize the appearance of the prompter avatar by using the [promptIcon
## Adding response iconCss
-You can use the [responseIconCss](https://ej2.syncfusion.com/react/documentation/api/ai-assist-view/#responseiconcss) property to customize the appearance of the responder avatar. By default, the `e-assistview-icon` class is added as the built-in AI AssistView response icon.
+You can use the [responseIconCss](https://ej2.syncfusion.com/react/documentation/api/ai-assistview/#responseiconcss) property to customize the appearance of the responder avatar. By default, the `e-assistview-icon` class is added as the built-in AI AssistView response icon.
{% tabs %}
{% highlight js tabtitle="index.jsx" %}
@@ -119,7 +119,7 @@ You can use the [responseIconCss](https://ej2.syncfusion.com/react/documentation
## Show or hide clear button
-You can use the [showClearButton](https://ej2.syncfusion.com/react/documentation/api/ai-assist-view/#showclearbutton) property to show or hide the clear button. By default, its value is `false`, when the clear button is clicked, the prompt text entered will be cleared.
+You can use the [showClearButton](https://ej2.syncfusion.com/react/documentation/api/ai-assistview/#showclearbutton) property to show or hide the clear button. By default, its value is `false`, when the clear button is clicked, the prompt text entered will be cleared.
{% tabs %}
{% highlight js tabtitle="index.jsx" %}
diff --git a/ej2-react/ai-assistview/custom-view.md b/ej2-react/ai-assistview/custom-view.md
index 14317384c..75e93c045 100644
--- a/ej2-react/ai-assistview/custom-view.md
+++ b/ej2-react/ai-assistview/custom-view.md
@@ -16,7 +16,7 @@ By using the `ViewsDirective` tag you can define the collection of different ass
#### Setting view type
-You can set the type of view by using the [type](https://ej2.syncfusion.com/react/documentation/api/ai-assist-view/assistViewType/) property within the `ViewDirective` tag. It accepts two values such as `Assist` and `Custom`.
+You can set the type of view by using the [type](https://ej2.syncfusion.com/react/documentation/api/ai-assistview/assistViewType/) property within the `ViewDirective` tag. It accepts two values such as `Assist` and `Custom`.
{% raw %}
```ts
@@ -45,7 +45,7 @@ ReactDOM.render(
, document.getElementById('container')); ### Setting name -You can use the [name](https://ej2.syncfusion.com/react/documentation/api/ai-assist-view/assistViewModel/#name) property to specifies the header name of the `Assist` or `Custom` views in the AI AssistView. +You can use the [name](https://ej2.syncfusion.com/react/documentation/api/ai-assistview/assistViewModel/#name) property to specifies the header name of the `Assist` or `Custom` views in the AI AssistView. {% raw %} ```ts @@ -74,7 +74,7 @@ ReactDOM.render( , document.getElementById('container')); ### Setting iconCss -You can customize the view icons by using the [iconCss](https://ej2.syncfusion.com/react/documentation/api/ai-assist-view/assistViewModel/#iconcss) property. By default the `e-assistview-icon` class is added as built-in header icon for the AI AssistView. +You can customize the view icons by using the [iconCss](https://ej2.syncfusion.com/react/documentation/api/ai-assistview/assistViewModel/#iconcss) property. By default the `e-assistview-icon` class is added as built-in header icon for the AI AssistView. {% raw %} ```ts @@ -119,7 +119,7 @@ The following example illustrates how types, name, and iconCss are used in a AI ### Setting view template -You can use the [viewTemplate](https://ej2.syncfusion.com/react/documentation/api/ai-assist-view/assistViewModel/#viewtemplate) property to add the view content of the multiple views added in the AI AssistView. +You can use the [viewTemplate](https://ej2.syncfusion.com/react/documentation/api/ai-assistview/assistViewModel/#viewtemplate) property to add the view content of the multiple views added in the AI AssistView. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -137,7 +137,7 @@ You can use the [viewTemplate](https://ej2.syncfusion.com/react/documentation/ap ## Setting active view -You can use the [activeView](https://ej2.syncfusion.com/react/documentation/api/ai-assist-view#activeview) property to set the active view in the AI AssistView. By default, the value is `0`. +You can use the [activeView](https://ej2.syncfusion.com/react/documentation/api/ai-assistview#activeview) property to set the active view in the AI AssistView. By default, the value is `0`. {% tabs %} {% highlight js tabtitle="index.jsx" %} diff --git a/ej2-react/ai-assistview/events.md b/ej2-react/ai-assistview/events.md index 1bfdb7b51..4576754f3 100644 --- a/ej2-react/ai-assistview/events.md +++ b/ej2-react/ai-assistview/events.md @@ -14,7 +14,7 @@ This section describes the AI AssistView events that will be triggered when appr ## created -The AI AssistView component triggers the [created](https://ej2.syncfusion.com/react/documentation/api/ai-assist-view#created) event when the component rendering is completed. +The AI AssistView component triggers the [created](https://ej2.syncfusion.com/react/documentation/api/ai-assistview#created) event when the component rendering is completed. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -27,7 +27,7 @@ The AI AssistView component triggers the [created](https://ej2.syncfusion.com/re ## promptRequest -The [promptRequest](https://ej2.syncfusion.com/react/documentation/api/ai-assist-view#promptrequest) event is triggered when the prompt request is made in the AI AssistView component. +The [promptRequest](https://ej2.syncfusion.com/react/documentation/api/ai-assistview#promptrequest) event is triggered when the prompt request is made in the AI AssistView component. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -40,7 +40,7 @@ The [promptRequest](https://ej2.syncfusion.com/react/documentation/api/ai-assist ## promptChanged -The [promptChanged](https://ej2.syncfusion.com/react/documentation/api/ai-assist-view#promptchanged) event is triggered when the prompt text is changed in the AI AssistView component. +The [promptChanged](https://ej2.syncfusion.com/react/documentation/api/ai-assistview#promptchanged) event is triggered when the prompt text is changed in the AI AssistView component. {% tabs %} {% highlight js tabtitle="index.jsx" %} diff --git a/ej2-react/ai-assistview/getting-started.md b/ej2-react/ai-assistview/getting-started.md index 7361fbd16..446c14bab 100644 --- a/ej2-react/ai-assistview/getting-started.md +++ b/ej2-react/ai-assistview/getting-started.md @@ -12,6 +12,9 @@ domainurl: ##DomainURL## This section explains how to create a simple **AI AssistView** component and configure its available functionalities in React. +To get started quickly with React AI AssistView component, you can check out this video: +{% youtube "https://www.youtube.com/watch?v=rwXanLEHdFU" %} + ## Dependencies The list of dependencies required to use the `AI AssistView` component in your application is given as follows: @@ -142,7 +145,7 @@ npm start ## Configure suggestions and responses -You can use the [promptSuggestions](https://ej2.syncfusion.com/react/documentation/api/ai-assist-view#promptsuggestions) property to add prompt suggestions and the [promptRequest](https://ej2.syncfusion.com/react/documentation/api/ai-assist-view#promptrequest) event to add responses when the prompt matches the specified prompts data otherwise, the default response will be displayed. +You can use the [promptSuggestions](https://ej2.syncfusion.com/react/documentation/api/ai-assistview#promptsuggestions) property to add prompt suggestions and the [promptRequest](https://ej2.syncfusion.com/react/documentation/api/ai-assistview#promptrequest) event to add responses when the prompt matches the specified prompts data otherwise, the default response will be displayed. {% tabs %} {% highlight js tabtitle="index.jsx" %} diff --git a/ej2-react/ai-assistview/methods.md b/ej2-react/ai-assistview/methods.md index 4dfba824a..74bb2183b 100644 --- a/ej2-react/ai-assistview/methods.md +++ b/ej2-react/ai-assistview/methods.md @@ -12,7 +12,7 @@ domainurl: ##DomainURL## ## Adding prompt response -You can use the [addPromptResponse](https://ej2.syncfusion.com/react/documentation/api/ai-assist-view#addpromptresponse) public method to add the prompts and responses to the AI AssistView. You can add the it either as a `string` or `object` collection. +You can use the [addPromptResponse](https://ej2.syncfusion.com/react/documentation/api/ai-assistview#addpromptresponse) public method to add the prompts and responses to the AI AssistView. You can add the it either as a `string` or `object` collection. ### Adding responses as string. @@ -52,7 +52,7 @@ You can add object response, by passing the prompt and response as a collection ## Executing prompt -You can use the [executePrompt](https://ej2.syncfusion.com/react/documentation/api/ai-assist-view#executeprompt) method to execute the prompts dynamically in the AI AssistView. It accepts prompts as string values, which triggers the [promptRequest](https://ej2.syncfusion.com/react/documentation/api/ai-assist-view#promptrequest) event and performs the callback actions. +You can use the [executePrompt](https://ej2.syncfusion.com/react/documentation/api/ai-assistview#executeprompt) method to execute the prompts dynamically in the AI AssistView. It accepts prompts as string values, which triggers the [promptRequest](https://ej2.syncfusion.com/react/documentation/api/ai-assistview#promptrequest) event and performs the callback actions. {% tabs %} {% highlight js tabtitle="index.jsx" %} diff --git a/ej2-react/ai-assistview/templates.md b/ej2-react/ai-assistview/templates.md index 9f1eb5b16..1b4aaa528 100644 --- a/ej2-react/ai-assistview/templates.md +++ b/ej2-react/ai-assistview/templates.md @@ -14,7 +14,7 @@ The AI AssistView provides several template options to customize the banner, pro ## Banner template -You can use the [bannerTemplate](https://ej2.syncfusion.com/react/documentation/api/ai-assist-view#bannertemplate) property to display additional information, such as a welcome note, and more in the AI AssistView. This banner is positioned at the top of the prompt and response conversation area within the AI AssistView. +You can use the [bannerTemplate](https://ej2.syncfusion.com/react/documentation/api/ai-assistview#bannertemplate) property to display additional information, such as a welcome note, and more in the AI AssistView. This banner is positioned at the top of the prompt and response conversation area within the AI AssistView. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -32,7 +32,7 @@ You can use the [bannerTemplate](https://ej2.syncfusion.com/react/documentation/ ## Prompt item template -You can use the [promptItemTemplate](https://ej2.syncfusion.com/react/documentation/api/ai-assist-view#promptitemtemplate) property to customize the prompt items in the AI AssistView. The template context includes `prompt`, `toolbarItems` and `index` items. +You can use the [promptItemTemplate](https://ej2.syncfusion.com/react/documentation/api/ai-assistview#promptitemtemplate) property to customize the prompt items in the AI AssistView. The template context includes `prompt`, `toolbarItems` and `index` items. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -50,7 +50,7 @@ You can use the [promptItemTemplate](https://ej2.syncfusion.com/react/documentat ## Response item template -You can use the [responseItemTemplate](https://ej2.syncfusion.com/react/documentation/api/ai-assist-view#responseitemtemplate) property to customize response items within the AI AssistView. The template context includes the `prompt`, `response`, `index`, `toolbarItems` and `output` items. +You can use the [responseItemTemplate](https://ej2.syncfusion.com/react/documentation/api/ai-assistview#responseitemtemplate) property to customize response items within the AI AssistView. The template context includes the `prompt`, `response`, `index`, `toolbarItems` and `output` items. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -68,7 +68,7 @@ You can use the [responseItemTemplate](https://ej2.syncfusion.com/react/document ## Prompt suggestion item template -You can use the [promptSuggestionItemTemplate](https://ej2.syncfusion.com/react/documentation/api/ai-assist-view#promptsuggestionitemtemplate) property to customize the prompt suggestion items in the AI AssistView. The template context includes the `index` and `promptSuggestion`. +You can use the [promptSuggestionItemTemplate](https://ej2.syncfusion.com/react/documentation/api/ai-assistview#promptsuggestionitemtemplate) property to customize the prompt suggestion items in the AI AssistView. The template context includes the `index` and `promptSuggestion`. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -86,7 +86,7 @@ You can use the [promptSuggestionItemTemplate](https://ej2.syncfusion.com/react/ ## Footer template -You can use the [footerTemplate](https://ej2.syncfusion.com/react/documentation/api/ai-assist-view#footertemplate) property to customize the default footer area and manage prompt request actions in the AI AssistView. This allows users to create unique footers that meet their specific needs. +You can use the [footerTemplate](https://ej2.syncfusion.com/react/documentation/api/ai-assistview#footertemplate) property to customize the default footer area and manage prompt request actions in the AI AssistView. This allows users to create unique footers that meet their specific needs. {% tabs %} {% highlight js tabtitle="index.jsx" %} diff --git a/ej2-react/ai-assistview/toolbar-items.md b/ej2-react/ai-assistview/toolbar-items.md index efa3f485d..807ea4aa5 100644 --- a/ej2-react/ai-assistview/toolbar-items.md +++ b/ej2-react/ai-assistview/toolbar-items.md @@ -10,7 +10,7 @@ domainurl: ##DomainURL## # Toolbar items in React AI AssistView component -You can render the AI AssistView toolbar items by using the `items` property in the [toolbarSettings](https://ej2.syncfusion.com/react/documentation/api/ai-assist-view#toolbarsettings), [responseToolbarSettings](https://ej2.syncfusion.com/react/documentation/api/ai-assist-view#responsetoolbarsettings) & [promptToolbarSettings](https://ej2.syncfusion.com/react/documentation/api/ai-assist-view#prompttoolbarsettings) properties. +You can render the AI AssistView toolbar items by using the `items` property in the [toolbarSettings](https://ej2.syncfusion.com/react/documentation/api/ai-assistview#toolbarsettings), [responseToolbarSettings](https://ej2.syncfusion.com/react/documentation/api/ai-assistview#responsetoolbarsettings) & [promptToolbarSettings](https://ej2.syncfusion.com/react/documentation/api/ai-assistview#prompttoolbarsettings) properties. ## Adding header toolbar items @@ -20,7 +20,7 @@ The AI AssistView toolbar's can be rendered by defining an array of items. Items #### Adding iconCss -You can customize the toolbar icons by using the [iconCss](https://ej2.syncfusion.com/react/documentation/api/ai-assist-view/toolbarItemModel/#iconcss) property. +You can customize the toolbar icons by using the [iconCss](https://ej2.syncfusion.com/react/documentation/api/ai-assistview/toolbarItemModel/#iconcss) property. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -35,7 +35,7 @@ You can customize the toolbar icons by using the [iconCss](https://ej2.syncfusio #### Setting item type -You can change the toolbar item type by using the [`type`](https://ej2.syncfusion.com/react/documentation/api/ai-assist-view/toolbarItemModel/#type) property. The `type` supports three types of items such as `Button`, `Separator` and `Input`. By default, the type is `Button`. +You can change the toolbar item type by using the [`type`](https://ej2.syncfusion.com/react/documentation/api/ai-assistview/toolbarItemModel/#type) property. The `type` supports three types of items such as `Button`, `Separator` and `Input`. By default, the type is `Button`. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -50,7 +50,7 @@ You can change the toolbar item type by using the [`type`](https://ej2.syncfusio #### Setting text -You can use the [text](https://ej2.syncfusion.com/react/documentation/api/ai-assist-view/toolbarItemModel/#text) property to set the text for toolbar item. +You can use the [text](https://ej2.syncfusion.com/react/documentation/api/ai-assistview/toolbarItemModel/#text) property to set the text for toolbar item. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -65,7 +65,7 @@ You can use the [text](https://ej2.syncfusion.com/react/documentation/api/ai-ass #### Show or hide toolbar item -You can use the [visible](https://ej2.syncfusion.com/react/documentation/api/ai-assist-view/toolbarItemModel/#visible) property to specify whether to show or hide the toolbar item. By default, its value is `true`. +You can use the [visible](https://ej2.syncfusion.com/react/documentation/api/ai-assistview/toolbarItemModel/#visible) property to specify whether to show or hide the toolbar item. By default, its value is `true`. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -80,7 +80,7 @@ You can use the [visible](https://ej2.syncfusion.com/react/documentation/api/ai- #### Setting disabled -You can use the [disabled](https://ej2.syncfusion.com/react/documentation/api/ai-assist-view/toolbarItemModel/#disabled) property to disable the toolbar item. By default, its value is `false`. +You can use the [disabled](https://ej2.syncfusion.com/react/documentation/api/ai-assistview/toolbarItemModel/#disabled) property to disable the toolbar item. By default, its value is `false`. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -95,7 +95,7 @@ You can use the [disabled](https://ej2.syncfusion.com/react/documentation/api/ai #### Setting tooltip text -You can use the [tooltip](https://ej2.syncfusion.com/react/documentation/api/ai-assist-view/toolbarItemModel/#tooltip) property to specify the tooltip text to be displayed on hovering the toolbar item. +You can use the [tooltip](https://ej2.syncfusion.com/react/documentation/api/ai-assistview/toolbarItemModel/#tooltip) property to specify the tooltip text to be displayed on hovering the toolbar item. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -110,7 +110,7 @@ You can use the [tooltip](https://ej2.syncfusion.com/react/documentation/api/ai- #### Setting cssClass -You can use the [cssClass](https://ej2.syncfusion.com/react/documentation/api/ai-assist-view/toolbarItemModel/#cssclass) property to customize the toolbar item. +You can use the [cssClass](https://ej2.syncfusion.com/react/documentation/api/ai-assistview/toolbarItemModel/#cssclass) property to customize the toolbar item. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -128,7 +128,7 @@ You can use the [cssClass](https://ej2.syncfusion.com/react/documentation/api/ai #### Setting alignment -You can change the alignment of toolbar item by using the [`align`](https://ej2.syncfusion.com/react/documentation/api/ai-assist-view/toolbarItemModel/#align) property. It supports three types of alignments such as `Left`, `Center` and `Right`. By default, the value is `Left`. +You can change the alignment of toolbar item by using the [`align`](https://ej2.syncfusion.com/react/documentation/api/ai-assistview/toolbarItemModel/#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`. @@ -145,7 +145,7 @@ In the following example, toolbar item type is set with `Right`. #### Enabling tab key navigation in toolbar -You can use the [`tabIndex`](https://ej2.syncfusion.com/react/documentation/api/ai-assist-view/toolbarItemModel/#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. +You can use the [`tabIndex`](https://ej2.syncfusion.com/react/documentation/api/ai-assistview/toolbarItemModel/#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. To use the `tabIndex` property, set it for each Toolbar item which you want to enable tab key navigation. The `tabIndex` property should be set to a positive integer value. A value of `0` or a negative value will disable tab key navigation for the item. @@ -227,7 +227,7 @@ In this case, the user can switch between the two Toolbar items using the Tab an #### Setting template -You can use the [template](https://ej2.syncfusion.com/react/documentation/api/ai-assist-view/toolbarItemModel/#template) property to add custom toolbar item in the AI AssistView. +You can use the [template](https://ej2.syncfusion.com/react/documentation/api/ai-assistview/toolbarItemModel/#template) property to add custom toolbar item in the AI AssistView. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -245,7 +245,7 @@ You can use the [template](https://ej2.syncfusion.com/react/documentation/api/ai ### Item clicked -The [itemClicked](https://ej2.syncfusion.com/react/documentation/api/ai-assist-view/toolbarSettings/#itemclicked) event is triggered when the header toolbar item is clicked. +The [itemClicked](https://ej2.syncfusion.com/react/documentation/api/ai-assistview/toolbarSettings/#itemclicked) event is triggered when the header toolbar item is clicked. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -279,11 +279,11 @@ In the following example, AI AssistView component rendered with built-in toolbar #### Setting width -You can use the [width](https://ej2.syncfusion.com/react/documentation/api/ai-assist-view/promptToolbarSettings/#width) property to set the width of the prompt toolbar in the AI AssistView. +You can use the [width](https://ej2.syncfusion.com/react/documentation/api/ai-assistview/promptToolbarSettings/#width) property to set the width of the prompt toolbar in the AI AssistView. #### Item clicked -The [itemClicked](https://ej2.syncfusion.com/react/documentation/api/ai-assist-view/promptToolbarSettings/#itemclicked) event is triggered when the prompt toolbar item is clicked. +The [itemClicked](https://ej2.syncfusion.com/react/documentation/api/ai-assistview/promptToolbarSettings/#itemclicked) event is triggered when the prompt toolbar item is clicked. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -315,11 +315,11 @@ In the following example, AI AssistView renders with built-in toolbar items. #### Setting width -You can use the [width](https://ej2.syncfusion.com/react/documentation/api/ai-assist-view/responseToolbarSettings/#width) property to set the width of the response toolbar in the AI AssistView. +You can use the [width](https://ej2.syncfusion.com/react/documentation/api/ai-assistview/responseToolbarSettings/#width) property to set the width of the response toolbar in the AI AssistView. #### Item clicked -The [itemClicked](https://ej2.syncfusion.com/react/documentation/api/ai-assist-view/responseToolbarSettings/#itemclicked) event is triggered when the response toolbar item is clicked. +The [itemClicked](https://ej2.syncfusion.com/react/documentation/api/ai-assistview/responseToolbarSettings/#itemclicked) event is triggered when the response toolbar item is clicked. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -334,13 +334,13 @@ The [itemClicked](https://ej2.syncfusion.com/react/documentation/api/ai-assist-v ## Adding custom toolbar items -You can also add custom toolbar items in the AI AssistView by using the [toolbarSettings](https://ej2.syncfusion.com/react/documentation/api/ai-assist-view#toolbarsettings), [responseToolbarSettings](https://ej2.syncfusion.com/react/documentation/api/ai-assist-view#responsetoolbarsettings) & [promptToolbarSettings](https://ej2.syncfusion.com/react/documentation/api/ai-assist-view#prompttoolbarsettings) properties. +You can also add custom toolbar items in the AI AssistView by using the [toolbarSettings](https://ej2.syncfusion.com/react/documentation/api/ai-assistview#toolbarsettings), [responseToolbarSettings](https://ej2.syncfusion.com/react/documentation/api/ai-assistview#responsetoolbarsettings) & [promptToolbarSettings](https://ej2.syncfusion.com/react/documentation/api/ai-assistview#prompttoolbarsettings) properties. ### Prompt -You can use the [promptToolbarSettings](https://ej2.syncfusion.com/react/documentation/api/ai-assist-view#prompttoolbarsettings) property to add custom items for the prompt toolbar in the AI AssistView. +You can use the [promptToolbarSettings](https://ej2.syncfusion.com/react/documentation/api/ai-assistview#prompttoolbarsettings) property to add custom items for the prompt toolbar in the AI AssistView. -> To know more about the items, please refer to the [Items](https://ej2.syncfusion.com/react/documentation/api/ai-assist-view/promptToolbarSettings/#items) section. +> To know more about the items, please refer to the [Items](https://ej2.syncfusion.com/react/documentation/api/ai-assistview/promptToolbarSettings/#items) section. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -355,9 +355,9 @@ You can use the [promptToolbarSettings](https://ej2.syncfusion.com/react/documen ### Response -You can use the [responseToolbarSettings](https://ej2.syncfusion.com/react/documentation/api/ai-assist-view#responsetoolbarsettings) property to add custom response toolbar in the AI AssistView. +You can use the [responseToolbarSettings](https://ej2.syncfusion.com/react/documentation/api/ai-assistview#responsetoolbarsettings) property to add custom response toolbar in the AI AssistView. -> To know more about the items, please refer to the [Items](https://ej2.syncfusion.com/react/documentation/api/ai-assist-view/responseToolbarSettings/#items) section. +> To know more about the items, please refer to the [Items](https://ej2.syncfusion.com/react/documentation/api/ai-assistview/responseToolbarSettings/#items) section. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -372,4 +372,4 @@ You can use the [responseToolbarSettings](https://ej2.syncfusion.com/react/docum #### Item clicked -The [itemClicked](https://ej2.syncfusion.com/react/documentation/api/ai-assist-view/promptToolbarSettings/#itemclicked) event is triggered when a custom toolbar item is clicked. This event applies to both prompt and response toolbar items. +The [itemClicked](https://ej2.syncfusion.com/react/documentation/api/ai-assistview/promptToolbarSettings/#itemclicked) event is triggered when a custom toolbar item is clicked. This event applies to both prompt and response toolbar items. diff --git a/ej2-react/appearance/css-variables.md b/ej2-react/appearance/css-variables.md index 818c6c227..dc7f4edf3 100644 --- a/ej2-react/appearance/css-variables.md +++ b/ej2-react/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 React 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 ts tabtitle="tailwind3.4.css" %} +{% include code-snippet/common/css-value-cs1/tailwind3.4.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 @@ -134,11 +142,35 @@ Example for `Bootstrap 5.3` customization using CSS class.  +Example for `Tailwind 3.4` customization using CSS class. + +{% tabs %} +{% highlight js tabtitle="index.jsx" %} +{% include code-snippet/common/tailwind3.4-cs2/app/index.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="index.tsx" %} +{% include code-snippet/common/tailwind3.4-cs2/app/index.tsx %} +{% endhighlight %} +{% highlight ts tabtitle="index.css" %} +{% include code-snippet/common/tailwind3.4-cs2/index.css %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "page.domainurl/code-snippet/common/tailwind3.4-cs2" %} + +**Default Tailwind 3.4 primary value** + + + +**Customized Tailwind 3.4 primary value** + + + With this CSS variable support, you can effortlessly customize the color variable values for Syncfusion React 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 js tabtitle="index.jsx" %} @@ -181,9 +213,24 @@ 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 Fluent 2 theme, there are distinct class variables for light and dark modes, as shown in the preview below. + +{% tabs %} +{% highlight js tabtitle="index.jsx" %} +{% include code-snippet/common/tailwind3.4-cs1/app/index.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="index.tsx" %} +{% include code-snippet/common/tailwind3.4-cs1/app/index.tsx %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "page.domainurl/code-snippet/common/tailwind3.4-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 @@ -197,6 +244,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 and Fluent 2 themes, offering a comprehensive solution for customization requirements. This enhancement enables users to effortlessly customize and personalize their themes. diff --git a/ej2-react/appearance/icons.md b/ej2-react/appearance/icons.md index 41173652e..de982339c 100644 --- a/ej2-react/appearance/icons.md +++ b/ej2-react/appearance/icons.md @@ -210,6 +210,10 @@ The complete package of Essential JS 2 icons is listed below. The corresponding +### Tailwind 3.4 + + + ### Fluent 2 diff --git a/ej2-react/appearance/images/tailwind3-customize.png b/ej2-react/appearance/images/tailwind3-customize.png new file mode 100644 index 000000000..837249c88 Binary files /dev/null and b/ej2-react/appearance/images/tailwind3-customize.png differ diff --git a/ej2-react/appearance/images/tailwind3-dark.png b/ej2-react/appearance/images/tailwind3-dark.png new file mode 100644 index 000000000..14160b09a Binary files /dev/null and b/ej2-react/appearance/images/tailwind3-dark.png differ diff --git a/ej2-react/appearance/images/tailwind3-default.png b/ej2-react/appearance/images/tailwind3-default.png new file mode 100644 index 000000000..9c0ad784a Binary files /dev/null and b/ej2-react/appearance/images/tailwind3-default.png differ diff --git a/ej2-react/appearance/theme.md b/ej2-react/appearance/theme.md index 277556be4..597eb34f1 100644 --- a/ej2-react/appearance/theme.md +++ b/ej2-react/appearance/theme.md @@ -14,6 +14,8 @@ The Syncfusion React UI can allow you to apply styles for the components. The fo |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 | @@ -191,6 +193,8 @@ To refer to optimized CSS files, use the following syntax: | Theme Name | CDN Reference | |--- | --- | +| Tailwind 3.4 | [https://cdn.syncfusion.com/ej2/28.1.33/tailwind3.css](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](https://cdn.syncfusion.com/ej2/28.1.33/tailwind3-dark.css) | | Bootstrap 5.3 | [https://cdn.syncfusion.com/ej2/27.1.48/bootstrap5.3.css](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](https://cdn.syncfusion.com/ej2/27.1.48/bootstrap5.3-dark.css) | | Fluent 2 | [https://cdn.syncfusion.com/ej2/27.1.48/fluent2.css](https://cdn.syncfusion.com/ej2/27.1.48/fluent2.css) | @@ -218,6 +222,215 @@ The following list of common variables are used in the Syncfusion JavaScript lib +### Syncfusion Tailwind 3.4 theme + + + + +
+ ### Syncfusion Bootstrap 5.3 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 + +diff --git a/ej2-react/auto-complete/resize.md b/ej2-react/auto-complete/resize.md new file mode 100644 index 000000000..88a0fe015 --- /dev/null +++ b/ej2-react/auto-complete/resize.md @@ -0,0 +1,41 @@ +--- +layout: post +title: Resizing in React AutoComplete component | Syncfusion +description: Learn here all about Popup Resizing in Syncfusion React AutoComplete component of Syncfusion Essential JS 2 and more. +control: Resizing +platform: ej2-react +documentation: ug +domainurl: ##DomainURL## +--- + +# Resizing in React AutoComplete component + +You can dynamically adjust the size of the popup in the Autocomplete component by using the [AllowResize](https://ej2.syncfusion.com/react/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. + + +`[Class-component]` + +{% tabs %} +{% highlight js tabtitle="index.jsx" %} +{% include code-snippet/autocomplete/basic-cs30/app/index.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="index.tsx" %} +{% include code-snippet/autocomplete/basic-cs30/app/index.tsx %} +{% endhighlight %} +{% endtabs %} + + +`[Functional-component]` + +{% tabs %} +{% highlight js tabtitle="index.jsx" %} +{% include code-snippet/autocomplete/basic-cs31/app/index.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="index.tsx" %} +{% include code-snippet/autocomplete/basic-cs31/app/index.tsx %} +{% endhighlight %} +{% endtabs %} + + + + diff --git a/ej2-react/avatar/getting-started.md b/ej2-react/avatar/getting-started.md index d2fd92e36..c6f862235 100644 --- a/ej2-react/avatar/getting-started.md +++ b/ej2-react/avatar/getting-started.md @@ -8,13 +8,13 @@ documentation: ug domainurl: ##DomainURL## --- -# Getting Started +# Getting Started with React Avatar component This section explains how to create a simple **Avatar** using Styles in the React Framework ## Dependencies -The Avatar Component is pure CSS component so no specific dependencies to render the avatar. +The Avatar Component is a pure CSS component so no specific dependencies to render the avatar. ## Installation and configuration @@ -91,10 +91,16 @@ Output will be as follows: {% highlight ts tabtitle="index.tsx" %} {% include code-snippet/avatar/getting-started-cs1/app/index.tsx %} {% endhighlight %} +{% highlight ts tabtitle="index.css" %} +{% include code-snippet/avatar/getting-started-cs1/index.css %} +{% endhighlight %} +{% highlight ts tabtitle="index.html" %} +{% include code-snippet/avatar/getting-started-cs1/index.html %} +{% endhighlight %} {% endtabs %} {% previewsample "page.domainurl/code-snippet/avatar/getting-started-cs1" %} ## See Also -[Types of Avatar](./types) \ No newline at end of file +[Types of Avatar](./types) diff --git a/ej2-react/avatar/how-to/avatar-customization.md b/ej2-react/avatar/how-to/avatar-customization.md index 4b33640bb..ebad9f60f 100644 --- a/ej2-react/avatar/how-to/avatar-customization.md +++ b/ej2-react/avatar/how-to/avatar-customization.md @@ -10,9 +10,9 @@ domainurl: ##DomainURL## # Avatar customization in React Avatar component -## Colour customization +## Color customization -The avatar comes with default background colour (grey). This can be easily customized to the desired colour by adding custom class or directly selecting the avatar class from the CSS. +The avatar comes with default background color (Grey). This can be easily customized to the desired color by adding custom class or directly selecting the avatar class from the CSS. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -21,6 +21,12 @@ The avatar comes with default background colour (grey). This can be easily custo {% highlight ts tabtitle="index.tsx" %} {% include code-snippet/avatar/color-cs1/app/index.tsx %} {% endhighlight %} +{% highlight html tabtitle="index.html" %} +{% include code-snippet/avatar/color-cs1/index.html %} +{% endhighlight %} +{% highlight ts tabtitle="index.css" %} +{% include code-snippet/avatar/color-cs1/index.css %} +{% endhighlight %} {% endtabs %} {% previewsample "page.domainurl/code-snippet/avatar/color-cs1" %} @@ -36,6 +42,12 @@ Even though the avatar comes with five predefined sizes, sometimes it's not enou {% highlight ts tabtitle="index.tsx" %} {% include code-snippet/avatar/custom-size-cs1/app/index.tsx %} {% endhighlight %} +{% highlight html tabtitle="index.html" %} +{% include code-snippet/avatar/custom-size-cs1/index.html %} +{% endhighlight %} +{% highlight ts tabtitle="index.css" %} +{% include code-snippet/avatar/custom-size-cs1/index.css %} +{% endhighlight %} {% endtabs %} {% previewsample "page.domainurl/code-snippet/avatar/custom-size-cs1" %} @@ -51,13 +63,19 @@ Avatars can be used with a wide variety of media formats like SVG, font-icons, i {% highlight ts tabtitle="index.tsx" %} {% include code-snippet/avatar/media-formats-cs1/app/index.tsx %} {% endhighlight %} +{% highlight html tabtitle="index.html" %} +{% include code-snippet/avatar/media-formats-cs1/index.html %} +{% endhighlight %} +{% highlight ts tabtitle="index.css" %} +{% include code-snippet/avatar/media-formats-cs1/index.css %} +{% endhighlight %} {% endtabs %} {% previewsample "page.domainurl/code-snippet/avatar/media-formats-cs1" %} ## Dynamic avatar rendering from datasource -We can render avatar component dynamically from a data-source. In this sample we have rendered the avatar component +We can render the avatar component dynamically from a data-source. In this sample we have rendered the avatar component using a data-source which contains the image source in different sizes dynamically. This is applicable also for data-source from the server or remote data or AJAX. We have also rendered the avatar using `CSS` property `background-image` and using image tag. {% tabs %} @@ -67,6 +85,12 @@ using a data-source which contains the image source in different sizes dynamical {% highlight ts tabtitle="index.tsx" %} {% include code-snippet/avatar/react-avatar-cs1/app/index.tsx %} {% endhighlight %} +{% highlight html tabtitle="index.html" %} +{% include code-snippet/avatar/react-avatar-cs1/index.html %} +{% endhighlight %} +{% highlight ts tabtitle="index.css" %} +{% include code-snippet/avatar/react-avatar-cs1/index.css %} +{% endhighlight %} {% endtabs %} {% previewsample "page.domainurl/code-snippet/avatar/react-avatar-cs1" %} \ No newline at end of file diff --git a/ej2-react/avatar/how-to/integrate-avatar-into-badge.md b/ej2-react/avatar/how-to/integrate-avatar-into-badge.md index 05c1823b3..6c6249540 100644 --- a/ej2-react/avatar/how-to/integrate-avatar-into-badge.md +++ b/ej2-react/avatar/how-to/integrate-avatar-into-badge.md @@ -10,7 +10,7 @@ domainurl: ##DomainURL## # Integrate avatar into badge in React Avatar component -The badge is dependent and supportive component, and it can be used with avatar to create a notification avatar. +The badge is a dependent and supportive component, and it can be used with an avatar to create a notification avatar. The default avatar (.`e-avatar`) and circle avatar (.`e-avatar-circle`) have been used with notification badges (.`e-badge-notification`) in the following sample. {% tabs %} @@ -20,6 +20,12 @@ The default avatar (.`e-avatar`) and circle avatar (.`e-avatar-circle`) have bee {% highlight ts tabtitle="index.tsx" %} {% include code-snippet/avatar/badge-cs1/app/index.tsx %} {% endhighlight %} +{% highlight html tabtitle="index.html" %} +{% include code-snippet/avatar/badge-cs1/index.html %} +{% endhighlight %} +{% highlight ts tabtitle="index.css" %} +{% include code-snippet/avatar/badge-cs1/index.css %} +{% endhighlight %} {% endtabs %} {% previewsample "page.domainurl/code-snippet/avatar/badge-cs1" %} diff --git a/ej2-react/avatar/how-to/integrate-avatar-into-listview.md b/ej2-react/avatar/how-to/integrate-avatar-into-listview.md index 4dbf411bb..dcad8d80a 100644 --- a/ej2-react/avatar/how-to/integrate-avatar-into-listview.md +++ b/ej2-react/avatar/how-to/integrate-avatar-into-listview.md @@ -10,7 +10,7 @@ domainurl: ##DomainURL## # Integrate avatar into listview in React Avatar component -Avatar is integrated into the listview to create contacts applications. The `xsmall` size avatar is used to match the size of the list item. Letters and images are also used as avatar content. +The Avatar component is integrated into the listview to create contacts applications. The `xsmall` size avatar is used to match the size of the list item. Letters and images are also used as avatar content. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -19,6 +19,12 @@ Avatar is integrated into the listview to create contacts applications. The `xsm {% highlight ts tabtitle="index.tsx" %} {% include code-snippet/avatar/listview-cs1/app/index.tsx %} {% endhighlight %} +{% highlight html tabtitle="index.html" %} +{% include code-snippet/avatar/listview-cs1/index.html %} +{% endhighlight %} +{% highlight ts tabtitle="index.css" %} +{% include code-snippet/avatar/listview-cs1/index.css %} +{% endhighlight %} {% endtabs %} {% previewsample "page.domainurl/code-snippet/avatar/listview-cs1" %} diff --git a/ej2-react/avatar/index.md b/ej2-react/avatar/index.md index 524fa76d5..1f41853fb 100644 --- a/ej2-react/avatar/index.md +++ b/ej2-react/avatar/index.md @@ -16,4 +16,4 @@ Avatars are icons or figures representing a particular person, used in popular m * **[Types](./types#avatar-types)** - Provided 2 types of Avatar. -* **[Sizes](./types#avatar-size)** - Supports different sizes to adapt the various application scenario. \ No newline at end of file +* **[Sizes](./types#avatar-size)** - Supports different sizes to adapt to various application scenarios. \ No newline at end of file diff --git a/ej2-react/avatar/types.md b/ej2-react/avatar/types.md index 0eeb44d66..5ba644417 100644 --- a/ej2-react/avatar/types.md +++ b/ej2-react/avatar/types.md @@ -19,10 +19,10 @@ The Essential JS 2 Avatar has the following predefined sizes that can be used wi | Class Name | Description | :-------------: |:-------------: | e-avatar-xlarge | Displays xlarge size avatar. -| e-avatar-large | Displays apply large size avatar. -| e-avatar | Displays apply default size avatar. -| e-avatar-small | Displays apply small size avatar. -| e-avatar-xsmall | Displays apply xsmall size avatar. +| e-avatar-large | Displays large size avatar. +| e-avatar | Displays default size avatar. +| e-avatar-small | Displays small size avatar. +| e-avatar-xsmall | Displays xsmall size avatar. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -31,6 +31,12 @@ The Essential JS 2 Avatar has the following predefined sizes that can be used wi {% highlight ts tabtitle="index.tsx" %} {% include code-snippet/avatar/size-cs1/app/index.tsx %} {% endhighlight %} +{% highlight html tabtitle="index.html" %} +{% include code-snippet/avatar/size-cs1/index.html %} +{% endhighlight %} +{% highlight ts tabtitle="index.css" %} +{% include code-snippet/avatar/size-cs1/index.css %} +{% endhighlight %} {% endtabs %} {% previewsample "page.domainurl/code-snippet/avatar/size-cs1" %} @@ -54,6 +60,12 @@ class `.e-avatar` to the target element. {% highlight ts tabtitle="index.tsx" %} {% include code-snippet/avatar/default-cs1/app/index.tsx %} {% endhighlight %} +{% highlight html tabtitle="index.html" %} +{% include code-snippet/avatar/default-cs1/index.html %} +{% endhighlight %} +{% highlight ts tabtitle="index.css" %} +{% include code-snippet/avatar/default-cs1/index.css %} +{% endhighlight %} {% endtabs %} {% previewsample "page.domainurl/code-snippet/avatar/default-cs1" %} @@ -69,6 +81,12 @@ The circle avatar style can be applied by adding the modifier class `.e-avatar-c {% highlight ts tabtitle="index.tsx" %} {% include code-snippet/avatar/circle-cs1/app/index.tsx %} {% endhighlight %} +{% highlight html tabtitle="index.html" %} +{% include code-snippet/avatar/circle-cs1/index.html %} +{% endhighlight %} +{% highlight ts tabtitle="index.css" %} +{% include code-snippet/avatar/circle-cs1/index.css %} +{% endhighlight %} {% endtabs %} {% previewsample "page.domainurl/code-snippet/avatar/circle-cs1" %} diff --git a/ej2-react/badge/getting-started.md b/ej2-react/badge/getting-started.md index 3a433eab4..c1bff0373 100644 --- a/ej2-react/badge/getting-started.md +++ b/ej2-react/badge/getting-started.md @@ -8,7 +8,7 @@ documentation: ug domainurl: ##DomainURL## --- -# Getting Started +# Getting started with React Badge component The following section explains how to create a simple Badge component using styles and Badge’s basic usage. @@ -106,6 +106,9 @@ Output will be as follows: {% highlight html tabtitle="index.html" %} {% include code-snippet/badge/getting-started-cs1/index.html %} {% endhighlight %} +{% highlight html tabtitle="index.css" %} +{% include code-snippet/badge/getting-started-cs1/index.css %} +{% endhighlight %} {% endtabs %} {% previewsample "page.domainurl/code-snippet/badge/getting-started-cs1" %} diff --git a/ej2-react/badge/how-to/badge-customization.md b/ej2-react/badge/how-to/badge-customization.md index b3ef86506..0fd01a1ca 100644 --- a/ej2-react/badge/how-to/badge-customization.md +++ b/ej2-react/badge/how-to/badge-customization.md @@ -10,9 +10,9 @@ domainurl: ##DomainURL## # Badge customization in React Badge component -## Colour customization +## Color customization -Even though badges come with `8 predefined colors`, you can also customize the colour of the badge as desired. +Even though badges come with `8 pre-defined colors`, you can also customize the color of the badge as desired. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -24,14 +24,16 @@ Even though badges come with `8 predefined colors`, you can also customize the c {% highlight html tabtitle="index.html" %} {% include code-snippet/badge/color-cs1/index.html %} {% endhighlight %} +{% highlight html tabtitle="index.css" %} +{% include code-snippet/badge/color-cs1/index.css %} +{% endhighlight %} {% endtabs %} {% previewsample "page.domainurl/code-snippet/badge/color-cs1" %} ## Customize badge size -Badges are designed to change its size based on the content. To change the size of a badge, adjust the -`font size` of the badge. +Badges are designed to adjust their size based on the content. To change the size of a badge, adjust the `font-size` of the badge. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -43,13 +45,16 @@ Badges are designed to change its size based on the content. To change the size {% highlight html tabtitle="index.html" %} {% include code-snippet/badge/size-cs1/index.html %} {% endhighlight %} +{% highlight html tabtitle="index.css" %} +{% include code-snippet/badge/size-cs1/index.css %} +{% endhighlight %} {% endtabs %} {% previewsample "page.domainurl/code-snippet/badge/size-cs1" %} ## Custom position -Even though the badges support the conventional `top` and `bottom` positions, the position of the badges can be changed as desired.This can be done by adding a custom class to the badge element to override the default position applied from the source. +Even though the badges support the conventional `top` and `bottom` positions, the position of the badges can be changed as desired.This can be achieved by adding a custom class to the badge element to override the default position applied from the source. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -61,6 +66,9 @@ Even though the badges support the conventional `top` and `bottom` positions, th {% highlight html tabtitle="index.html" %} {% include code-snippet/badge/custom-position-cs1/index.html %} {% endhighlight %} +{% highlight html tabtitle="index.css" %} +{% include code-snippet/badge/custom-position-cs1/index.css %} +{% endhighlight %} {% endtabs %} {% previewsample "page.domainurl/code-snippet/badge/custom-position-cs1" %} diff --git a/ej2-react/badge/how-to/dynamic-badge-content.md b/ej2-react/badge/how-to/dynamic-badge-content.md index 6026e9bf0..ca476a9ad 100644 --- a/ej2-react/badge/how-to/dynamic-badge-content.md +++ b/ej2-react/badge/how-to/dynamic-badge-content.md @@ -10,8 +10,7 @@ domainurl: ##DomainURL## # Dynamic badge content in React Badge component -Badges in real-time needs to be updated dynamically based on the requirements. In this sample, using React `states` -the badges content will be updated dynamically. Click the increment button to change the badge value. +In real-time applications, badges often need to be updated dynamically based on requirements. In this sample, the badge content is updated dynamically using React `states`. Click the increment button to increase the badge value. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -23,6 +22,9 @@ the badges content will be updated dynamically. Click the increment button to ch {% highlight html tabtitle="index.html" %} {% include code-snippet/badge/dynamic-badge-cs1/index.html %} {% endhighlight %} +{% highlight html tabtitle="index.css" %} +{% include code-snippet/badge/dynamic-badge-cs1/index.css %} +{% endhighlight %} {% endtabs %} {% previewsample "page.domainurl/code-snippet/badge/dynamic-badge-cs1" %} diff --git a/ej2-react/badge/how-to/integrate-badge-into-listview.md b/ej2-react/badge/how-to/integrate-badge-into-listview.md index 4ab66562f..541454d4f 100644 --- a/ej2-react/badge/how-to/integrate-badge-into-listview.md +++ b/ej2-react/badge/how-to/integrate-badge-into-listview.md @@ -10,9 +10,9 @@ domainurl: ##DomainURL## # Integrate badge into listview in React Badge component -The badges can be integrated with the `listview` component to indicate new notification with colour based on priority. +The badges can be integrated with the `listview` component to indicate new notification with color based on priority. -In the following sample, `default` badges are used and there is no need to customize the badge size. The +In the following sample, `default` badges are used, and there is no need to customize the badge size. The badge component will automatically adjust the size based on the container element. {% tabs %} @@ -25,6 +25,9 @@ component will automatically adjust the size based on the container element. {% highlight html tabtitle="index.html" %} {% include code-snippet/badge/listview-cs1/index.html %} {% endhighlight %} +{% highlight html tabtitle="index.css" %} +{% include code-snippet/badge/listview-cs1/index.css %} +{% endhighlight %} {% endtabs %} {% previewsample "page.domainurl/code-snippet/badge/listview-cs1" %} diff --git a/ej2-react/badge/types.md b/ej2-react/badge/types.md index 600b84e7f..7f618f94a 100644 --- a/ej2-react/badge/types.md +++ b/ej2-react/badge/types.md @@ -14,7 +14,7 @@ This section explains different styles and types of the badges. ## Badge styles -The Essential JS 2 Badge has the following predefined styles that can be used with `.e-badge` class to change the appearance of a badge. +The Essential JS 2 Badge component offers the following predefined styles that can be used with the `.e-badge` class to change the appearance of a badge. | Class Name | Description | :------------- |:------------- @@ -37,13 +37,16 @@ The Essential JS 2 Badge has the following predefined styles that can be used wi {% highlight html tabtitle="index.html" %} {% include code-snippet/badge/types-cs1/index.html %} {% endhighlight %} +{% highlight html tabtitle="index.css" %} +{% include code-snippet/badge/types-cs1/index.css %} +{% endhighlight %} {% endtabs %} {% previewsample "page.domainurl/code-snippet/badge/types-cs1" %} ## Badge types -The types of Essential JS 2 badges are as follows: +The types of Essential JS 2 Badge component are as follows: * Circle * Pill @@ -67,6 +70,9 @@ The circle badge style can be applied by adding the modifier class `.e-badge-cir {% highlight html tabtitle="index.html" %} {% include code-snippet/badge/circle-cs1/index.html %} {% endhighlight %} +{% highlight html tabtitle="index.css" %} +{% include code-snippet/badge/circle-cs1/index.css %} +{% endhighlight %} {% endtabs %} {% previewsample "page.domainurl/code-snippet/badge/circle-cs1" %} @@ -85,13 +91,16 @@ The pill badge style can be applied by adding the modifier class `.e-badge-pill` {% highlight html tabtitle="index.html" %} {% include code-snippet/badge/pill-cs1/index.html %} {% endhighlight %} +{% highlight html tabtitle="index.css" %} +{% include code-snippet/badge/pill-cs1/index.css %} +{% endhighlight %} {% endtabs %} {% previewsample "page.domainurl/code-snippet/badge/pill-cs1" %} ### Link -When badge modifier classes are applied to the anchor tag, the badge’s appearance will change from normal state to hover state on mouseover. +When badge modifier classes are applied to an anchor tag, the badge's appearance will change from its normal state to a hover state on mouseover. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -103,6 +112,9 @@ When badge modifier classes are applied to the anchor tag, the badge’s appeara {% highlight html tabtitle="index.html" %} {% include code-snippet/badge/link-cs1/index.html %} {% endhighlight %} +{% highlight html tabtitle="index.css" %} +{% include code-snippet/badge/link-cs1/index.css %} +{% endhighlight %} {% endtabs %} {% previewsample "page.domainurl/code-snippet/badge/link-cs1" %} @@ -121,6 +133,9 @@ The notification badge style can be applied by adding the modifier class `.e-bad {% highlight html tabtitle="index.html" %} {% include code-snippet/badge/notification-cs1/index.html %} {% endhighlight %} +{% highlight html tabtitle="index.css" %} +{% include code-snippet/badge/notification-cs1/index.css %} +{% endhighlight %} {% endtabs %} {% previewsample "page.domainurl/code-snippet/badge/notification-cs1" %} @@ -139,6 +154,9 @@ Dot can be applied by adding the modifier class `.e-badge-dot` to the target ele {% highlight html tabtitle="index.html" %} {% include code-snippet/badge/dot-cs1/index.html %} {% endhighlight %} +{% highlight html tabtitle="index.css" %} +{% include code-snippet/badge/dot-cs1/index.css %} +{% endhighlight %} {% endtabs %} {% previewsample "page.domainurl/code-snippet/badge/dot-cs1" %} @@ -157,6 +175,9 @@ The overlap badge can be used with `notification` or `dot` badge, which overlaps {% highlight html tabtitle="index.html" %} {% include code-snippet/badge/overlap-cs1/index.html %} {% endhighlight %} +{% highlight html tabtitle="index.css" %} +{% include code-snippet/badge/overlap-cs1/index.css %} +{% endhighlight %} {% endtabs %} {% previewsample "page.domainurl/code-snippet/badge/overlap-cs1" %} @@ -175,6 +196,9 @@ The default position of the `notification` or `dot` badge is top. But, the posit {% highlight html tabtitle="index.html" %} {% include code-snippet/badge/position-cs1/index.html %} {% endhighlight %} +{% highlight html tabtitle="index.css" %} +{% include code-snippet/badge/position-cs1/index.css %} +{% endhighlight %} {% endtabs %} {% previewsample "page.domainurl/code-snippet/badge/position-cs1" %} diff --git a/ej2-react/carousel/accessibility.md b/ej2-react/carousel/accessibility.md index 836270bc0..d4696a79f 100644 --- a/ej2-react/carousel/accessibility.md +++ b/ej2-react/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/react/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-react/carousel/styles-and-appearance.md b/ej2-react/carousel/styles-and-appearance.md index f10dd9b44..df85fb4be 100644 --- a/ej2-react/carousel/styles-and-appearance.md +++ b/ej2-react/carousel/styles-and-appearance.md @@ -12,7 +12,7 @@ domainurl: ##DomainURL## To modify the Carousel appearance, you need to override the default CSS of Carousel component. Please find the list of CSS classes and its corresponding section in Carousel component. Also, you have an option to create your own custom theme for the controls using our [`Theme Studio`](https://ej2.syncfusion.com/themestudio/?theme=material). -# CSS Structure in React Carousel Control +## CSS Structure in React Carousel Control The following content provides the exact CSS structure that can be used to modify the control’s appearance based on user preference. diff --git a/ej2-react/chart/accessibility.md b/ej2-react/chart/accessibility.md index 312d8a5cf..914f9ffb7 100644 --- a/ej2-react/chart/accessibility.md +++ b/ej2-react/chart/accessibility.md @@ -85,5 +85,4 @@ The accessibility compliance of the Chart component is shown in the following sa ## See also -* [Accessibility in Syncfusion React components](../common/accessibility) - +* [Accessibility in Syncfusion React components](../common/accessibility) \ No newline at end of file diff --git a/ej2-react/chart/advanced-accessibility-configuration.md b/ej2-react/chart/advanced-accessibility-configuration.md new file mode 100644 index 000000000..a8a363b13 --- /dev/null +++ b/ej2-react/chart/advanced-accessibility-configuration.md @@ -0,0 +1,211 @@ +--- +layout: post +title: Accessibility customization in React Chart component | Syncfusion +description: Learn here all about Accessibility customization in Syncfusion React Chart component of Syncfusion Essential JS 2 and more. +control: Accessibility customization +platform: ej2-react +documentation: ug +domainurl: ##DomainURL## +--- + +# Accessibility customization in React Chart component + +The Syncfusion® React Chart control 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 React Chart control's accessibility customization are briefly explained in this section. + +The chart control has a number of characteristics that enable accessibility features to be customized, including: + +* [`accessibilityDescription`](https://ej2.syncfusion.com/react/documentation/api/chart/accessibilityModel/#accessibilitydescription) - Provides a text description for the chart, improving support for screen readers. +* [`accessibilityRole`](https://ej2.syncfusion.com/react/documentation/api/chart/accessibilityModel/#accessibilityrole) - Specifies the role of the chart, helping screen readers to identify the element appropriately. +* [`focusable`](https://ej2.syncfusion.com/react/documentation/api/chart/accessibilityModel/#focusable) - Allows the chart to receive focus, making it accessible via keyboard navigation. +* [`focusBorderColor`](https://ej2.syncfusion.com/react/documentation/api/chart#focusbordercolor) - Sets the color of the focus border, enhancing visibility when the chart is focused. +* [`focusBorderMargin`](https://ej2.syncfusion.com/react/documentation/api/chart#focusbordermargin) - Defines the margin around the focus border. +* [`focusBorderWidth`](https://ej2.syncfusion.com/react/documentation/api/chart#focusborderwidth) - Specifies the width of the focus border. +* [`tabIndex`](https://ej2.syncfusion.com/react/documentation/api/chart/accessibilityModel/#tabindex) - Specifies the tab order of the chart element, enabling efficient keyboard navigation. + +{% tabs %} +{% highlight js tabtitle="index.jsx" %} +{% include code-snippet/chart/series/accessibility-cs1/app/index.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="index.tsx" %} +{% include code-snippet/chart/series/accessibility-cs1/app/index.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/chart/series/accessibility-cs1/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/chart/series/accessibility-cs1/app/datasource.tsx %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "page.domainurl/code-snippet/chart/series/accessibility-cs1" %} + +## Series + +The [`series`](https://ej2.syncfusion.com/react/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/react/documentation/api/chart/seriesAccessibilityModel/#accessibilitydescription) - Provides a text description for the series root element, enhancing support for screen readers. +* [`accessibilityDescriptionFormat`](https://ej2.syncfusion.com/react/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/react/documentation/api/chart/seriesAccessibilityModel/#accessibilityrole) - Specifies the role of the series, helping screen readers to identify the element appropriately. +* [`focusable`](https://ej2.syncfusion.com/react/documentation/api/chart/seriesAccessibilityModel/#focusable) - Allows the series to receive focus, making it accessible via keyboard navigation. +* [`tabIndex`](https://ej2.syncfusion.com/react/documentation/api/chart/seriesAccessibilityModel/#tabindex) - Specifies the tab order of the series element, enabling efficient keyboard navigation. + +{% tabs %} +{% highlight js tabtitle="index.jsx" %} +{% include code-snippet/chart/series/accessibility-cs2/app/index.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="index.tsx" %} +{% include code-snippet/chart/series/accessibility-cs2/app/index.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/chart/series/accessibility-cs2/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/chart/series/accessibility-cs2/app/datasource.tsx %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "page.domainurl/code-snippet/chart/series/accessibility-cs2" %} + +## Title and subtitle + +In the React chart control, the [`titleStyle`](https://ej2.syncfusion.com/react/documentation/api/chart#titlestyle) and [`subTitleStyle`](https://ej2.syncfusion.com/react/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/react/documentation/api/chart/titleSettingsModel/#accessibility) properties in [`titleStyle`](https://ej2.syncfusion.com/react/documentation/api/chart#titlestyle) and [`subTitleStyle`](https://ej2.syncfusion.com/react/documentation/api/chart#subtitlestyle) can be customized for accessibility: + +* [`accessibilityDescription`](https://ej2.syncfusion.com/react/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/react/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/react/documentation/api/chart/accessibilityModel/#focusable) - Enables or disables the keyboard navigation focus for the title and subtitle. +* [`tabIndex`](https://ej2.syncfusion.com/react/documentation/api/chart/accessibilityModel/#tabindex) - Specifies the tab order of the title and subtitle element, enabling efficient keyboard navigation. + +{% tabs %} +{% highlight js tabtitle="index.jsx" %} +{% include code-snippet/chart/series/accessibility-cs3/app/index.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="index.tsx" %} +{% include code-snippet/chart/series/accessibility-cs3/app/index.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/chart/series/accessibility-cs3/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/chart/series/accessibility-cs3/app/datasource.tsx %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "page.domainurl/code-snippet/chart/series/accessibility-cs3" %} + +## Annotations + +The [`annotations`](https://ej2.syncfusion.com/react/documentation/api/chart#annotations) property allows you to add annotations to the chart in specific regions. The following [`accessibility`](https://ej2.syncfusion.com/react/documentation/api/chart/chartAnnotationSettingsModel/#accessibility) properties in [`annotations`](https://ej2.syncfusion.com/react/documentation/api/chart#annotations) can be customized for accessibility: + +* [`accessibilityDescription`](https://ej2.syncfusion.com/react/documentation/api/chart/accessibilityModel/#accessibilitydescription) - Provides a text description for the annotation, enhancing support for screen readers. +* [`accessibilityRole`](https://ej2.syncfusion.com/react/documentation/api/chart/accessibilityModel/#accessibilityrole) - Specifies the role of the annotation, helping screen readers to identify the element appropriately. +* [`focusable`](https://ej2.syncfusion.com/react/documentation/api/chart/accessibilityModel/#focusable) - Specifies whether annotations are focusable via keyboard navigation. +* [`tabIndex`](https://ej2.syncfusion.com/react/documentation/api/chart/accessibilityModel/#tabindex) - Specifies the tab order of the annotation element, enabling efficient keyboard navigation. + +{% tabs %} +{% highlight js tabtitle="index.jsx" %} +{% include code-snippet/chart/series/accessibility-cs4/app/index.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="index.tsx" %} +{% include code-snippet/chart/series/accessibility-cs4/app/index.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/chart/series/accessibility-cs4/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/chart/series/accessibility-cs4/app/datasource.tsx %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "page.domainurl/code-snippet/chart/series/accessibility-cs4" %} + +## Trendline + +The [`trendlines`](https://ej2.syncfusion.com/react/documentation/api/chart#trendlinemodule) property allows you to display trends in the data. The following [`accessibility`](https://ej2.syncfusion.com/react/documentation/api/chart/trendlineModel/#accessibility) properties in [`trendlines`](https://ej2.syncfusion.com/react/documentation/api/chart#trendlinemodule) can be customized for accessibility: + +* [`accessibilityDescription`](https://ej2.syncfusion.com/react/documentation/api/chart/accessibilityModel/#accessibilitydescription) - Provides a text description for the trendline, enhancing support for screen readers. +* [`accessibilityRole`](https://ej2.syncfusion.com/react/documentation/api/chart/accessibilityModel/#accessibilityrole) - Specifies the role of the trendline, helping screen readers to identify the element appropriately. +* [`focusable`](https://ej2.syncfusion.com/react/documentation/api/chart/accessibilityModel/#focusable) - Specifies whether trendlines are focusable via keyboard navigation. +* [`tabIndex`](https://ej2.syncfusion.com/react/documentation/api/chart/accessibilityModel/#tabindex) - Specifies the tab order of the trendline element, enabling efficient keyboard navigation. + +{% tabs %} +{% highlight js tabtitle="index.jsx" %} +{% include code-snippet/chart/series/accessibility-cs5/app/index.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="index.tsx" %} +{% include code-snippet/chart/series/accessibility-cs5/app/index.tsx %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "page.domainurl/code-snippet/chart/series/accessibility-cs5" %} + +## Zooming + +The [`zoomSettings`](https://ej2.syncfusion.com/react/documentation/api/chart#zoomsettings) attributes allow you to adjust the chart's zooming capability. The following [`accessibility`](https://ej2.syncfusion.com/react/documentation/api/chart/zoomSettingsModel/#accessibility) properties in [`zoomSettings`](https://ej2.syncfusion.com/react/documentation/api/chart#zoomsettings) offer the parameters for accessibility customization: + +* [`accessibilityDescription`](https://ej2.syncfusion.com/react/documentation/api/chart/accessibilityModel/#accessibilitydescription) - Provides a text description for the zoom toolkit items, enhancing support for screen readers. +* [`accessibilityRole`](https://ej2.syncfusion.com/react/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/react/documentation/api/chart/accessibilityModel/#focusable) - Specifies whether zoom toolkit items are focusable via keyboard navigation. +* [`tabIndex`](https://ej2.syncfusion.com/react/documentation/api/chart/accessibilityModel/#tabindex) - Specifies the tab order of the zooming element, enabling efficient keyboard navigation. + +{% tabs %} +{% highlight js tabtitle="index.jsx" %} +{% include code-snippet/chart/series/accessibility-cs6/app/index.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="index.tsx" %} +{% include code-snippet/chart/series/accessibility-cs6/app/index.tsx %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "page.domainurl/code-snippet/chart/series/accessibility-cs6" %} + +## Technical indicators + +The [`indicators`](https://ej2.syncfusion.com/react/documentation/api/chart#indicators) property allows you to analyze the trends and patterns in the data. The following [`accessibility`](https://ej2.syncfusion.com/react/documentation/api/chart/technicalIndicatorModel/#accessibility) properties in [`indicators`](https://ej2.syncfusion.com/react/documentation/api/chart#indicators) can be customized for accessibility: + +* [`accessibilityDescription`](https://ej2.syncfusion.com/react/documentation/api/chart/accessibilityModel/#accessibilitydescription) - Provides a text description for the indicators, enhancing support for screen readers. +* [`accessibilityRole`](https://ej2.syncfusion.com/react/documentation/api/chart/accessibilityModel/#accessibilityrole) - Specifies the role of the indicators, helping screen readers to identify the element appropriately. +* [`focusable`](https://ej2.syncfusion.com/react/documentation/api/chart/accessibilityModel/#focusable) - Specifies whether indicators are focusable via keyboard navigation. +* [`tabIndex`](https://ej2.syncfusion.com/react/documentation/api/chart/accessibilityModel/#tabindex) - Specifies the tab order of the indicators element, enabling efficient keyboard navigation. + +{% tabs %} +{% highlight js tabtitle="index.jsx" %} +{% include code-snippet/chart/series/accessibility-cs7/app/index.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="index.tsx" %} +{% include code-snippet/chart/series/accessibility-cs7/app/index.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/chart/series/accessibility-cs7/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/chart/series/accessibility-cs7/app/datasource.tsx %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "page.domainurl/code-snippet/chart/series/accessibility-cs7" %} + +## Legend + +The [`legendSettings`](https://ej2.syncfusion.com/react/documentation/api/chart#legendsettings) provide information about the series shown in the chart. The following [`accessibility`](https://ej2.syncfusion.com/react/documentation/api/chart/legendSettingsModel/#accessibility) properties in [`legendSettings`](https://ej2.syncfusion.com/react/documentation/api/chart#legendsettings) can be used to alter the accessibility of the chart's legend: + +* [`accessibilityDescription`](https://ej2.syncfusion.com/react/documentation/api/chart/accessibilityModel/#accessibilitydescription) - Provides a text description for the legend root element, enhancing support for screen readers. +* [`accessibilityRole`](https://ej2.syncfusion.com/react/documentation/api/chart/accessibilityModel/#accessibilityrole) - Specifies the role of the legend items to screen readers, providing appropriate context. +* [`focusable`](https://ej2.syncfusion.com/react/documentation/api/chart/accessibilityModel/#focusable) - Specifies whether legend items are focusable via keyboard navigation. +* [`tabIndex`](https://ej2.syncfusion.com/react/documentation/api/chart/accessibilityModel/#tabindex) - Specifies the tab order of the legend element, enabling efficient keyboard navigation. + +{% tabs %} +{% highlight js tabtitle="index.jsx" %} +{% include code-snippet/chart/series/accessibility-cs8/app/index.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="index.tsx" %} +{% include code-snippet/chart/series/accessibility-cs8/app/index.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/chart/series/accessibility-cs8/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/chart/series/accessibility-cs8/app/datasource.tsx %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "page.domainurl/code-snippet/chart/series/accessibility-cs8" %} \ No newline at end of file diff --git a/ej2-react/chart/axis-labels.md b/ej2-react/chart/axis-labels.md index 13af77376..0e3eb0d10 100644 --- a/ej2-react/chart/axis-labels.md +++ b/ej2-react/chart/axis-labels.md @@ -14,7 +14,7 @@ To get start quickly with Axis Labels in React Charts, you can check on this vid {% youtube "https://www.youtube.com/watch?v=NLrOSKAnxes" %} -## Smart Axis Labels +## Smart axis labels When the axis labels overlap with each other, you can use [`labelIntersectAction`](https://ej2.syncfusion.com/react/documentation/api/chart/axisModel/#labelintersectaction) property in the axis, to place them smartly. @@ -75,7 +75,7 @@ When setting `labelIntersectAction` as `Rotate90` {% previewsample "page.domainurl/code-snippet/chart/axis/multiple-cs9" %} -## Axis Labels Positioning +## Axis labels positioning By default, the axis labels can be placed at `outside` the axis line and this also can be placed at `inside` the axis line using the `labelPosition` property. @@ -96,7 +96,7 @@ By default, the axis labels can be placed at `outside` the axis line and this al {% previewsample "page.domainurl/code-snippet/chart/axis/multiple-cs10" %} -## Multilevel Labels +## Multilevel labels Any number of levels of labels can be added to an axis using the `multiLevelLabels` property. This property can be configured using the following properties: @@ -235,9 +235,9 @@ The chart’s data source can be sorted using the `sort` method of chart. The ar {% previewsample "page.domainurl/code-snippet/chart/axis/multiple-cs16" %} -## Edge Label Placement +## 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/react/documentation/api/chart/axisModel/#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/react/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/react/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 js tabtitle="index.jsx" %} @@ -256,7 +256,7 @@ Labels with long text at the edges of an axis may appear partially in the chart. {% previewsample "page.domainurl/code-snippet/chart/axis/multiple-cs17" %} -## Labels Customization +## Labels customization Border of the axis labels can be customized using `width`, `color` and `type` property of the axis. @@ -277,7 +277,7 @@ Border of the axis labels can be customized using `width`, `color` and `type` pr {% previewsample "page.domainurl/code-snippet/chart/axis/multiple-cs18" %} -## Customizing Specific Point +## Customizing specific point You can customize the specific text in the axis labels using `axisLabelRender` event. diff --git a/ej2-react/chart/chart-appearance.md b/ej2-react/chart/chart-appearance.md index 14b6dab47..1a2d0255c 100644 --- a/ej2-react/chart/chart-appearance.md +++ b/ej2-react/chart/chart-appearance.md @@ -168,6 +168,27 @@ Using [`background`](https://ej2.syncfusion.com/react/documentation/api/chart/ch {% previewsample "page.domainurl/code-snippet/chart/series/column-cs4" %} +**Chart area margin** + +You can customize the space between the chart area from its chart container through [`margin`](https://ej2.syncfusion.com/react/documentation/api/chart/chartAreaModel/#margin) property. + +{% tabs %} +{% highlight js tabtitle="index.jsx" %} +{% include code-snippet/chart/series/column-cs19/app/index.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="index.tsx" %} +{% include code-snippet/chart/series/column-cs19/app/index.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/chart/series/column-cs19/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/chart/series/column-cs19/app/datasource.tsx %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "page.domainurl/code-snippet/chart/series/column-cs19" %} + ## Animation You can customize animation for a particular series using [`animation`](https://ej2.syncfusion.com/react/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. @@ -313,7 +334,7 @@ The `textStyle` property of chart title provides options to customize the `size` {% previewsample "page.domainurl/code-snippet/chart/series/column-cs7" %} -## Chart subTitle +## Chart subtitle Chart can be given a subtitle using [`subTitle`](https://ej2.syncfusion.com/react/documentation/api/chart/chartModel/#subtitle) property, to show the information about the data plotted. diff --git a/ej2-react/chart/chart-types/area.md b/ej2-react/chart/chart-types/area.md index 7afdd1b88..dd0f1fac3 100644 --- a/ej2-react/chart/chart-types/area.md +++ b/ej2-react/chart/chart-types/area.md @@ -123,33 +123,9 @@ The [opacity](https://ej2.syncfusion.com/react/documentation/api/chart/seriesMod {% previewsample "page.domainurl/code-snippet/chart/series/line-cs45" %} -**Dash array** - -The [dashArray](https://ej2.syncfusion.com/react/documentation/api/chart/seriesModel/#dasharray) property determines the pattern of dashes and gaps in the series. - -{% tabs %} -{% highlight js tabtitle="index.jsx" %} -{% include code-snippet/chart/series/line-cs46/app/index.jsx %} -{% endhighlight %} -{% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/chart/series/line-cs46/app/index.tsx %} -{% endhighlight %} -{% highlight js tabtitle="datasource.jsx" %} -{% include code-snippet/chart/series/line-cs46/app/datasource.jsx %} -{% endhighlight %} -{% highlight ts tabtitle="datasource.tsx" %} -{% include code-snippet/chart/series/line-cs46/app/datasource.tsx %} -{% endhighlight %} -{% endtabs %} - -{% previewsample "page.domainurl/code-snippet/chart/series/line-cs46" %} - ## Area border -The following properties in the [bordermodel](https://ej2.syncfusion.com/react/documentation/api/chart/borderModel/) can be used to customize the border of the Area Chart. - -* [width](https://ej2.syncfusion.com/react/documentation/api/chart/borderModel/#width) - Specifies the width for the border of the Area Chart. -* [color](https://ej2.syncfusion.com/react/documentation/api/chart/borderModel/#color) - Specifies the Color for the border of the Area Chart. +Use the [`border`](https://ej2.syncfusion.com/react/documentation/api/chart/seriesModel/#border) property to customize the width, color and dasharray of the series border. {% tabs %} {% highlight js tabtitle="index.jsx" %} diff --git a/ej2-react/chart/chart-types/bar.md b/ej2-react/chart/chart-types/bar.md index 4c1887d67..5c060a18c 100644 --- a/ej2-react/chart/chart-types/bar.md +++ b/ej2-react/chart/chart-types/bar.md @@ -121,30 +121,9 @@ The [opacity](https://ej2.syncfusion.com/react/documentation/api/chart/seriesMod {% previewsample "page.domainurl/code-snippet/chart/series/line-cs53" %} -**Dash array** - -The [dashArray](https://ej2.syncfusion.com/react/documentation/api/chart/seriesModel/#dasharray) property determines the pattern of dashes and gaps in the series. - -{% tabs %} -{% highlight js tabtitle="index.jsx" %} -{% include code-snippet/chart/series/line-cs54/app/index.jsx %} -{% endhighlight %} -{% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/chart/series/line-cs54/app/index.tsx %} -{% endhighlight %} -{% highlight js tabtitle="datasource.jsx" %} -{% include code-snippet/chart/series/line-cs54/app/datasource.jsx %} -{% endhighlight %} -{% highlight ts tabtitle="datasource.tsx" %} -{% include code-snippet/chart/series/line-cs54/app/datasource.tsx %} -{% endhighlight %} -{% endtabs %} - -{% previewsample "page.domainurl/code-snippet/chart/series/line-cs54" %} - **Border** -Use the [border](https://ej2.syncfusion.com/react/documentation/api/chart/seriesModel/#border) property to customize the width and color of the series border. +Use the [border](https://ej2.syncfusion.com/react/documentation/api/chart/seriesModel/#border) property to customize the width, color and dasharray of the series border. {% tabs %} {% highlight js tabtitle="index.jsx" %} diff --git a/ej2-react/chart/chart-types/box-whisker.md b/ej2-react/chart/chart-types/box-whisker.md index 254c2f122..990a8a324 100644 --- a/ej2-react/chart/chart-types/box-whisker.md +++ b/ej2-react/chart/chart-types/box-whisker.md @@ -61,6 +61,8 @@ You can bind data to the chart using the [`dataSource`](https://ej2.syncfusion.c The following properties can be used to customize the `box and whisker` series. +*Fill** + The [fill](https://ej2.syncfusion.com/react/documentation/api/chart/seriesModel/#fill) property determines the color applied to the series. {% tabs %} @@ -120,30 +122,9 @@ The [opacity](https://ej2.syncfusion.com/react/documentation/api/chart/seriesMod {% previewsample "page.domainurl/code-snippet/chart/series/box-cs6" %} -**Dash array** - -The [dashArray](https://ej2.syncfusion.com/react/documentation/api/chart/seriesModel/#dasharray) property determines the pattern of dashes and gaps in the series. - -{% tabs %} -{% highlight js tabtitle="index.jsx" %} -{% include code-snippet/chart/series/box-cs7/app/index.jsx %} -{% endhighlight %} -{% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/chart/series/box-cs7/app/index.tsx %} -{% endhighlight %} -{% highlight js tabtitle="datasource.jsx" %} -{% include code-snippet/chart/series/box-cs7/app/datasource.jsx %} -{% endhighlight %} -{% highlight ts tabtitle="datasource.tsx" %} -{% include code-snippet/chart/series/box-cs7/app/datasource.tsx %} -{% endhighlight %} -{% endtabs %} - -{% previewsample "page.domainurl/code-snippet/chart/series/box-cs7" %} - **Border** -Use the [border](https://ej2.syncfusion.com/react/documentation/api/chart/seriesModel/#border) property to customize the width and color of the series border. +Use the [border](https://ej2.syncfusion.com/react/documentation/api/chart/seriesModel/#border) property to customize the width, color and dasharray of the series border. {% tabs %} {% highlight js tabtitle="index.jsx" %} diff --git a/ej2-react/chart/chart-types/column.md b/ej2-react/chart/chart-types/column.md index f76587b78..49664ff8b 100644 --- a/ej2-react/chart/chart-types/column.md +++ b/ej2-react/chart/chart-types/column.md @@ -121,30 +121,9 @@ The [opacity](https://ej2.syncfusion.com/react/documentation/api/chart/seriesMod {% previewsample "page.domainurl/code-snippet/chart/series/line-cs64" %} -**Dash array** - -The [dashArray](https://ej2.syncfusion.com/react/documentation/api/chart/seriesModel/#dasharray) property determines the pattern of dashes and gaps in the series. - -{% tabs %} -{% highlight js tabtitle="index.jsx" %} -{% include code-snippet/chart/series/line-cs65/app/index.jsx %} -{% endhighlight %} -{% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/chart/series/line-cs65/app/index.tsx %} -{% endhighlight %} -{% highlight js tabtitle="datasource.jsx" %} -{% include code-snippet/chart/series/line-cs65/app/datasource.jsx %} -{% endhighlight %} -{% highlight ts tabtitle="datasource.tsx" %} -{% include code-snippet/chart/series/line-cs65/app/datasource.tsx %} -{% endhighlight %} -{% endtabs %} - -{% previewsample "page.domainurl/code-snippet/chart/series/line-cs65" %} - **Border** -Use the [border](https://ej2.syncfusion.com/react/documentation/api/chart/seriesModel/#border) property to customize the width and color of the series border. +Use the [border](https://ej2.syncfusion.com/react/documentation/api/chart/seriesModel/#border) property to customize the width, color and dasharray of the series border. {% tabs %} {% highlight js tabtitle="index.jsx" %} diff --git a/ej2-react/chart/chart-types/range-area.md b/ej2-react/chart/chart-types/range-area.md index 7e5f1323c..01eca246c 100644 --- a/ej2-react/chart/chart-types/range-area.md +++ b/ej2-react/chart/chart-types/range-area.md @@ -122,9 +122,9 @@ The [opacity](https://ej2.syncfusion.com/react/documentation/api/chart/seriesMod {% previewsample "page.domainurl/code-snippet/chart/series/rangearea-cs4" %} -**Dash array** +**Border** -The [dashArray](https://ej2.syncfusion.com/react/documentation/api/chart/seriesModel/#dasharray) property determines the pattern of dashes and gaps in the series. +Use the [border](https://ej2.syncfusion.com/react/documentation/api/chart/seriesModel/#border) property to customize the width, color and dasharray of the series border. {% tabs %} {% highlight js tabtitle="index.jsx" %} diff --git a/ej2-react/chart/chart-types/range-column.md b/ej2-react/chart/chart-types/range-column.md index f51b87be5..acaae9439 100644 --- a/ej2-react/chart/chart-types/range-column.md +++ b/ej2-react/chart/chart-types/range-column.md @@ -123,30 +123,9 @@ The [opacity](https://ej2.syncfusion.com/react/documentation/api/chart/seriesMod {% previewsample "page.domainurl/code-snippet/chart/series/rangecolumn-cs3" %} -**Dash array** - -The [dashArray](https://ej2.syncfusion.com/react/documentation/api/chart/seriesModel/#dasharray) property determines the pattern of dashes and gaps in the series. - -{% tabs %} -{% highlight js tabtitle="index.jsx" %} -{% include code-snippet/chart/series/rangecolumn-cs4/app/index.jsx %} -{% endhighlight %} -{% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/chart/series/rangecolumn-cs4/app/index.tsx %} -{% endhighlight %} -{% highlight js tabtitle="datasource.jsx" %} -{% include code-snippet/chart/series/rangecolumn-cs4/app/datasource.jsx %} -{% endhighlight %} -{% highlight ts tabtitle="datasource.tsx" %} -{% include code-snippet/chart/series/rangecolumn-cs4/app/datasource.tsx %} -{% endhighlight %} -{% endtabs %} - -{% previewsample "page.domainurl/code-snippet/chart/series/rangecolumn-cs4" %} - **Border** -Use the [border](https://ej2.syncfusion.com/react/documentation/api/chart/seriesModel/#border) property to customize the width and color of the series border. +Use the [border](https://ej2.syncfusion.com/react/documentation/api/chart/seriesModel/#border) property to customize the width, color and dasharray of the series border. {% tabs %} {% highlight js tabtitle="index.jsx" %} diff --git a/ej2-react/chart/chart-types/range-step-area.md b/ej2-react/chart/chart-types/range-step-area.md index 5f699c6f3..d299046a6 100644 --- a/ej2-react/chart/chart-types/range-step-area.md +++ b/ej2-react/chart/chart-types/range-step-area.md @@ -122,9 +122,9 @@ The [opacity](https://ej2.syncfusion.com/react/documentation/api/chart/seriesMod {% previewsample "page.domainurl/code-snippet/chart/series/rangesteparea-cs3" %} -**Dash array** +**Border** -The [dashArray](https://ej2.syncfusion.com/react/documentation/api/chart/seriesModel/#dasharray) property determines the pattern of dashes and gaps in the series. +Use the [border](https://ej2.syncfusion.com/react/documentation/api/chart/seriesModel/#border) property to customize the width, color and dasharray of the series border. {% tabs %} {% highlight js tabtitle="index.jsx" %} diff --git a/ej2-react/chart/chart-types/spline-area.md b/ej2-react/chart/chart-types/spline-area.md index a669f65e8..aff2bc519 100644 --- a/ej2-react/chart/chart-types/spline-area.md +++ b/ej2-react/chart/chart-types/spline-area.md @@ -121,9 +121,9 @@ The [opacity](https://ej2.syncfusion.com/react/documentation/api/chart/seriesMod {% previewsample "page.domainurl/code-snippet/chart/series/splinearea-cs2" %} -**Dash array** +**Border** -The [dashArray](https://ej2.syncfusion.com/react/documentation/api/chart/seriesModel/#opacity) property determines the pattern of dashes and gaps in the series. +Use the [border](https://ej2.syncfusion.com/react/documentation/api/chart/seriesModel/#border) property to customize the width, color and dasharray of the series border. {% tabs %} {% highlight js tabtitle="index.jsx" %} diff --git a/ej2-react/chart/chart-types/spline-range-area.md b/ej2-react/chart/chart-types/spline-range-area.md index b10b9362c..1c146faff 100644 --- a/ej2-react/chart/chart-types/spline-range-area.md +++ b/ej2-react/chart/chart-types/spline-range-area.md @@ -120,9 +120,9 @@ The [opacity](https://ej2.syncfusion.com/react/documentation/api/chart/seriesMod {% previewsample "page.domainurl/code-snippet/chart/series/splinerangearea-cs2" %} -**Dash array** +**Border** -The [dashArray](https://ej2.syncfusion.com/react/documentation/api/chart/seriesModel/#dasharray) property determines the pattern of dashes and gaps in the series. +Use the [border](https://ej2.syncfusion.com/react/documentation/api/chart/seriesModel/#border) property to customize the width, color and dasharray of the series border. {% tabs %} {% highlight js tabtitle="index.jsx" %} diff --git a/ej2-react/chart/chart-types/stack-area.md b/ej2-react/chart/chart-types/stack-area.md index c6d843799..1ab361cc9 100644 --- a/ej2-react/chart/chart-types/stack-area.md +++ b/ej2-react/chart/chart-types/stack-area.md @@ -120,9 +120,9 @@ The [opacity](https://ej2.syncfusion.com/react/documentation/api/chart/seriesMod {% previewsample "page.domainurl/code-snippet/chart/series/stackedarea-cs2" %} -**Dash array** +**Border** -The [dashArray](https://ej2.syncfusion.com/react/documentation/api/chart/seriesModel/#dasharray) property determines the pattern of dashes and gaps in the series. +Use the [border](https://ej2.syncfusion.com/react/documentation/api/chart/seriesModel/#border) property to customize the width, color and dasharray of the series border. {% tabs %} {% highlight js tabtitle="index.jsx" %} diff --git a/ej2-react/chart/chart-types/stack-bar.md b/ej2-react/chart/chart-types/stack-bar.md index 4bf8a1d04..9b0e60683 100644 --- a/ej2-react/chart/chart-types/stack-bar.md +++ b/ej2-react/chart/chart-types/stack-bar.md @@ -120,30 +120,9 @@ The [opacity](https://ej2.syncfusion.com/react/documentation/api/chart/seriesMod {% previewsample "page.domainurl/code-snippet/chart/series/stackedbar-cs2" %} -**Dash array** - -The [dashArray](https://ej2.syncfusion.com/react/documentation/api/chart/seriesModel/#dasharray) property determines the pattern of dashes and gaps in the series. - -{% tabs %} -{% highlight js tabtitle="index.jsx" %} -{% include code-snippet/chart/series/stackedbar-cs3/app/index.jsx %} -{% endhighlight %} -{% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/chart/series/stackedbar-cs3/app/index.tsx %} -{% endhighlight %} -{% highlight js tabtitle="datasource.jsx" %} -{% include code-snippet/chart/series/stackedbar-cs3/app/datasource.jsx %} -{% endhighlight %} -{% highlight ts tabtitle="datasource.tsx" %} -{% include code-snippet/chart/series/stackedbar-cs3/app/datasource.tsx %} -{% endhighlight %} -{% endtabs %} - -{% previewsample "page.domainurl/code-snippet/chart/series/stackedbar-cs3" %} - **Border** -Use the [border](https://ej2.syncfusion.com/react/documentation/api/chart/seriesModel/#border) property to customize the width and color of the series border. +Use the [border](https://ej2.syncfusion.com/react/documentation/api/chart/seriesModel/#border) property to customize the width, color and dasharray of the series border. {% tabs %} {% highlight js tabtitle="index.jsx" %} diff --git a/ej2-react/chart/chart-types/stack-column.md b/ej2-react/chart/chart-types/stack-column.md index c20861814..4a69c193d 100644 --- a/ej2-react/chart/chart-types/stack-column.md +++ b/ej2-react/chart/chart-types/stack-column.md @@ -120,30 +120,9 @@ The [opacity](https://ej2.syncfusion.com/react/documentation/api/chart/seriesMod {% previewsample "page.domainurl/code-snippet/chart/series/stackedcolumn-cs2" %} -**Dash array** - -The [dashArray](https://ej2.syncfusion.com/react/documentation/api/chart/seriesModel/#dasharray) property determines the pattern of dashes and gaps in the series. - -{% tabs %} -{% highlight js tabtitle="index.jsx" %} -{% include code-snippet/chart/series/stackedcolumn-cs3/app/index.jsx %} -{% endhighlight %} -{% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/chart/series/stackedcolumn-cs3/app/index.tsx %} -{% endhighlight %} -{% highlight js tabtitle="datasource.jsx" %} -{% include code-snippet/chart/series/stackedcolumn-cs3/app/datasource.jsx %} -{% endhighlight %} -{% highlight ts tabtitle="datasource.tsx" %} -{% include code-snippet/chart/series/stackedcolumn-cs3/app/datasource.tsx %} -{% endhighlight %} -{% endtabs %} - -{% previewsample "page.domainurl/code-snippet/chart/series/stackedcolumn-cs3" %} - **Border** -Use the [border](https://ej2.syncfusion.com/react/documentation/api/chart/seriesModel/#border) property to customize the width and color of the series border. +Use the [border](https://ej2.syncfusion.com/react/documentation/api/chart/seriesModel/#border) property to customize the width, color and dasharray of the series border. {% tabs %} {% highlight js tabtitle="index.jsx" %} diff --git a/ej2-react/chart/chart-types/stacked-area.md b/ej2-react/chart/chart-types/stacked-area.md index 1c3c0b80b..21ccd1460 100644 --- a/ej2-react/chart/chart-types/stacked-area.md +++ b/ej2-react/chart/chart-types/stacked-area.md @@ -120,9 +120,9 @@ The [opacity](https://ej2.syncfusion.com/react/documentation/api/chart/seriesMod {% previewsample "page.domainurl/code-snippet/chart/series/100-stackedarea-cs2" %} -**Dash array** +**Border** -The [dashArray](https://ej2.syncfusion.com/react/documentation/api/chart/seriesModel/#dasharray) property determines the pattern of dashes and gaps in the series. +Use the [border](https://ej2.syncfusion.com/react/documentation/api/chart/seriesModel/#border) property to customize the width, color and dasharray of the series border. {% tabs %} {% highlight js tabtitle="index.jsx" %} diff --git a/ej2-react/chart/chart-types/stacked-bar.md b/ej2-react/chart/chart-types/stacked-bar.md index 26df1f44b..3c2fd2f19 100644 --- a/ej2-react/chart/chart-types/stacked-bar.md +++ b/ej2-react/chart/chart-types/stacked-bar.md @@ -120,30 +120,9 @@ The [opacity](https://ej2.syncfusion.com/react/documentation/api/chart/seriesMod {% previewsample "page.domainurl/code-snippet/chart/series/100-stackedbar-cs2" %} -**Dash array** - -The [dashArray](https://ej2.syncfusion.com/react/documentation/api/chart/seriesModel/#dasharray) property determines the pattern of dashes and gaps in the series. - -{% tabs %} -{% highlight js tabtitle="index.jsx" %} -{% include code-snippet/chart/series/100-stackedbar-cs3/app/index.jsx %} -{% endhighlight %} -{% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/chart/series/100-stackedbar-cs3/app/index.tsx %} -{% endhighlight %} -{% highlight js tabtitle="datasource.jsx" %} -{% include code-snippet/chart/series/100-stackedbar-cs3/app/datasource.jsx %} -{% endhighlight %} -{% highlight ts tabtitle="datasource.tsx" %} -{% include code-snippet/chart/series/100-stackedbar-cs3/app/datasource.tsx %} -{% endhighlight %} -{% endtabs %} - -{% previewsample "page.domainurl/code-snippet/chart/series/100-stackedbar-cs3" %} - **Border** -Use the [border](https://ej2.syncfusion.com/react/documentation/api/chart/seriesModel/#border) property to customize the width and color of the series border. +Use the [border](https://ej2.syncfusion.com/react/documentation/api/chart/seriesModel/#border) property to customize the width, color and dasharray of the series border. {% tabs %} {% highlight js tabtitle="index.jsx" %} diff --git a/ej2-react/chart/chart-types/stacked-column.md b/ej2-react/chart/chart-types/stacked-column.md index c1dfca1f3..46ff1aef2 100644 --- a/ej2-react/chart/chart-types/stacked-column.md +++ b/ej2-react/chart/chart-types/stacked-column.md @@ -120,30 +120,9 @@ The [opacity](https://ej2.syncfusion.com/react/documentation/api/chart/seriesMod {% previewsample "page.domainurl/code-snippet/chart/series/100-stackedcolumn-cs2" %} -**Dash array** - -The [dashArray](https://ej2.syncfusion.com/react/documentation/api/chart/seriesModel/#dasharray) property determines the pattern of dashes and gaps in the series. - -{% tabs %} -{% highlight js tabtitle="index.jsx" %} -{% include code-snippet/chart/series/100-stackedcolumn-cs3/app/index.jsx %} -{% endhighlight %} -{% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/chart/series/100-stackedcolumn-cs3/app/index.tsx %} -{% endhighlight %} -{% highlight js tabtitle="datasource.jsx" %} -{% include code-snippet/chart/series/100-stackedcolumn-cs3/app/datasource.jsx %} -{% endhighlight %} -{% highlight ts tabtitle="datasource.tsx" %} -{% include code-snippet/chart/series/100-stackedcolumn-cs3/app/datasource.tsx %} -{% endhighlight %} -{% endtabs %} - -{% previewsample "page.domainurl/code-snippet/chart/series/100-stackedcolumn-cs3" %} - **Border** -Use the [border](https://ej2.syncfusion.com/react/documentation/api/chart/seriesModel/#border) property to customize the width and color of the series border. +Use the [border](https://ej2.syncfusion.com/react/documentation/api/chart/seriesModel/#border) property to customize the width, color and dasharray of the series border. {% tabs %} {% highlight js tabtitle="index.jsx" %} diff --git a/ej2-react/chart/chart-types/stacked-step-area.md b/ej2-react/chart/chart-types/stacked-step-area.md index c4f93d335..e8b7b77f9 100644 --- a/ej2-react/chart/chart-types/stacked-step-area.md +++ b/ej2-react/chart/chart-types/stacked-step-area.md @@ -120,9 +120,9 @@ The [opacity](https://ej2.syncfusion.com/react/documentation/api/chart/seriesMod {% previewsample "page.domainurl/code-snippet/chart/series/stackedsteparea-cs3" %} -**Dash array** +**Border** -The [dashArray](https://ej2.syncfusion.com/react/documentation/api/chart/seriesModel/#dasharray) property determines the pattern of dashes and gaps in the series. +Use the [border](https://ej2.syncfusion.com/react/documentation/api/chart/seriesModel/#border) property to customize the width, color and dasharray of the series border. {% tabs %} {% highlight js tabtitle="index.jsx" %} diff --git a/ej2-react/chart/chart-types/step-area.md b/ej2-react/chart/chart-types/step-area.md index 5314b37d7..acde7a5df 100644 --- a/ej2-react/chart/chart-types/step-area.md +++ b/ej2-react/chart/chart-types/step-area.md @@ -120,9 +120,9 @@ The [opacity](https://ej2.syncfusion.com/react/documentation/api/chart/seriesMod {% previewsample "page.domainurl/code-snippet/chart/series/steparea-cs2" %} -**Dash array** +**Border** -The [dashArray](https://ej2.syncfusion.com/react/documentation/api/chart/seriesModel/#dasharray) property determines the pattern of dashes and gaps in the series. +Use the [border](https://ej2.syncfusion.com/react/documentation/api/chart/seriesModel/#border) property to customize the width, color and dasharray of the series border. {% tabs %} {% highlight js tabtitle="index.jsx" %} diff --git a/ej2-react/chart/cross-hair-and-track-ball.md b/ej2-react/chart/cross-hair-and-track-ball.md index 1c5b304a1..135abef8e 100644 --- a/ej2-react/chart/cross-hair-and-track-ball.md +++ b/ej2-react/chart/cross-hair-and-track-ball.md @@ -75,6 +75,27 @@ The [`fill`](https://ej2.syncfusion.com/react/documentation/api/chart/crosshairT >Note: To use crosshair feature, we need to inject `Crosshair` module into the `services`. +**Snap to data** + +Enabling the [`snapToData`](https://ej2.syncfusion.com/react/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 js tabtitle="index.jsx" %} +{% include code-snippet/chart/user-interaction/crosshair-cs6/app/index.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="index.tsx" %} +{% include code-snippet/chart/user-interaction/crosshair-cs6/app/index.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/chart/user-interaction/crosshair-cs6/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/chart/user-interaction/crosshair-cs6/app/datasource.tsx %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "page.domainurl/code-snippet/chart/user-interaction/crosshair-cs6" %} + ## Trackball Trackball is used to track a data point closest to the mouse or touch position. Trackball marker indicates the closest point and trackball tooltip displays the information about the point. To use trackball feature, we need to inject `Crosshair` and `Tooltip` module into the `services`. diff --git a/ej2-react/chart/legend.md b/ej2-react/chart/legend.md index fe3575e3f..f6b0f381f 100644 --- a/ej2-react/chart/legend.md +++ b/ej2-react/chart/legend.md @@ -16,7 +16,7 @@ To get start quickly with Legends in React Charts, you can check on this video: {% youtube "https://www.youtube.com/watch?v=7VYeN4W_wMc" %} -## Position and Alignment +## Position and alignment By using the [`position`](https://ej2.syncfusion.com/react/documentation/api/chart/legendSettings/#position) property, you can position the legend at left, right, top or bottom of the chart. The legend is positioned at the bottom of the chart, by default. @@ -56,7 +56,7 @@ Custom position helps you to position the legend anywhere in the chart using x, {% previewsample "page.domainurl/code-snippet/chart/axis/category-cs14" %} -## Legend Reverse +## Legend reverse You can reverse the order of the legend items by using the [`reverse`](https://ej2.syncfusion.com/react/documentation/api/chart/legendSettings/#reverse) property. By default, legend for the first series in the collection will be placed first. @@ -79,7 +79,7 @@ You can reverse the order of the legend items by using the [`reverse`](https://e -**Legend Alignment** +**Legend alignment** @@ -123,7 +123,7 @@ To change the legend icon shape, you can use [`legendShape`](https://ej2.syncfu {% previewsample "page.domainurl/code-snippet/chart/axis/category-cs16" %} -### Legend Size +### Legend size By default, legend takes 20% - 25% of the chart's height horizontally, when it is placed on top or bottom position and 20% - 25% of the chart's width vertically, when placed on left or right position of the chart. You can change this default legend size by using the [`width`](https://ej2.syncfusion.com/react/documentation/api/chart/legendSettings/#width) and [`height`](https://ej2.syncfusion.com/react/documentation/api/chart/legendSettings/#height) property of the `legendSettings`. @@ -144,7 +144,7 @@ By default, legend takes 20% - 25% of the chart's height horizontally, when it i {% previewsample "page.domainurl/code-snippet/chart/axis/category-cs17" %} -### Legend Item Size +### Legend item size You can customize the size of the legend items by using the [`shapeHeight`](https://ej2.syncfusion.com/react/documentation/api/chart/legendSettings/#shapeheight) and [`shapeWidth`](https://ej2.syncfusion.com/react/documentation/api/chart/legendSettings/#shapewidth) property. @@ -165,7 +165,7 @@ You can customize the size of the legend items by using the [`shapeHeight`](http {% previewsample "page.domainurl/code-snippet/chart/axis/category-cs18" %} -### Paging for Legend +### Paging for legend Paging will be enabled by default, when the legend items exceeds the legend bounds. You can view each legend items by navigating between the pages using navigation buttons. @@ -186,7 +186,7 @@ Paging will be enabled by default, when the legend items exceeds the legend boun {% previewsample "page.domainurl/code-snippet/chart/axis/legend-cs1" %} -### Legend Text Wrap +### Legend text wrap When the legend text exceeds the container, the text can be wrapped by using [`textWrap`](https://ej2.syncfusion.com/react/documentation/api/chart/legendSettings/#textwrap) Property. End user can also wrap the legend text based on the [`maximumLabelWidth`](https://ej2.syncfusion.com/react/documentation/api/chart/legendSettings/#maximumlabelwidth) property. @@ -249,7 +249,7 @@ You can set the legend label color based on series color by using chart's [loade {% previewsample "page.domainurl/code-snippet/chart/axis/category-cs20" %} -## Series Selection on Legend +## Series selection on legend By default, legend click enables you to collapse the series visibility. On other hand, if you need to select a series through legend click, disable the [`toggleVisibility`](https://ej2.syncfusion.com/react/documentation/api/chart/legendSettings/#togglevisibility). @@ -270,7 +270,7 @@ By default, legend click enables you to collapse the series visibility. On oth {% previewsample "page.domainurl/code-snippet/chart/axis/category-cs21" %} -## Enable Animation +## Enable animation You can customize the animation while clicking legend by setting enableAnimation as true or false using `enableAnimation` property in chart. @@ -291,7 +291,7 @@ You can customize the animation while clicking legend by setting enableAnimation {% previewsample "page.domainurl/code-snippet/chart/axis/category-cs22" %} -## Collapsing Legend Item +## Collapsing legend item By default, series name will be displayed as legend. To skip the legend for a particular series, you can give empty string to the series name. @@ -312,7 +312,7 @@ By default, series name will be displayed as legend. To skip the legend for a pa {% previewsample "page.domainurl/code-snippet/chart/axis/category-cs23" %} -## Legend Title +## Legend title You can set title for legend using `title` property in `legendSettings`. You can also customize the `fontStyle`, `size`, `fontWeight`, `color`, `textAlignment`, `fontFamily`, `opacity` and `textOverflow` of legend title. `titlePosition` is used to set the legend position in `Top`, `Left` and `Right` position. `maximumTitleWidth` is used to set the width of the legend title. By default, it will be `100px`. @@ -333,7 +333,7 @@ You can set title for legend using `title` property in `legendSettings`. You can {% previewsample "page.domainurl/code-snippet/chart/axis/legend-cs2" %} -## Arrow Page Navigation +## Arrow page navigation By default, the page number will be enabled while legend paging. Now, you can disable that page number and also you can get left and right arrows for page navigation. You have to set `false` value to `enablePages` to get this support. @@ -354,7 +354,7 @@ By default, the page number will be enabled while legend paging. Now, you can di {% previewsample "page.domainurl/code-snippet/chart/axis/legend-cs3" %} -## Legend Item Padding +## Legend item padding The [`itemPadding`](https://ej2.syncfusion.com/react/documentation/api/chart/legendSettings/#itempadding) property can be used to adjust the space between the legend items. @@ -375,8 +375,29 @@ The [`itemPadding`](https://ej2.syncfusion.com/react/documentation/api/chart/leg {% previewsample "page.domainurl/code-snippet/chart/axis/legend-cs4" %} +## Legend layout + +The [`layout`](https://ej2.syncfusion.com/react/documentation/api/chart/legendSettingsModel/#layout) property in [`legendSettings`](https://ej2.syncfusion.com/react/documentation/api/chart#legendsettings) allows you to display the legend either horizontally or vertically. By default, the [`layout`](https://ej2.syncfusion.com/react/documentation/api/chart/legendSettingsModel/#layout) is set to **Auto**. The [`maximumColumns`](https://ej2.syncfusion.com/react/documentation/api/chart/legendSettingsModel/#maximumcolumns) property in [`legendSettings`](https://ej2.syncfusion.com/react/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/react/documentation/api/chart/legendSettingsModel/#fixedwidth) property in [`legendSettings`](https://ej2.syncfusion.com/react/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 js tabtitle="index.jsx" %} +{% include code-snippet/chart/axis/legend-cs6/app/index.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="index.tsx" %} +{% include code-snippet/chart/axis/legend-cs6/app/index.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/chart/axis/legend-cs6/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/chart/axis/legend-cs6/app/datasource.tsx %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "page.domainurl/code-snippet/chart/axis/legend-cs6" %} + >Note: To use legend feature, we need to inject `Legend` module into the `services`. -## See Also +## See also * [Customize each shape in legend](./how-to/#customize-each-shape-in-legend) diff --git a/ej2-react/chart/tool-tip.md b/ej2-react/chart/tool-tip.md index cacdf74c0..88515fee9 100644 --- a/ej2-react/chart/tool-tip.md +++ b/ej2-react/chart/tool-tip.md @@ -126,6 +126,27 @@ 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/react/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 js tabtitle="index.jsx" %} +{% include code-snippet/chart/user-interaction/tooltip-cs12/app/index.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="index.tsx" %} +{% include code-snippet/chart/user-interaction/tooltip-cs12/app/index.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/chart/user-interaction/tooltip-cs12/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/chart/user-interaction/tooltip-cs12/app/datasource.tsx %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "page.domainurl/code-snippet/chart/user-interaction/tooltip-cs12" %} + ## Tooltip mapping name By default, tooltip shows information of x and y value in points. You can show more information from data source in tooltip by using the [`tooltipMappingName`](https://ej2.syncfusion.com/react/documentation/api/chart/seriesModel/#tooltipmappingname) property of the tooltip. You can use the `${point.tooltip}` as place holders to display the specified tooltip content. diff --git a/ej2-react/chart/zooming.md b/ej2-react/chart/zooming.md index 2453f0094..0f473623c 100644 --- a/ej2-react/chart/zooming.md +++ b/ej2-react/chart/zooming.md @@ -93,6 +93,27 @@ By default, zoomin, zoomout, pan and reset buttons will be displayed for zoomed {% previewsample "page.domainurl/code-snippet/chart/user-interaction/zoom-cs6" %} +### Toolbar customization + +The zoom toolbar in the chart can be repositioned using the [`toolbarPosition`](https://ej2.syncfusion.com/react/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/react/documentation/api/chart/toolbarPositionModel/#x) and [`y`](https://ej2.syncfusion.com/react/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/react/documentation/api/chart/toolbarPositionModel/#draggable) property allows users to freely move the toolbar within the chart area, ensuring optimal usability. + +{% tabs %} +{% highlight js tabtitle="index.jsx" %} +{% include code-snippet/chart/user-interaction/zoom-cs11/app/index.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="index.tsx" %} +{% include code-snippet/chart/user-interaction/zoom-cs11/app/index.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/chart/user-interaction/zoom-cs11/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/chart/user-interaction/zoom-cs11/app/datasource.tsx %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "page.domainurl/code-snippet/chart/user-interaction/zoom-cs11" %} + ## Enable scrollbar Using the [`enableScrollbar`](https://ej2.syncfusion.com/react/documentation/api/chart/zoomSettingsModel/#enablescrollbar) property, you can add a scrollbar to a zoomed chart. This scrollbar allows you to zoom or pan the chart. The appearance of the scrollbar can be customized using properties in [`scrollbarSettings`](https://ej2.syncfusion.com/react/documentation/api/chart/scrollbarSettingsModel/). For example, you can use [`trackColor`](https://ej2.syncfusion.com/react/documentation/api/chart/scrollbarSettingsModel/#trackcolor) and [`trackRadius`](https://ej2.syncfusion.com/react/documentation/api/chart/scrollbarSettingsModel/#trackradius) properties to customize the track of the scrollbar, and [`scrollbarRadius`](https://ej2.syncfusion.com/react/documentation/api/chart/scrollbarSettingsModel/#scrollbarradius) and [`scrollbarColor`](https://ej2.syncfusion.com/react/documentation/api/chart/scrollbarSettingsModel/#scrollbarcolor) properties to customize the scroller. The ability to zoom through the scrollbar can be enabled or disabled using the [`enableZoom`](https://ej2.syncfusion.com/react/documentation/api/chart/scrollbarSettingsModel/#enablezoom) property in [`scrollbarSettings`](https://ej2.syncfusion.com/react/documentation/api/chart/scrollbarSettingsModel/). Additionally, you can change the color of the grip and height of the scrollbar using the [`gripColor`](https://ej2.syncfusion.com/react/documentation/api/chart/scrollbarSettingsModel/#gripcolor) and [`height`](https://ej2.syncfusion.com/react/documentation/api/chart/scrollbarSettingsModel/#height) properties. @@ -116,7 +137,6 @@ Using the [`enableScrollbar`](https://ej2.syncfusion.com/react/documentation/api ## Enable animation - Use the [`enableAnimation`](https://ej2.syncfusion.com/react/documentation/api/chart/zoomSettingsModel/#enableanimation) property to create smooth transitions when zooming in on the chart. {% tabs %} diff --git a/ej2-react/chat-ui/accessibility.md b/ej2-react/chat-ui/accessibility.md new file mode 100644 index 000000000..4606b684e --- /dev/null +++ b/ej2-react/chat-ui/accessibility.md @@ -0,0 +1,80 @@ +--- +layout: post +title: Accessibility in React Chat UI component | Syncfusion +description: Learn here all about Accessibility in Syncfusion React Chat UI component of Syncfusion Essential JS 2 and more. +platform: ej2-react +control: Chat UI +documentation: ug +domainurl: ##DomainURL## +--- + +# Accessibility in React Chat UI component + +The Chat UI component followed the accessibility guidelines and standards, including [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), [WCAG 2.2](https://www.w3.org/TR/WCAG22/) standards, and [WCAG roles](https://www.w3.org/TR/wai-aria/#roles) that are commonly used to evaluate accessibility. + +The accessibility compliance for the Chat UI component is outlined below. + +| Accessibility Criteria | Compatibility | +| -- | -- | +| [WCAG 2.2 Support](../common/accessibility#accessibility-standards) |
|
+| [Section 508 Support](../common/accessibility#accessibility-standards) | |
+| [Screen Reader Support](../common/accessibility#screen-reader-support) | |
+| [Right-To-Left Support](../common/accessibility#right-to-left-support) | |
+| [Color Contrast](../common/accessibility#color-contrast) | |
+| [Mobile Device Support](../common/accessibility#mobile-device-support) | |
+| [Keyboard Navigation Support](../common/accessibility#keyboard-navigation-support) | |
+| [Accessibility Checker Validation](../common/accessibility#ensuring-accessibility) | |
+| [Axe-core Accessibility Validation](../common/accessibility#ensuring-accessibility) | |
+
+
++ + - All features of the component meet the requirement.+ +
- Some features of the component do not meet the requirement.+ +## WAI-ARIA attributes + +The following ARIA attributes are used in the Chat UI component: + +| Attributes | Purpose | +| ------------ | ----------------------- | +| `role=button` | Indicates that the element is clickable and triggers an action when activated by the user. | +| `role=toolbar` | Specifies that the element is a toolbar. | +| `aria-label` | Defines a string value that labels an interactive element for accessibility. | +| `aria-orientation` | Specifies the orientation of the toolbar. | +| `aria-disabled` | Indicates whether the toolbar or element is currently disabled and not interactive. | +| `aria-multiline` | Indicates that a textbox accepts multiple lines of input or only a single line. | + +## Keyboard interaction + +The following keyboard shortcuts are supported by the Chat UI component. + +| **Press** | **To do this** | +| --- | --- | +| Enter | Select the focused item or send a message when the input is focused. | +| Tab | Moves focus forward through the interactive elements. | +| Shift + Tab | Moves focus backward through the interactive elements. | +| Page Up | Scroll up through chat history. | +| Page Down | Scroll down through chat history. | +| Ctrl + Home | Scroll to the first message. | +| Ctrl + End | Scroll to the most recent message. | +Chat UI Toolbars|| +| Left Arrow | Focuses the previous toolbar element. | +| Right Arrow | Focuses the next toolbar element. | +| Enter / Space | Select the focused item or activate the selected option. | +| Home | Moves focus to the first toolbar element. | +| End | Moves focus to the last toolbar element. | + +## Ensuring accessibility + +The Chat UI component's accessibility levels are ensured through an [accessibility-checker](https://www.npmjs.com/package/accessibility-checker) and [axe-core](https://www.npmjs.com/package/axe-core) software tools during automated testing. + +## See also + +* [Accessibility in Syncfusion components](../common/accessibility) diff --git a/ej2-react/chat-ui/appearance.md b/ej2-react/chat-ui/appearance.md new file mode 100644 index 000000000..21ad3ec10 --- /dev/null +++ b/ej2-react/chat-ui/appearance.md @@ -0,0 +1,74 @@ +--- +layout: post +title: Appearance in React Chat UI component | Syncfusion +description: Checkout and learn about Appearance with React Chat UI component of Syncfusion Essential JS 2 and more details. +platform: ej2-react +control: Chat UI +documentation: ug +domainurl: ##DomainURL## +--- + +# Appearance in React Chat UI component + +## Setting placeholder + +You can use the [placeholder](../api/chat-ui#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 js tabtitle="index.jsx" %} +{% include code-snippet/chat-ui/appearance/placeholder/app/index.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="index.tsx" %} +{% include code-snippet/chat-ui/appearance/placeholder/app/index.tsx %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "page.domainurl/code-snippet/chat-ui/appearance/placeholder" %} + +## Setting width + +You can use the [width](../api/chat-ui#width) property to specify the dimensions of the Chat UI within the application layout. By default, the value is `100%`. + +{% tabs %} +{% highlight js tabtitle="index.jsx" %} +{% include code-snippet/chat-ui/appearance/width/app/index.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="index.tsx" %} +{% include code-snippet/chat-ui/appearance/width/app/index.tsx %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "page.domainurl/code-snippet/chat-ui/appearance/width" %} + +## Setting height + +You can use the [height](../api/chat-ui#height) property to specify the dimensions of the Chat UI within the application layout. By default, the value is `100%`. + +{% tabs %} +{% highlight js tabtitle="index.jsx" %} +{% include code-snippet/chat-ui/appearance/height/app/index.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="index.tsx" %} +{% include code-snippet/chat-ui/appearance/height/app/index.tsx %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "page.domainurl/code-snippet/chat-ui/appearance/height" %} + +## CSS Class + +You can use the [cssClass](../api/chat-ui#cssclass) property to customize the appearance of the chat UI component. + +{% tabs %} +{% highlight js tabtitle="index.jsx" %} +{% include code-snippet/chat-ui/appearance/cssClass/app/index.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="index.tsx" %} +{% include code-snippet/chat-ui/appearance/cssClass/app/index.tsx %} +{% endhighlight %} +{% highlight ts tabtitle="index.css" %} +{% include code-snippet/chat-ui/appearance/cssClass/index.css %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "page.domainurl/code-snippet/chat-ui/appearance/cssClass" %} diff --git a/ej2-react/chat-ui/events.md b/ej2-react/chat-ui/events.md new file mode 100644 index 000000000..28d9c69ca --- /dev/null +++ b/ej2-react/chat-ui/events.md @@ -0,0 +1,52 @@ +--- +layout: post +title: Events in React Chat UI component | Syncfusion +description: Checkout and learn about Events with React Chat UI component of Syncfusion Essential JS 2 and more details. +platform: ej2-react +control: Chat UI +documentation: ug +domainurl: ##DomainURL## +--- + +# Events in React Chat UI component + +This section describes the Chat UI events that will be triggered when appropriate actions are performed. The following events are available in the Chat UI component. + +## Created + +The Chat UI component triggers the [created](../api/chat-ui#created) event when the component rendering is completed. + +{% tabs %} +{% highlight js tabtitle="index.jsx" %} +{% include code-snippet/chat-ui/events/created/app/index.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="index.tsx" %} +{% include code-snippet/chat-ui/events/created/app/index.tsx %} +{% endhighlight %} +{% endtabs %} + +## Sending message + +The [messageSend](../api/chat-ui#messagesend) event is triggered before sending a message in the Chat UI component. + +{% tabs %} +{% highlight js tabtitle="index.jsx" %} +{% include code-snippet/chat-ui/events/messageSend/app/index.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="index.tsx" %} +{% include code-snippet/chat-ui/events/messageSend/app/index.tsx %} +{% endhighlight %} +{% endtabs %} + +## User typing + +The [userTyping](../api/chat-ui#usertyping) event is triggered when the user is typing a message in the Chat UI component. + +{% tabs %} +{% highlight js tabtitle="index.jsx" %} +{% include code-snippet/chat-ui/events/userTyping/app/index.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="index.tsx" %} +{% include code-snippet/chat-ui/events/userTyping/app/index.tsx %} +{% endhighlight %} +{% endtabs %} diff --git a/ej2-react/chat-ui/footer.md b/ej2-react/chat-ui/footer.md new file mode 100644 index 000000000..366768977 --- /dev/null +++ b/ej2-react/chat-ui/footer.md @@ -0,0 +1,30 @@ +--- +layout: post +title: Footer in React Chat UI component | Syncfusion +description: Checkout and learn about Footer with React Chat UI component of Syncfusion Essential JS 2 and more details. +platform: ej2-react +control: Chat UI +documentation: ug +domainurl: ##DomainURL## +--- + +# Footer in React Chat UI component + +## Show or hide footer + +You can use [showFooter](../api/chat-ui#showfooter) property to enable or disable the chat footer. + +{% tabs %} +{% highlight js tabtitle="index.jsx" %} +{% include code-snippet/chat-ui/footer/app/index.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="index.tsx" %} +{% include code-snippet/chat-ui/footer/app/index.tsx %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "page.domainurl/code-snippet/chat-ui/footer" %} + +## Footer template + +> Refer to the [Templates](./templates#footer-template) section for more details about the Footer template. diff --git a/ej2-react/chat-ui/getting-started.md b/ej2-react/chat-ui/getting-started.md new file mode 100644 index 000000000..ea049fc7d --- /dev/null +++ b/ej2-react/chat-ui/getting-started.md @@ -0,0 +1,159 @@ +--- +layout: post +title: Getting started with React Chat UI component | Syncfusion +description: Checkout and learn about Getting started with React Chat UI component of Syncfusion Essential JS 2 and more details. +platform: ej2-react +control: Chat UI +documentation: ug +domainurl: ##DomainURL## +--- + +# Getting started in React Chat UI component + +This section explains how to create a simple **Chat UI** component and configure its available functionalities in React. + +## Dependencies + +The list of dependencies required to use the `Chat UI` component in your application is given as follows: + +```javascript +|-- @syncfusion/ej2-react-interactive-chat + |-- @syncfusion/ej2-react-base + |-- @syncfusion/ej2-base + |-- @syncfusion/ej2-buttons + |-- @syncfusion/ej2-popups + |-- @syncfusion/ej2-navigations + |-- @syncfusion/ej2-inputs +``` + +## Installation and configuration + +You can use [`Create-react-app`](https://github.com/facebookincubator/create-react-app) to setup the applications. To install `create-react-app` run the following command. + +```bash +npm install -g create-react-app +``` + +Start a new project using create-react-app command as follows + +```bash + create-react-app quickstart --scripts-version=react-scripts-ts + cd quickstart +``` + +## Adding Syncfusion packages + +All the available Essential JS 2 packages are published in [`npmjs.com`](https://www.npmjs.com/~syncfusionorg) public registry. You can choose the component that you want to install. + +To install Chat UI component, use the following command + +```bash +npm install @syncfusion/ej2-react-interactive-chat +``` + +## Adding Chat UI component + +Now, you can start adding Chat UI component in the application. For getting started, add the Chat UI component by using `
- The component does not meet the requirement.` tag directive in `src/App.tsx` file using following code. Now place the below Chat UI code in the `src/App.tsx`. + +`[Class-component]` + +```ts + +import { ChatUIComponent } from '@syncfusion/ej2-react-interactive-chat'; +import * as React from 'react'; +import * as ReactDOM from "react-dom"; + +export default class App extends React.Component<{}, {}> { + public render() { + return ( + // specifies the tag for render the Chat UI omponent + + ); + } +} + +ReactDOM.render( , document.getElementById('chat-ui')); +``` + +`[Functional-component]` + +```ts +import { ChatUIComponent } from '@syncfusion/ej2-react-interactive-chat'; +import * as React from 'react'; +import * as ReactDOM from "react-dom"; + +function App() { + return ( + // specifies the tag for render the Chat UI component + + ); +} + +ReactDOM.render( , document.getElementById('chat-ui')); +``` + +## Adding CSS reference + +Import the Chat UI component required CSS references as follows in `src/App.css`. + +```css + +/* import the Chat UI dependency styles */ + +@import "../node_modules/@syncfusion/ej2-base/styles/material.css"; +@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css"; +@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css"; +@import "../node_modules/@syncfusion/ej2-popups/styles/material.css"; +@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css"; +@import "../node_modules/@syncfusion/ej2-react-interactive-chat/styles/material.css"; + +``` + +## Run the application + +After completing the configuration required to render a basic Chat UI, run the following command to display the output in your default browser. + +``` +npm start +``` + +`[Class-componnet]` + +{% tabs %} +{% highlight js tabtitle="index.jsx" %} +{% include code-snippet/chat-ui/getting-started-class/app/index.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="index.tsx" %} +{% include code-snippet/chat-ui/getting-started-class/app/index.tsx %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "page.domainurl/code-snippet/chat-ui/getting-started-class" %} + +`[Functional-componnet]` + +{% tabs %} +{% highlight js tabtitle="index.jsx" %} +{% include code-snippet/chat-ui/getting-started/app/index.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="index.tsx" %} +{% include code-snippet/chat-ui/getting-started/app/index.tsx %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "page.domainurl/code-snippet/chat-ui/getting-started" %} + +## Configure messages and user + +You can use the `MessagesDirective` tag to group all the messages and `MessageDirective` tag to define each message and the [user](../api/chat-ui#user) property to configure the current user for the chat. + +{% tabs %} +{% highlight js tabtitle="index.jsx" %} +{% include code-snippet/chat-ui/defaultMessage/app/index.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="index.tsx" %} +{% include code-snippet/chat-ui/defaultMessage/app/index.tsx %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "page.domainurl/code-snippet/chat-ui/defaultMessage" %} diff --git a/ej2-react/chat-ui/globalization.md b/ej2-react/chat-ui/globalization.md new file mode 100644 index 000000000..90172576a --- /dev/null +++ b/ej2-react/chat-ui/globalization.md @@ -0,0 +1,48 @@ +--- +layout: post +title: Globalization in React Chat UI component | Syncfusion +description: Checkout and learn about Globalization with React Chat UI component of Syncfusion Essential JS 2 and more details. +platform: ej2-react +control: Chat UI +documentation: ug +domainurl: ##DomainURL## +--- + +# Globalization in React Chat UI component + +## 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 js tabtitle="index.jsx" %} +{% include code-snippet/chat-ui/globalization/localization/app/index.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="index.tsx" %} +{% include code-snippet/chat-ui/globalization/localization/app/index.tsx %} +{% 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](../api/chat-ui#enablertl) property to `true`. + +{% tabs %} +{% highlight js tabtitle="index.jsx" %} +{% include code-snippet/chat-ui/globalization/rtl/app/index.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="index.tsx" %} +{% include code-snippet/chat-ui/globalization/rtl/app/index.tsx %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "page.domainurl/code-snippet/chat-ui/globalization/rtl" %} diff --git a/ej2-react/chat-ui/header.md b/ej2-react/chat-ui/header.md new file mode 100644 index 000000000..319a92002 --- /dev/null +++ b/ej2-react/chat-ui/header.md @@ -0,0 +1,288 @@ +--- +layout: post +title: Header in React Chat UI component | Syncfusion +description: Checkout and learn about Header with React Chat UI component of Syncfusion Essential JS 2 and more details. +platform: ej2-react +control: Chat UI +documentation: ug +domainurl: ##DomainURL## +--- + +# Header in React Chat UI component + +## Show or hide header + +You can use [showHeader](../api/chat-ui#showheader) property to enable or disable the chat header. It contains the following options `headerText` and `headerIconCss`. + +{% tabs %} +{% highlight js tabtitle="index.jsx" %} +{% include code-snippet/chat-ui/header/showHeader/app/index.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="index.tsx" %} +{% include code-snippet/chat-ui/header/showHeader/app/index.tsx %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "page.domainurl/code-snippet/chat-ui/header/showHeader" %} + +### Setting header text + +You can use the [headerText](../api/chat-ui#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 js tabtitle="index.jsx" %} +{% include code-snippet/chat-ui/header/header-text/app/index.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="index.tsx" %} +{% include code-snippet/chat-ui/header/header-text/app/index.tsx %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "page.domainurl/code-snippet/chat-ui/header/header-text" %} + +### Setting header icon CSS + +You can use the [headerIconCss](../api/chat-ui#headericoncss) property to customize the styling of the header icon. + +{% tabs %} +{% highlight js tabtitle="index.jsx" %} +{% include code-snippet/chat-ui/header/header-icon/app/index.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="index.tsx" %} +{% include code-snippet/chat-ui/header/header-icon/app/index.tsx %} +{% 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](../api/chat-ui#headertoolbar). + +### Setting items + +Items can be constructed with the following built-in command types or item template. + +#### Adding icon CSS + +You can customize the header toolbar icons by using the `iconCss` property. + +{% tabs %} +{% highlight js tabtitle="index.jsx" %} +{% include code-snippet/chat-ui/header/iconCss/app/index.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="index.tsx" %} +{% include code-snippet/chat-ui/header/iconCss/app/index.tsx %} +{% 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 js tabtitle="index.jsx" %} +{% include code-snippet/chat-ui/header/itemType/app/index.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="index.tsx" %} +{% include code-snippet/chat-ui/header/itemType/app/index.tsx %} +{% 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 js tabtitle="index.jsx" %} +{% include code-snippet/chat-ui/header/text/app/index.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="index.tsx" %} +{% include code-snippet/chat-ui/header/text/app/index.tsx %} +{% 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 js tabtitle="index.jsx" %} +{% include code-snippet/chat-ui/header/visible/app/index.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="index.tsx" %} +{% include code-snippet/chat-ui/header/visible/app/index.tsx %} +{% 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 js tabtitle="index.jsx" %} +{% include code-snippet/chat-ui/header/disable/app/index.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="index.tsx" %} +{% include code-snippet/chat-ui/header/disable/app/index.tsx %} +{% 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 js tabtitle="index.jsx" %} +{% include code-snippet/chat-ui/header/tooltip/app/index.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="index.tsx" %} +{% include code-snippet/chat-ui/header/tooltip/app/index.tsx %} +{% 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 js tabtitle="index.jsx" %} +{% include code-snippet/chat-ui/header/cssClass/app/index.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="index.tsx" %} +{% include code-snippet/chat-ui/header/cssClass/app/index.tsx %} +{% endhighlight %} +{% highlight ts tabtitle="index.css" %} +{% include code-snippet/chat-ui/header/cssClass/index.css %} +{% 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 js tabtitle="index.jsx" %} +{% include code-snippet/chat-ui/header/align/app/index.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="index.tsx" %} +{% include code-snippet/chat-ui/header/align/app/index.tsx %} +{% 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. + +To use the `tabIndex` property, set it for each Toolbar item which you want to enable tab key navigation. The `tabIndex` property should be set to a positive integer value. A value of `0` or a negative value will disable tab key navigation for the item. + +For example, to enable tab key navigation for two Toolbar items you can use the following code: + +{% raw %} +```ts +import { ChatUIComponent } from '@syncfusion/ej2-react-interactive-chat'; +import * as React from 'react'; +import * as ReactDOM from "react-dom"; + +function App() { + + const headerToolbar = { + items: [ + { text: "Item 1", tabIndex: 1 }, + { text: "Item 2", tabIndex: 2 } + ] + }; + + return ( + // specifies the tag for render the Chat UI component + + ); +} + +ReactDOM.render( , document.getElementById('container')); +``` +{% endraw %} + +With the above code, the user can switch between the two Toolbar items using the Tab and Shift+Tab keys, in addition to using the arrow keys. The items will be navigated in the order specified by the `tabIndex` values. + +If you set the `tabIndex` value to 0 for all Toolbar items, tab key navigation will be based on the element order rather than the `tabIndex` values. For example: + +{% raw %} +```ts +import { ChatUIComponent } from '@syncfusion/ej2-react-interactive-chat'; +import * as React from 'react'; +import * as ReactDOM from "react-dom"; + +function App() { + + const headerToolbar = { + items: [ + { text: "Item 1", tabIndex: 0 }, + { text: "Item 2", tabIndex: 0 } + ] + }; + + return ( + // specifies the tag for render the Chat UI component + + ); +} + +ReactDOM.render( , document.getElementById('container')); +``` +{% endraw %} + +In this case, the user can switch between the two Toolbar items using the Tab and Shift+Tab keys, and the items will be navigated in the order in which they appear in the DOM. + +#### Setting template + +You can use the `template` tag directive to add custom header toolbar item in the Chat UI component. + +{% tabs %} +{% highlight js tabtitle="index.jsx" %} +{% include code-snippet/chat-ui/header/template/app/index.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="index.tsx" %} +{% include code-snippet/chat-ui/header/template/app/index.tsx %} +{% endhighlight %} +{% highlight ts tabtitle="index.css" %} +{% include code-snippet/chat-ui/header/template/index.css %} +{% 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 js tabtitle="index.jsx" %} +{% include code-snippet/chat-ui/header/itemClick/app/index.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="index.tsx" %} +{% include code-snippet/chat-ui/header/itemClick/app/index.tsx %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "page.domainurl/code-snippet/chat-ui/header/itemClick" %} diff --git a/ej2-react/chat-ui/load-on-demand.md b/ej2-react/chat-ui/load-on-demand.md new file mode 100644 index 000000000..941af8523 --- /dev/null +++ b/ej2-react/chat-ui/load-on-demand.md @@ -0,0 +1,24 @@ +--- +layout: post +title: Load on-demand in React Chat UI component | Syncfusion +description: Checkout and learn about Load on-demand with React Chat UI component of Syncfusion Essential JS 2 and more details. +platform: ej2-react +control: Chat UI +documentation: ug +domainurl: ##DomainURL## +--- + +# Load on-demand in React Chat UI component + +You can use the [loadOnDemand](../api/chat-ui#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 js tabtitle="index.jsx" %} +{% include code-snippet/chat-ui/loadondemand/app/index.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="index.tsx" %} +{% include code-snippet/chat-ui/loadondemand/app/index.tsx %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "page.domainurl/code-snippet/chat-ui/loadondemand" %} diff --git a/ej2-react/chat-ui/messages.md b/ej2-react/chat-ui/messages.md new file mode 100644 index 000000000..e68f6aead --- /dev/null +++ b/ej2-react/chat-ui/messages.md @@ -0,0 +1,201 @@ +--- +layout: post +title: Messages in React Chat UI component | Syncfusion +description: Checkout and learn about Messages with React Chat UI component of Syncfusion Essential JS 2 and more details. +platform: ej2-react +control: Chat UI +documentation: ug +domainurl: ##DomainURL## +--- + +# Messages in React Chat UI component + +The Chat UI allows to add messages using the `MessagesDirective` tag. The message collection stores all the messages being sent and received. + +## Configure messages + +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 js tabtitle="index.jsx" %} +{% include code-snippet/chat-ui/defaultMessage/app/index.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="index.tsx" %} +{% include code-snippet/chat-ui/defaultMessage/app/index.tsx %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "page.domainurl/code-snippet/chat-ui/defaultMessage" %} + +### Define current user + +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](../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 js tabtitle="index.jsx" %} +{% include code-snippet/chat-ui/defaultMessage/app/index.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="index.tsx" %} +{% include code-snippet/chat-ui/defaultMessage/app/index.tsx %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "page.domainurl/code-snippet/chat-ui/defaultMessage" %} + +#### Setting avatar URL + +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 js tabtitle="index.jsx" %} +{% include code-snippet/chat-ui/messages/avatarUrl/app/index.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="index.tsx" %} +{% include code-snippet/chat-ui/messages/avatarUrl/app/index.tsx %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "page.domainurl/code-snippet/chat-ui/messages/avatarUrl" %} + +#### Setting avatar background color + +You can use [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 js tabtitle="index.jsx" %} +{% include code-snippet/chat-ui/messages/avatar-bgColor/app/index.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="index.tsx" %} +{% include code-snippet/chat-ui/messages/avatar-bgColor/app/index.tsx %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "page.domainurl/code-snippet/chat-ui/messages/avatar-bgColor" %} + +#### Setting CSS class + +You can use the [cssClass](../api/chat-ui/userModel/#cssclass) property to customize the appearance of the chat user. + +{% tabs %} +{% highlight js tabtitle="index.jsx" %} +{% include code-snippet/chat-ui/messages/cssClass/app/index.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="index.tsx" %} +{% include code-snippet/chat-ui/messages/cssClass/app/index.tsx %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "page.domainurl/code-snippet/chat-ui/messages/cssClass" %} + +## Define timestamp + +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 js tabtitle="index.jsx" %} +{% include code-snippet/chat-ui/messages/showTimestamp/app/index.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="index.tsx" %} +{% include code-snippet/chat-ui/messages/showTimestamp/app/index.tsx %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "page.domainurl/code-snippet/chat-ui/messages/showTimestamp" %} + +### Setting timestamp format + +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 js tabtitle="index.jsx" %} +{% include code-snippet/chat-ui/messages/timestampFormat/app/index.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="index.tsx" %} +{% include code-snippet/chat-ui/messages/timestampFormat/app/index.tsx %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "page.domainurl/code-snippet/chat-ui/messages/timestampFormat" %} + +## Define message status + +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](../api/chat-ui/messageStatusModel/#iconcss) property to update the styling of status icons associated with messages, aiding visual differentiation between statuses. + +{% tabs %} +{% highlight js tabtitle="index.jsx" %} +{% include code-snippet/chat-ui/messages/iconCss/app/index.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="index.tsx" %} +{% include code-snippet/chat-ui/messages/iconCss/app/index.tsx %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "page.domainurl/code-snippet/chat-ui/messages/iconCss" %} + +### Setting text + +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 js tabtitle="index.jsx" %} +{% include code-snippet/chat-ui/messages/text/app/index.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="index.tsx" %} +{% include code-snippet/chat-ui/messages/text/app/index.tsx %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "page.domainurl/code-snippet/chat-ui/messages/text" %} + +### Setting tooltip + +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 js tabtitle="index.jsx" %} +{% include code-snippet/chat-ui/messages/tooltip/app/index.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="index.tsx" %} +{% include code-snippet/chat-ui/messages/tooltip/app/index.tsx %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "page.domainurl/code-snippet/chat-ui/messages/tooltip" %} + +## Setting auto scroll + +You can use the [autoScrollToBottom](../api/chat-ui#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 js tabtitle="index.jsx" %} +{% include code-snippet/chat-ui/messages/autoScroll/app/index.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="index.tsx" %} +{% include code-snippet/chat-ui/messages/autoScroll/app/index.tsx %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "page.domainurl/code-snippet/chat-ui/messages/autoScroll" %} + +## Setting suggestions + +You can use the [suggestions](../api/chat-ui#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 js tabtitle="index.jsx" %} +{% include code-snippet/chat-ui/messages/suggestions/app/index.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="index.tsx" %} +{% include code-snippet/chat-ui/messages/suggestions/app/index.tsx %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "page.domainurl/code-snippet/chat-ui/messages/suggestions" %} diff --git a/ej2-react/chat-ui/methods.md b/ej2-react/chat-ui/methods.md new file mode 100644 index 000000000..33222cb98 --- /dev/null +++ b/ej2-react/chat-ui/methods.md @@ -0,0 +1,67 @@ +--- +layout: post +title: Methods in React Chat UI component | Syncfusion +description: Checkout and learn about Methods with React Chat UI component of Syncfusion Essential JS 2 and more details. +platform: ej2-react +control: Chat UI +documentation: ug +domainurl: ##DomainURL## +--- + +# Methods in React Chat UI component + +## Adding message + +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 js tabtitle="index.jsx" %} +{% include code-snippet/chat-ui/methods/addMessageModel/app/index.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="index.tsx" %} +{% include code-snippet/chat-ui/methods/addMessageModel/app/index.tsx %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "page.domainurl/code-snippet/chat-ui/methods/addMessageModel" %} + +{% tabs %} +{% highlight js tabtitle="index.jsx" %} +{% include code-snippet/chat-ui/methods/addMessageString/app/index.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="index.tsx" %} +{% include code-snippet/chat-ui/methods/addMessageString/app/index.tsx %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "page.domainurl/code-snippet/chat-ui/methods/addMessageString" %} + +## Edit message + +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 js tabtitle="index.jsx" %} +{% include code-snippet/chat-ui/methods/editMessage/app/index.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="index.tsx" %} +{% include code-snippet/chat-ui/methods/editMessage/app/index.tsx %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "page.domainurl/code-snippet/chat-ui/methods/editMessage" %} + +## Scroll to bottom + +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 js tabtitle="index.jsx" %} +{% include code-snippet/chat-ui/methods/scrollToBottom/app/index.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="index.tsx" %} +{% include code-snippet/chat-ui/methods/scrollToBottom/app/index.tsx %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "page.domainurl/code-snippet/chat-ui/methods/scrollToBottom" %} diff --git a/ej2-react/chat-ui/templates.md b/ej2-react/chat-ui/templates.md new file mode 100644 index 000000000..2744b9f0f --- /dev/null +++ b/ej2-react/chat-ui/templates.md @@ -0,0 +1,103 @@ +--- +layout: post +title: Templates in React Chat UI component | Syncfusion +description: Checkout and learn about Templates with React Chat UI component of Syncfusion Essential JS 2 and more details. +platform: ej2-react +control: Chat UI +documentation: ug +domainurl: ##DomainURL## +--- + +# Templates in React Chat UI component + +The Chat UI component provides several templates for customizing the appearance of the empty conversation area, messages, typing indicator, and more. These templates provide flexibility for users to create a unique, personalized chat experience. + +## Empty chat template + +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 js tabtitle="index.jsx" %} +{% include code-snippet/chat-ui/templates/emptyChatTemplate/app/index.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="index.tsx" %} +{% include code-snippet/chat-ui/templates/emptyChatTemplate/app/index.tsx %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "page.domainurl/code-snippet/chat-ui/templates/emptyChatTemplate" %} + +## Message template + +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 js tabtitle="index.jsx" %} +{% include code-snippet/chat-ui/templates/messageTemplate/app/index.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="index.tsx" %} +{% include code-snippet/chat-ui/templates/messageTemplate/app/index.tsx %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "page.domainurl/code-snippet/chat-ui/templates/messageTemplate" %} + +## Time break template + +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 js tabtitle="index.jsx" %} +{% include code-snippet/chat-ui/templates/timebreakTemplate/app/index.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="index.tsx" %} +{% include code-snippet/chat-ui/templates/timebreakTemplate/app/index.tsx %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "page.domainurl/code-snippet/chat-ui/templates/timebreakTemplate" %} + +## Typing users template + +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 js tabtitle="index.jsx" %} +{% include code-snippet/chat-ui/templates/typingUsersTemplate/app/index.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="index.tsx" %} +{% include code-snippet/chat-ui/templates/typingUsersTemplate/app/index.tsx %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "page.domainurl/code-snippet/chat-ui/templates/typingUsersTemplate" %} + +## Suggestion template + +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 js tabtitle="index.jsx" %} +{% include code-snippet/chat-ui/templates/suggestionsTemplate/app/index.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="index.tsx" %} +{% include code-snippet/chat-ui/templates/suggestionsTemplate/app/index.tsx %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "page.domainurl/code-snippet/chat-ui/templates/suggestionsTemplate" %} + +## Footer template + +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 js tabtitle="index.jsx" %} +{% include code-snippet/chat-ui/templates/footerTemplate/app/index.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="index.tsx" %} +{% include code-snippet/chat-ui/templates/footerTemplate/app/index.tsx %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "page.domainurl/code-snippet/chat-ui/templates/footerTemplate" %} diff --git a/ej2-react/chat-ui/timebreaks.md b/ej2-react/chat-ui/timebreaks.md new file mode 100644 index 000000000..40a42d1f6 --- /dev/null +++ b/ej2-react/chat-ui/timebreaks.md @@ -0,0 +1,30 @@ +--- +layout: post +title: TimeBreaks in React Chat UI component | Syncfusion +description: Checkout and learn about Timebreaks with React Chat UI component of Syncfusion Essential JS 2 and more details. +platform: ej2-react +control: Chat UI +documentation: ug +domainurl: ##DomainURL## +--- + +# Time break in React Chat UI component + +## Show or hide time breaks + +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 js tabtitle="index.jsx" %} +{% include code-snippet/chat-ui/timebreak/app/index.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="index.tsx" %} +{% include code-snippet/chat-ui/timebreak/app/index.tsx %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "page.domainurl/code-snippet/chat-ui/timebreak" %} + +## Time break template + +> Refer to the [Templates](./templates#time-break-template) section for more details about the Time break template. diff --git a/ej2-react/chat-ui/timestamp.md b/ej2-react/chat-ui/timestamp.md new file mode 100644 index 000000000..57e6323b3 --- /dev/null +++ b/ej2-react/chat-ui/timestamp.md @@ -0,0 +1,41 @@ +--- +layout: post +title: Timestamp in React Chat UI component | Syncfusion +description: Checkout and learn about Timestamp with React Chat UI component of Syncfusion Essential JS 2 and more details. +platform: ej2-react +control: Chat UI +documentation: ug +domainurl: ##DomainURL## +--- + +# Timestamp in React Chat UI component + +## Show or hide timestamp + +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 js tabtitle="index.jsx" %} +{% include code-snippet/chat-ui/timestamp/app/index.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="index.tsx" %} +{% include code-snippet/chat-ui/timestamp/app/index.tsx %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "page.domainurl/code-snippet/chat-ui/timestamp" %} + +## Setting timestamp format + +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 js tabtitle="index.jsx" %} +{% include code-snippet/chat-ui/timestampFormat/app/index.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="index.tsx" %} +{% include code-snippet/chat-ui/timestampFormat/app/index.tsx %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "page.domainurl/code-snippet/chat-ui/timestampFormat" %} diff --git a/ej2-react/chat-ui/typing-indicator.md b/ej2-react/chat-ui/typing-indicator.md new file mode 100644 index 000000000..d0694664c --- /dev/null +++ b/ej2-react/chat-ui/typing-indicator.md @@ -0,0 +1,32 @@ +--- +layout: post +title: Typing Indicator in React Chat UI component | Syncfusion +description: Checkout and learn about Typing Indicator with React Chat UI component of Syncfusion Essential JS 2 and more details. +platform: ej2-react +control: Chat UI +documentation: ug +domainurl: ##DomainURL## +--- + +# Typing Indicator in React Chat UI component + +## Show or hide typing indicator + +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 js tabtitle="index.jsx" %} +{% include code-snippet/chat-ui/typingUsers/app/index.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="index.tsx" %} +{% include code-snippet/chat-ui/typingUsers/app/index.tsx %} +{% 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-react/chips/accessibility.md b/ej2-react/chips/accessibility.md index 52037f3de..b44d9dffa 100644 --- a/ej2-react/chips/accessibility.md +++ b/ej2-react/chips/accessibility.md @@ -10,7 +10,7 @@ domainurl: ##DomainURL## # Accessibility in React Chips component -The Chips component followed the accessibility guidelines and standards, including [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), [WCAG 2.2](https://www.w3.org/TR/WCAG22/) standards, and [WCAG roles](https://www.w3.org/TR/wai-aria/#roles) that are commonly used to evaluate accessibility. +The Chips component follows the accessibility guidelines and standards, including [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), [WCAG 2.2](https://www.w3.org/TR/WCAG22/) standards, and [WCAG roles](https://www.w3.org/TR/wai-aria/#roles) that are commonly used to evaluate accessibility. The accessibility compliance for the Chips component is outlined below. @@ -40,7 +40,7 @@ The accessibility compliance for the Chips component is outlined below. ## WAI-ARIA attributes -The Chips component followed the [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/patterns/) patterns to meet the accessibility. The following ARIA attributes are used in the Chips component: +The Chips component follows the [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/patterns/) patterns to meet the accessibility. The following ARIA attributes are used in the Chips component: | Attributes | Purpose | | --- | --- | @@ -54,7 +54,7 @@ The Chips component followed the [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/patt ## Keyboard interaction -The Chips component followed the [keyboard interaction](https://www.w3.org/WAI/ARIA/apg/patterns/button/#keyboardinteraction) guideline, making it easy for people who use assistive technologies (AT) and those who completely rely on keyboard navigation. The following keyboard shortcuts are supported by the Chips component. +The Chips component follows the [keyboard interaction](https://www.w3.org/WAI/ARIA/apg/patterns/button/#keyboardinteraction) guideline, making it easy for people who use assistive technologies (AT) and those who completely rely entirely on keyboard navigation. The following keyboard shortcuts are supported by the Chips component. | Keyboard shortcuts | Actions | |------------|-------------------| @@ -63,7 +63,7 @@ The Chips component followed the [keyboard interaction](https://www.w3.org/WAI/A ## Ensuring accessibility -The Chips component's accessibility levels are ensured through an [accessibility-checker](https://www.npmjs.com/package/accessibility-checker) and [axe-core](https://www.npmjs.com/package/axe-core) software tools during automated testing. +The Chips component's accessibility levels are ensured through an [accessibility-checker](https://www.npmjs.com/package/accessibility-checker) and [axe-core](https://www.npmjs.com/package/axe-core) software tools, during automated testing. The accessibility compliance of the Chips component is shown in the following sample. Open the [sample](https://ej2.syncfusion.com/accessibility/chips.html) in a new window to evaluate the accessibility of the Chips component with accessibility tools. @@ -71,4 +71,4 @@ The accessibility compliance of the Chips component is shown in the following sa ## See also -* [Accessibility in Syncfusion React components](../common/accessibility) +* [Accessibility in Syncfusion React Components](../common/accessibility) diff --git a/ej2-react/chips/customization.md b/ej2-react/chips/customization.md index 9b2709e30..e05a97da9 100644 --- a/ej2-react/chips/customization.md +++ b/ej2-react/chips/customization.md @@ -10,11 +10,11 @@ domainurl: ##DomainURL## # Customization in React Chips component -This section explains the customization of styles, leading icons, avatar, and trailing icons in Chip control. +This section explains how to customize styles, leading icons, avatar, and trailing icons in the Chip component. ## Styles -The Chip control has the following predefined styles that can be defined using the `cssClass` property. +The Chip component has the following predefined styles that can be defined using the [cssClass](https://ej2.syncfusion.com/react/documentation/api/chips/#cssclass) property. | Class | Description | | -------- | -------- | @@ -31,13 +31,19 @@ The Chip control has the following predefined styles that can be defined using t {% highlight ts tabtitle="app.tsx" %} {% include code-snippet/chips/default-cs1/app/app.tsx %} {% endhighlight %} +{% highlight ts tabtitle="index.css" %} +{% include code-snippet/chips/default-cs1/index.css %} +{% endhighlight %} +{% highlight ts tabtitle="index.html" %} +{% include code-snippet/chips/default-cs1/index.html %} +{% endhighlight %} {% endtabs %} {% previewsample "page.domainurl/code-snippet/chips/default-cs1" %} ## Leading Icon -You can add and customize the leading icon of chip using the `leadingIconCss` property. +You can add and customize the leading icon of a chip using the [leadingIconCss](https://ej2.syncfusion.com/react/documentation/api/chips/#leadingiconcss) property. {% tabs %} {% highlight js tabtitle="app.jsx" %} @@ -46,13 +52,19 @@ You can add and customize the leading icon of chip using the `leadingIconCss` pr {% highlight ts tabtitle="app.tsx" %} {% include code-snippet/chips/avatar-cs2/app/app.tsx %} {% endhighlight %} +{% highlight ts tabtitle="index.css" %} +{% include code-snippet/chips/avatar-cs2/index.css %} +{% endhighlight %} +{% highlight ts tabtitle="index.html" %} +{% include code-snippet/chips/avatar-cs2/index.html %} +{% endhighlight %} {% endtabs %} {% previewsample "page.domainurl/code-snippet/chips/avatar-cs2" %} ## Avatar -You can add and customize the avatar of chip using the `avatarIconCss` property. +You can add and customize the avatar of a chip using the [avatarIconCss](https://ej2.syncfusion.com/react/documentation/api/chips/#avatariconcss) property. {% tabs %} {% highlight js tabtitle="app.jsx" %} @@ -61,13 +73,19 @@ You can add and customize the avatar of chip using the `avatarIconCss` property. {% highlight ts tabtitle="app.tsx" %} {% include code-snippet/chips/avatar-cs3/app/app.tsx %} {% endhighlight %} +{% highlight ts tabtitle="index.css" %} +{% include code-snippet/chips/avatar-cs3/index.css %} +{% endhighlight %} +{% highlight ts tabtitle="index.html" %} +{% include code-snippet/chips/avatar-cs3/index.html %} +{% endhighlight %} {% endtabs %} {% previewsample "page.domainurl/code-snippet/chips/avatar-cs3" %} ## Avatar Content -You can add and customize the avatar content of chip using the `avatarText` property. +You can add and customize the avatar content of a chip using the [avatarText](https://ej2.syncfusion.com/react/documentation/api/chips/#avatartext) property. {% tabs %} {% highlight js tabtitle="app.jsx" %} @@ -76,13 +94,19 @@ You can add and customize the avatar content of chip using the `avatarText` prop {% highlight ts tabtitle="app.tsx" %} {% include code-snippet/chips/avatar-cs4/app/app.tsx %} {% endhighlight %} +{% highlight ts tabtitle="index.css" %} +{% include code-snippet/chips/avatar-cs4/index.css %} +{% endhighlight %} +{% highlight ts tabtitle="index.html" %} +{% include code-snippet/chips/avatar-cs4/index.html %} +{% endhighlight %} {% endtabs %} {% previewsample "page.domainurl/code-snippet/chips/avatar-cs4" %} ## Trailing Icon -You can add and customize the trailing icon of chip using the `trailingIconCss` property. +You can add and customize the trailing icon of a chip using the [trailingIconCss](https://ej2.syncfusion.com/react/documentation/api/chips/#trailingiconcss) property. {% tabs %} {% highlight js tabtitle="app.jsx" %} @@ -91,13 +115,19 @@ You can add and customize the trailing icon of chip using the `trailingIconCss` {% highlight ts tabtitle="app.tsx" %} {% include code-snippet/chips/avatar-cs5/app/app.tsx %} {% endhighlight %} +{% highlight ts tabtitle="index.css" %} +{% include code-snippet/chips/avatar-cs5/index.css %} +{% endhighlight %} +{% highlight ts tabtitle="index.html" %} +{% include code-snippet/chips/avatar-cs5/index.html %} +{% endhighlight %} {% endtabs %} {% previewsample "page.domainurl/code-snippet/chips/avatar-cs5" %} ## Outline Chip -Outline chip has the border with the background transparent. It can be set using the `cssClass` property. +An outline chip has a border with a transparent background. It can be set using the [cssClass](https://ej2.syncfusion.com/react/documentation/api/chips/#cssclass) property. {% tabs %} {% highlight js tabtitle="app.jsx" %} @@ -106,6 +136,34 @@ Outline chip has the border with the background transparent. It can be set using {% highlight ts tabtitle="app.tsx" %} {% include code-snippet/chips/avatar-cs6/app/app.tsx %} {% endhighlight %} +{% highlight ts tabtitle="index.css" %} +{% include code-snippet/chips/avatar-cs6/index.css %} +{% endhighlight %} +{% highlight ts tabtitle="index.html" %} +{% include code-snippet/chips/avatar-cs6/index.html %} +{% endhighlight %} {% endtabs %} {% previewsample "page.domainurl/code-snippet/chips/avatar-cs6" %} + +## Template + +The [`template`](https://helpej2.syncfusion.com/react/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 js tabtitle="app.jsx" %} +{% include code-snippet/chips/avatar-cs7/app/app.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="app.tsx" %} +{% include code-snippet/chips/avatar-cs7/app/app.tsx %} +{% endhighlight %} +{% highlight ts tabtitle="index.css" %} +{% include code-snippet/chips/avatar-cs7/index.css %} +{% endhighlight %} +{% highlight ts tabtitle="index.html" %} +{% include code-snippet/chips/avatar-cs7/index.html %} +{% endhighlight %} +{% endtabs %} + + {% previewsample "page.domainurl/code-snippet/chips/avatar-cs7" %} diff --git a/ej2-react/chips/getting-started.md b/ej2-react/chips/getting-started.md index c5f881200..f57d5c2dc 100644 --- a/ej2-react/chips/getting-started.md +++ b/ej2-react/chips/getting-started.md @@ -113,6 +113,12 @@ The following example shows a basic Chip component. {% highlight ts tabtitle="app.tsx" %} {% include code-snippet/chips/default-cs2/app/app.tsx %} {% endhighlight %} +{% highlight ts tabtitle="index.css" %} +{% include code-snippet/chips/default-cs2/index.css %} +{% endhighlight %} +{% highlight js tabtitle="index.html" %} +{% include code-snippet/chips/default-cs2/index.html %} +{% endhighlight %} {% endtabs %} {% previewsample "page.domainurl/code-snippet/chips/default-cs2" %} diff --git a/ej2-react/chips/style.md b/ej2-react/chips/style.md index be8c13e47..b9b8906ea 100644 --- a/ej2-react/chips/style.md +++ b/ej2-react/chips/style.md @@ -10,7 +10,7 @@ domainurl: ##DomainURL## # Style in React Chips component -The following content provides the exact CSS structure that can be used to modify the control's appearance based on the user preference. +The following content provides the exact CSS structure that can be used to modify the component's appearance based on user preferences. ## Customizing the chip text @@ -37,7 +37,7 @@ Use the following CSS to customize the chip icon properties. ## Customizing the chip delete button -Use the following CSS to customize the chip delete button. +Use the following CSS to customize the chip delete button appearance. ```css .e-chip-list .e-chip .e-chip-delete.e-dlt-btn { diff --git a/ej2-react/chips/types.md b/ej2-react/chips/types.md index 181653233..6857a9567 100644 --- a/ej2-react/chips/types.md +++ b/ej2-react/chips/types.md @@ -10,7 +10,7 @@ domainurl: ##DomainURL## # Types in React Chips component -The ChipList control has the following types. +The ChipList component has the following types. * Input Chip * Choice Chip @@ -19,7 +19,7 @@ The ChipList control has the following types. ## Input Chip -Input Chip holds information in compact form. It converts user input into chips. +Input Chip holds information in compact form. It allows converting user input into chips. {% tabs %} {% highlight js tabtitle="app.jsx" %} @@ -28,13 +28,19 @@ Input Chip holds information in compact form. It converts user input into chips. {% highlight ts tabtitle="app.tsx" %} {% include code-snippet/chips/default-cs3/app/app.tsx %} {% endhighlight %} +{% highlight ts tabtitle="index.css" %} +{% include code-snippet/chips/default-cs3/index.css %} +{% endhighlight %} +{% highlight ts tabtitle="index.html" %} +{% include code-snippet/chips/default-cs3/index.html %} +{% endhighlight %} {% endtabs %} {% previewsample "page.domainurl/code-snippet/chips/default-cs3" %} ## Choice Chip -Choice Chip allows you to select a single chip from the set of ChipList/ChipCollection. It can be enabled by setting the `selection` property to `Single`. +Choice Chip allows you to select a single chip from a set of ChipList/ChipCollection items. This can be enabled by setting the [selection](https://ej2.syncfusion.com/react/documentation/api/chips/selection/) property to `Single`. {% tabs %} {% highlight js tabtitle="app.jsx" %} @@ -43,13 +49,19 @@ Choice Chip allows you to select a single chip from the set of ChipList/ChipColl {% highlight ts tabtitle="app.tsx" %} {% include code-snippet/chips/default-cs4/app/app.tsx %} {% endhighlight %} +{% highlight ts tabtitle="index.css" %} +{% include code-snippet/chips/default-cs4/index.css %} +{% endhighlight %} +{% highlight ts tabtitle="index.html" %} +{% include code-snippet/chips/default-cs4/index.html %} +{% endhighlight %} {% endtabs %} {% previewsample "page.domainurl/code-snippet/chips/default-cs4" %} ## Filter Chip -Filter Chip allows you to select a multiple chip from the set of ChipList/ChipCollection. It can be enabled by setting the `selection` property to `Multiple`. +Filter Chip allows you to select multiple chip from a set of ChipList/ChipCollection items. This can be enabled by setting the [selection](https://ej2.syncfusion.com/react/documentation/api/chips/selection/) property to `Multiple`. {% tabs %} {% highlight js tabtitle="app.jsx" %} @@ -58,13 +70,19 @@ Filter Chip allows you to select a multiple chip from the set of ChipList/ChipCo {% highlight ts tabtitle="app.tsx" %} {% include code-snippet/chips/default-cs5/app/app.tsx %} {% endhighlight %} +{% highlight ts tabtitle="index.css" %} +{% include code-snippet/chips/default-cs5/index.css %} +{% endhighlight %} +{% highlight ts tabtitle="index.html" %} +{% include code-snippet/chips/default-cs5/index.html %} +{% endhighlight %} {% endtabs %} {% previewsample "page.domainurl/code-snippet/chips/default-cs5" %} ## Action Chip -The Action Chip triggers the event like click or delete, which helps doing action based on the event. +The Action Chip triggers events like click or delete, allowing actions to be performed based on these events. {% tabs %} {% highlight js tabtitle="app.jsx" %} @@ -73,13 +91,19 @@ The Action Chip triggers the event like click or delete, which helps doing actio {% highlight ts tabtitle="app.tsx" %} {% include code-snippet/chips/default-cs6/app/app.tsx %} {% endhighlight %} +{% highlight ts tabtitle="index.css" %} +{% include code-snippet/chips/default-cs6/index.css %} +{% endhighlight %} +{% highlight ts tabtitle="index.html" %} +{% include code-snippet/chips/default-cs6/index.html %} +{% endhighlight %} {% endtabs %} {% previewsample "page.domainurl/code-snippet/chips/default-cs6" %} ### Deletable Chip -Deletable Chip allows you to delete a chip from ChipList/ChipCollection. It can be enabled by setting the `enableDelete` property to `true`. +Deletable Chip allows users to delete a chip from ChipList/ChipCollection. This feature can be enabled by setting the [enableDelete](https://ej2.syncfusion.com/react/documentation/api/chips/#enabledelete) property to `true`. {% tabs %} {% highlight js tabtitle="app.jsx" %} @@ -88,6 +112,12 @@ Deletable Chip allows you to delete a chip from ChipList/ChipCollection. It can {% highlight ts tabtitle="app.tsx" %} {% include code-snippet/chips/default-cs7/app/app.tsx %} {% endhighlight %} +{% highlight ts tabtitle="index.css" %} +{% include code-snippet/chips/default-cs7/index.css %} +{% endhighlight %} +{% highlight ts tabtitle="index.html" %} +{% include code-snippet/chips/default-cs7/index.html %} +{% endhighlight %} {% endtabs %} {% previewsample "page.domainurl/code-snippet/chips/default-cs7" %} diff --git a/ej2-react/circular-gauge/gauge-pointers.md b/ej2-react/circular-gauge/gauge-pointers.md index 94b5524b3..35813fb5b 100644 --- a/ej2-react/circular-gauge/gauge-pointers.md +++ b/ej2-react/circular-gauge/gauge-pointers.md @@ -154,7 +154,7 @@ The marker can be customized in terms of color, border, width and height by usin ## Dragging pointer -The pointers can be dragged over the axis values by clicking and dragging the same. To enable or disable the pointer drag, use the [`enablePointerDrag`](https://ej2.syncfusion.com/react/documentation/api/circular-gauge/circularGaugeModel/#enablepointerdrag) property. +The pointers can be dragged along the axis line by clicking and dragging them. To enable or disable the drag functionality for all pointers across all axes, use the [enablePointerDrag](https://ej2.syncfusion.com/react/documentation/api/circular-gauge/circularGaugeModel/#enablepointerdrag) property. When this property is set to **true**, all pointers can be dynamically adjusted by dragging. Setting it to **false** keeps all pointers fixed in their specified positions. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -167,6 +167,25 @@ The pointers can be dragged over the axis values by clicking and dragging the sa {% previewsample "page.domainurl/code-snippet/circulargauge/gauge-pointers-cs10" %} +### Enabling drag functionality for a specific pointer + +To enable or disable the drag functionality for specific pointers along the axis line, use the [enableDrag](https://ej2.syncfusion.com/react/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 %} +{% highlight js tabtitle="index.jsx" %} +{% include code-snippet/circulargauge/gauge-pointers-drag-cs1/app/index.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="index.tsx" %} +{% include code-snippet/circulargauge/gauge-pointers-drag-cs1/app/index.tsx %} +{% endhighlight %} +{% endtabs %} + + {% previewsample "page.domainurl/code-snippet/circulargauge/gauge-pointers-drag-cs1 " %} + ## Multiple Pointers In addition to the default pointer, you can add n number of pointer to an axis by using `pointers` property. diff --git a/ej2-react/code-snippet/ai-assistview/appearance/width/index.css b/ej2-react/code-snippet/ai-assistview/appearance/width/index.css index 95fc70989..9c2f79467 100644 --- a/ej2-react/code-snippet/ai-assistview/appearance/width/index.css +++ b/ej2-react/code-snippet/ai-assistview/appearance/width/index.css @@ -8,6 +8,6 @@ width: 30%; } -#container { +#aiAssistView { margin: 20px auto; } \ No newline at end of file diff --git a/ej2-react/code-snippet/ai-assistview/methods/execute-prompt/index.css b/ej2-react/code-snippet/ai-assistview/methods/execute-prompt/index.css index a0ccd0f8e..588ed4873 100644 --- a/ej2-react/code-snippet/ai-assistview/methods/execute-prompt/index.css +++ b/ej2-react/code-snippet/ai-assistview/methods/execute-prompt/index.css @@ -8,12 +8,10 @@ width: 30%; } -#container { - margin: 20px auto; -} .aiAssistContainer { height: 350px; width: 650px; + margin: 20px auto; } #executePrompt { margin-bottom: 10px; diff --git a/ej2-react/code-snippet/ai-assistview/methods/object-response/index.css b/ej2-react/code-snippet/ai-assistview/methods/object-response/index.css index 6816f5453..d099b138e 100644 --- a/ej2-react/code-snippet/ai-assistview/methods/object-response/index.css +++ b/ej2-react/code-snippet/ai-assistview/methods/object-response/index.css @@ -8,12 +8,10 @@ width: 30%; } -#container { - margin: 20px auto; -} .aiAssistContainer { height: 350px; width: 650px; + margin: 20px auto; } #addObjectResponse { margin-bottom: 10px; diff --git a/ej2-react/code-snippet/ai-assistview/methods/string-response/index.css b/ej2-react/code-snippet/ai-assistview/methods/string-response/index.css index faf9a2d68..0c2074fe3 100644 --- a/ej2-react/code-snippet/ai-assistview/methods/string-response/index.css +++ b/ej2-react/code-snippet/ai-assistview/methods/string-response/index.css @@ -8,13 +8,10 @@ width: 30%; } - -#container { - margin: 20px auto; -} .aiAssistContainer { height: 350px; width: 650px; + margin: 20px auto; } #addStringResponse { margin-bottom: 10px; diff --git a/ej2-react/code-snippet/ai-assistview/template/prompt-item-template/app/index.jsx b/ej2-react/code-snippet/ai-assistview/template/prompt-item-template/app/index.jsx index ee3c9e001..d6d6ddaf1 100644 --- a/ej2-react/code-snippet/ai-assistview/template/prompt-item-template/app/index.jsx +++ b/ej2-react/code-snippet/ai-assistview/template/prompt-item-template/app/index.jsx @@ -13,7 +13,7 @@ function App() { You-${prompt}+{prompt}); }; diff --git a/ej2-react/code-snippet/ai-assistview/template/prompt-item-template/app/index.tsx b/ej2-react/code-snippet/ai-assistview/template/prompt-item-template/app/index.tsx index ba273441e..c43292cea 100644 --- a/ej2-react/code-snippet/ai-assistview/template/prompt-item-template/app/index.tsx +++ b/ej2-react/code-snippet/ai-assistview/template/prompt-item-template/app/index.tsx @@ -13,7 +13,7 @@ function App() {You-${prompt}+{prompt}); }; diff --git a/ej2-react/code-snippet/autocomplete/basic-cs30/app/index.jsx b/ej2-react/code-snippet/autocomplete/basic-cs30/app/index.jsx new file mode 100644 index 000000000..9a5f4bbcd --- /dev/null +++ b/ej2-react/code-snippet/autocomplete/basic-cs30/app/index.jsx @@ -0,0 +1,38 @@ +import { AutoCompleteComponent } from '@syncfusion/ej2-react-dropdowns'; +import * as React from 'react'; +import * as ReactDOM from 'react-dom'; +export default class App extends React.Component { + // define the data with category + statusData = [ + { "Status": "Open", "State": false }, + { "Status": "Waiting for Customer", "State": false }, + { "Status": "On Hold", "State": true }, + { "Status": "Follow-up", "State": false }, + { "Status": "Closed", "State": true }, + { "Status": "Solved", "State": false }, + { "Status": "Feature Request", "State": false }, + { "Status": "In Progress", "State": false }, + { "Status": "Pending", "State": true }, + { "Status": "Escalated", "State": true }, + { "Status": "New", "State": false }, + { "Status": "Under Review", "State": true }, + { "Status": "Reopened", "State": false }, + { "Status": "Approved", "State": true }, + { "Status": "Awaiting Approval", "State": false }, + { "Status": "Scheduled", "State": false }, + { "Status": "Canceled", "State": true }, + { "Status": "Completed", "State": true }, + { "Status": "Acknowledged", "State": false }, + { "Status": "In Development", "State": false } + ]; + // map the groupBy field with Category column + fields = { value: 'Status' }; + // set true for enable the resize property to AutoComplete + allowResize = true ; + render() { + return ( + // specifies the tag for render the AutoComplete component +); + } +} +ReactDOM.render( , document.getElementById('sample')); diff --git a/ej2-react/code-snippet/autocomplete/basic-cs30/app/index.tsx b/ej2-react/code-snippet/autocomplete/basic-cs30/app/index.tsx new file mode 100644 index 000000000..32d42d818 --- /dev/null +++ b/ej2-react/code-snippet/autocomplete/basic-cs30/app/index.tsx @@ -0,0 +1,47 @@ + + + +import { AutoCompleteComponent } from '@syncfusion/ej2-react-dropdowns'; +import * as React from 'react'; +import * as ReactDOM from 'react-dom'; + +export default class App extends React.Component<{}, {}> { + // define the data with category + private statusData: { [key: string]: Object }[] = [ + { "Status": "Open", "State": false }, + { "Status": "Waiting for Customer", "State": false }, + { "Status": "On Hold", "State": true }, + { "Status": "Follow-up", "State": false }, + { "Status": "Closed", "State": true }, + { "Status": "Solved", "State": false }, + { "Status": "Feature Request", "State": false }, + { "Status": "In Progress", "State": false }, + { "Status": "Pending", "State": true }, + { "Status": "Escalated", "State": true }, + { "Status": "New", "State": false }, + { "Status": "Under Review", "State": true }, + { "Status": "Reopened", "State": false }, + { "Status": "Approved", "State": true }, + { "Status": "Awaiting Approval", "State": false }, + { "Status": "Scheduled", "State": false }, + { "Status": "Canceled", "State": true }, + { "Status": "Completed", "State": true }, + { "Status": "Acknowledged", "State": false }, + { "Status": "In Development", "State": false } + ]; + + // map the groupBy field with Category column + private fields: object = { value: 'Status' }; + // set true for enable the resize property to AutoComplete + private allowResize = true ; + + public render() { + return ( + // specifies the tag for render the AutoComplete component + + ); + } +} +ReactDOM.render( , document.getElementById('sample')); + + diff --git a/ej2-react/code-snippet/autocomplete/basic-cs30/index.html b/ej2-react/code-snippet/autocomplete/basic-cs30/index.html new file mode 100644 index 000000000..2533e0955 --- /dev/null +++ b/ej2-react/code-snippet/autocomplete/basic-cs30/index.html @@ -0,0 +1,33 @@ + + + + + Syncfusion React AutoComplete + + + + + + + + + + + + + +++ + + \ No newline at end of file diff --git a/ej2-react/code-snippet/autocomplete/basic-cs30/systemjs.config.js b/ej2-react/code-snippet/autocomplete/basic-cs30/systemjs.config.js new file mode 100644 index 000000000..1f3a26c84 --- /dev/null +++ b/ej2-react/code-snippet/autocomplete/basic-cs30/systemjs.config.js @@ -0,0 +1,45 @@ +System.config({ + transpiler: "ts", + typescriptOptions: { + target: "es5", + module: "commonjs", + moduleResolution: "node", + emitDecoratorMetadata: true, + experimentalDecorators: true, + "jsx": "react" + }, + meta: { + 'typescript': { + "exports": "ts" + } + }, + paths: { + "syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/" + }, + map: { + app: 'app', + ts: "https://unpkg.com/plugin-typescript@4.0.10/lib/plugin.js", + typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js", + "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js", + "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js", + "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", + "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", + "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js", + "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", + "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", + "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", + "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", + "@syncfusion/ej2-notifications":"syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js", + + "@syncfusion/ej2-react-base": "syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js", + "@syncfusion/ej2-react-dropdowns": "syncfusion:ej2-react-dropdowns/dist/ej2-react-dropdowns.umd.min.js", + "react-dom":"https://unpkg.com/react-dom@16.3.1/umd/react-dom.production.min.js", + "react":"https://unpkg.com/react@16.3.1/umd/react.production.min.js", + }, + packages: { + 'app': { main: 'index', defaultExtension: 'tsx' }, + } + +}); + +System.import('app'); \ No newline at end of file diff --git a/ej2-react/code-snippet/autocomplete/basic-cs31/app/index.jsx b/ej2-react/code-snippet/autocomplete/basic-cs31/app/index.jsx new file mode 100644 index 000000000..d7a3d86eb --- /dev/null +++ b/ej2-react/code-snippet/autocomplete/basic-cs31/app/index.jsx @@ -0,0 +1,35 @@ +import { AutoCompleteComponent } from '@syncfusion/ej2-react-dropdowns'; +import * as React from 'react'; +import * as ReactDOM from 'react-dom'; +function App() { + // define the data with category + let statusData = [ + { "Status": "Open", "State": false }, + { "Status": "Waiting for Customer", "State": false }, + { "Status": "On Hold", "State": true }, + { "Status": "Follow-up", "State": false }, + { "Status": "Closed", "State": true }, + { "Status": "Solved", "State": false }, + { "Status": "Feature Request", "State": false }, + { "Status": "In Progress", "State": false }, + { "Status": "Pending", "State": true }, + { "Status": "Escalated", "State": true }, + { "Status": "New", "State": false }, + { "Status": "Under Review", "State": true }, + { "Status": "Reopened", "State": false }, + { "Status": "Approved", "State": true }, + { "Status": "Awaiting Approval", "State": false }, + { "Status": "Scheduled", "State": false }, + { "Status": "Canceled", "State": true }, + { "Status": "Completed", "State": true }, + { "Status": "Acknowledged", "State": false }, + { "Status": "In Development", "State": false } + ]; + // map the groupBy field with Category column + const fields = { value: 'Status' }; + let allowResize = true; + return ( + // specifies the tag for render the AutoComplete component +Loading....+); +} +ReactDOM.render( , document.getElementById('sample')); diff --git a/ej2-react/code-snippet/autocomplete/basic-cs31/app/index.tsx b/ej2-react/code-snippet/autocomplete/basic-cs31/app/index.tsx new file mode 100644 index 000000000..3b89f0f62 --- /dev/null +++ b/ej2-react/code-snippet/autocomplete/basic-cs31/app/index.tsx @@ -0,0 +1,42 @@ + + +import { AutoCompleteComponent } from '@syncfusion/ej2-react-dropdowns'; +import * as React from 'react'; +import * as ReactDOM from 'react-dom'; + +function App() { + // define the data with category + let statusData: { [key: string]: Object }[] = [ + { "Status": "Open", "State": false }, + { "Status": "Waiting for Customer", "State": false }, + { "Status": "On Hold", "State": true }, + { "Status": "Follow-up", "State": false }, + { "Status": "Closed", "State": true }, + { "Status": "Solved", "State": false }, + { "Status": "Feature Request", "State": false }, + { "Status": "In Progress", "State": false }, + { "Status": "Pending", "State": true }, + { "Status": "Escalated", "State": true }, + { "Status": "New", "State": false }, + { "Status": "Under Review", "State": true }, + { "Status": "Reopened", "State": false }, + { "Status": "Approved", "State": true }, + { "Status": "Awaiting Approval", "State": false }, + { "Status": "Scheduled", "State": false }, + { "Status": "Canceled", "State": true }, + { "Status": "Completed", "State": true }, + { "Status": "Acknowledged", "State": false }, + { "Status": "In Development", "State": false } + ]; + + // map the groupBy field with Category column + const fields: object = { value: 'Status' }; + let allowResize = true; + return ( + // specifies the tag for render the AutoComplete component + + ); +} +ReactDOM.render( , document.getElementById('sample')); + + diff --git a/ej2-react/code-snippet/autocomplete/basic-cs31/index.html b/ej2-react/code-snippet/autocomplete/basic-cs31/index.html new file mode 100644 index 000000000..2533e0955 --- /dev/null +++ b/ej2-react/code-snippet/autocomplete/basic-cs31/index.html @@ -0,0 +1,33 @@ + + + + + Syncfusion React AutoComplete + + + + + + + + + + + + + +++ + + \ No newline at end of file diff --git a/ej2-react/code-snippet/autocomplete/basic-cs31/systemjs.config.js b/ej2-react/code-snippet/autocomplete/basic-cs31/systemjs.config.js new file mode 100644 index 000000000..1f3a26c84 --- /dev/null +++ b/ej2-react/code-snippet/autocomplete/basic-cs31/systemjs.config.js @@ -0,0 +1,45 @@ +System.config({ + transpiler: "ts", + typescriptOptions: { + target: "es5", + module: "commonjs", + moduleResolution: "node", + emitDecoratorMetadata: true, + experimentalDecorators: true, + "jsx": "react" + }, + meta: { + 'typescript': { + "exports": "ts" + } + }, + paths: { + "syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/" + }, + map: { + app: 'app', + ts: "https://unpkg.com/plugin-typescript@4.0.10/lib/plugin.js", + typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js", + "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js", + "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js", + "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", + "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", + "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js", + "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", + "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", + "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", + "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", + "@syncfusion/ej2-notifications":"syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js", + + "@syncfusion/ej2-react-base": "syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js", + "@syncfusion/ej2-react-dropdowns": "syncfusion:ej2-react-dropdowns/dist/ej2-react-dropdowns.umd.min.js", + "react-dom":"https://unpkg.com/react-dom@16.3.1/umd/react-dom.production.min.js", + "react":"https://unpkg.com/react@16.3.1/umd/react.production.min.js", + }, + packages: { + 'app': { main: 'index', defaultExtension: 'tsx' }, + } + +}); + +System.import('app'); \ No newline at end of file diff --git a/ej2-react/code-snippet/avatar/badge-cs1/app/index.jsx b/ej2-react/code-snippet/avatar/badge-cs1/app/index.jsx index 1b41a0f13..794157f6d 100644 --- a/ej2-react/code-snippet/avatar/badge-cs1/app/index.jsx +++ b/ej2-react/code-snippet/avatar/badge-cs1/app/index.jsx @@ -1,5 +1,7 @@ import * as React from "react"; import * as ReactDOM from "react-dom"; +import './index.css'; + function ReactApp() { return (Loading....+diff --git a/ej2-react/code-snippet/avatar/circle-cs1/app/index.jsx b/ej2-react/code-snippet/avatar/circle-cs1/app/index.jsx index 60b4d54dc..80d447db9 100644 --- a/ej2-react/code-snippet/avatar/circle-cs1/app/index.jsx +++ b/ej2-react/code-snippet/avatar/circle-cs1/app/index.jsx @@ -1,5 +1,6 @@ import * as React from "react"; import * as ReactDOM from "react-dom"; +import "./index.css"; function ReactApp() { return (SJ diff --git a/ej2-react/code-snippet/avatar/color-cs1/app/index.jsx b/ej2-react/code-snippet/avatar/color-cs1/app/index.jsx index 911fdecff..e30655038 100644 --- a/ej2-react/code-snippet/avatar/color-cs1/app/index.jsx +++ b/ej2-react/code-snippet/avatar/color-cs1/app/index.jsx @@ -1,5 +1,6 @@ import * as React from "react"; import * as ReactDOM from "react-dom"; +import "./index.css"; function ReactApp() { return (AJ diff --git a/ej2-react/code-snippet/avatar/custom-size-cs1/app/index.jsx b/ej2-react/code-snippet/avatar/custom-size-cs1/app/index.jsx index e852936fe..6e06ab1b0 100644 --- a/ej2-react/code-snippet/avatar/custom-size-cs1/app/index.jsx +++ b/ej2-react/code-snippet/avatar/custom-size-cs1/app/index.jsx @@ -1,5 +1,6 @@ import * as React from "react"; import * as ReactDOM from "react-dom"; +import "./index.css"; function ReactApp() { return (diff --git a/ej2-react/code-snippet/avatar/default-cs1/app/index.jsx b/ej2-react/code-snippet/avatar/default-cs1/app/index.jsx index cc56a1442..16fc88b1c 100644 --- a/ej2-react/code-snippet/avatar/default-cs1/app/index.jsx +++ b/ej2-react/code-snippet/avatar/default-cs1/app/index.jsx @@ -1,5 +1,6 @@ import * as React from "react"; -import * as ReactDOM from "react-dom"; +import * as ReactDom from "react-dom"; +import './index.css'; function ReactApp() { return (RT @@ -10,4 +11,4 @@ function ReactApp() {); } export default ReactApp; -ReactDOM.render(, document.getElementById("element")); +ReactDom.render( , document.getElementById("element")); diff --git a/ej2-react/code-snippet/avatar/default-cs1/app/index.tsx b/ej2-react/code-snippet/avatar/default-cs1/app/index.tsx index 7676bc5c1..2124f6d38 100644 --- a/ej2-react/code-snippet/avatar/default-cs1/app/index.tsx +++ b/ej2-react/code-snippet/avatar/default-cs1/app/index.tsx @@ -1,7 +1,7 @@ import * as React from "react"; -import * as ReactDOM from "react-dom"; +import * as ReactDom from "react-dom"; function ReactApp() { return ( @@ -15,6 +15,6 @@ function ReactApp() { ); } export default ReactApp; -ReactDOM.render( , document.getElementById("element")); +ReactDom.render( , document.getElementById("element")); diff --git a/ej2-react/code-snippet/avatar/getting-started-cs1/app/index.jsx b/ej2-react/code-snippet/avatar/getting-started-cs1/app/index.jsx index 7269b2f16..99937e97c 100644 --- a/ej2-react/code-snippet/avatar/getting-started-cs1/app/index.jsx +++ b/ej2-react/code-snippet/avatar/getting-started-cs1/app/index.jsx @@ -1,5 +1,6 @@ import * as React from "react"; -import * as ReactDOM from "react-dom"; +import * as ReactDom from "react-dom"; +import './index.css'; function ReactApp() { return ( @@ -10,4 +11,4 @@ function ReactApp() {); } export default ReactApp; -ReactDOM.render(, document.getElementById("element")); +ReactDom.render( , document.getElementById("element")); diff --git a/ej2-react/code-snippet/avatar/getting-started-cs1/app/index.tsx b/ej2-react/code-snippet/avatar/getting-started-cs1/app/index.tsx index 5a44e534b..766183cbf 100644 --- a/ej2-react/code-snippet/avatar/getting-started-cs1/app/index.tsx +++ b/ej2-react/code-snippet/avatar/getting-started-cs1/app/index.tsx @@ -1,7 +1,7 @@ import * as React from "react"; -import * as ReactDOM from "react-dom"; +import * as ReactDom from "react-dom"; function ReactApp() { return ( @@ -15,6 +15,6 @@ function ReactApp() { ); } export default ReactApp; -ReactDOM.render( , document.getElementById("element")); +ReactDom.render( , document.getElementById('element')); diff --git a/ej2-react/code-snippet/avatar/listview-cs1/app/index.jsx b/ej2-react/code-snippet/avatar/listview-cs1/app/index.jsx index bd9065130..03a751da5 100644 --- a/ej2-react/code-snippet/avatar/listview-cs1/app/index.jsx +++ b/ej2-react/code-snippet/avatar/listview-cs1/app/index.jsx @@ -1,6 +1,7 @@ import * as React from "react"; import * as ReactDOM from "react-dom"; import { ListViewComponent } from '@syncfusion/ej2-react-lists'; +import "./index.css"; function ReactApp() { //Define an array of JSON data let data = [ diff --git a/ej2-react/code-snippet/avatar/media-formats-cs1/app/index.jsx b/ej2-react/code-snippet/avatar/media-formats-cs1/app/index.jsx index f44deaf65..f5ecda40a 100644 --- a/ej2-react/code-snippet/avatar/media-formats-cs1/app/index.jsx +++ b/ej2-react/code-snippet/avatar/media-formats-cs1/app/index.jsx @@ -1,5 +1,6 @@ import * as React from "react"; import * as ReactDOM from "react-dom"; +import "./index.css"; function ReactApp() { return ( diff --git a/ej2-react/code-snippet/avatar/react-avatar-cs1/app/index.jsx b/ej2-react/code-snippet/avatar/react-avatar-cs1/app/index.jsx index 0e92eaf02..a06165802 100644 --- a/ej2-react/code-snippet/avatar/react-avatar-cs1/app/index.jsx +++ b/ej2-react/code-snippet/avatar/react-avatar-cs1/app/index.jsx @@ -1,6 +1,7 @@ {% raw %} import * as React from "react"; import * as ReactDOM from "react-dom"; +import './index.css'; function ReactApp() { let dataSource = [ { id: '1', src: 'https://ej2.syncfusion.com/demos/src/grid/images/2.png', size: 'e-avatar-xsmall' }, diff --git a/ej2-react/code-snippet/avatar/size-cs1/app/index.jsx b/ej2-react/code-snippet/avatar/size-cs1/app/index.jsx index 7269b2f16..99937e97c 100644 --- a/ej2-react/code-snippet/avatar/size-cs1/app/index.jsx +++ b/ej2-react/code-snippet/avatar/size-cs1/app/index.jsx @@ -1,5 +1,6 @@ import * as React from "react"; -import * as ReactDOM from "react-dom"; +import * as ReactDom from "react-dom"; +import './index.css'; function ReactApp() { return (@@ -10,4 +11,4 @@ function ReactApp() {); } export default ReactApp; -ReactDOM.render(, document.getElementById("element")); +ReactDom.render( , document.getElementById("element")); diff --git a/ej2-react/code-snippet/avatar/size-cs1/app/index.tsx b/ej2-react/code-snippet/avatar/size-cs1/app/index.tsx index 5a44e534b..49de3909e 100644 --- a/ej2-react/code-snippet/avatar/size-cs1/app/index.tsx +++ b/ej2-react/code-snippet/avatar/size-cs1/app/index.tsx @@ -1,7 +1,7 @@ import * as React from "react"; -import * as ReactDOM from "react-dom"; +import * as ReactDom from "react-dom"; function ReactApp() { return ( @@ -15,6 +15,6 @@ function ReactApp() { ); } export default ReactApp; -ReactDOM.render( , document.getElementById("element")); +ReactDom.render( , document.getElementById("element")); diff --git a/ej2-react/code-snippet/badge/circle-cs1/app/index.jsx b/ej2-react/code-snippet/badge/circle-cs1/app/index.jsx index cd7065313..1baead2cd 100644 --- a/ej2-react/code-snippet/badge/circle-cs1/app/index.jsx +++ b/ej2-react/code-snippet/badge/circle-cs1/app/index.jsx @@ -1,5 +1,6 @@ import * as React from "react"; import * as ReactDOM from "react-dom"; +import './index.css' function App() { return ( diff --git a/ej2-react/code-snippet/badge/color-cs1/app/index.jsx b/ej2-react/code-snippet/badge/color-cs1/app/index.jsx index 3b8a07e03..a466eee4d 100644 --- a/ej2-react/code-snippet/badge/color-cs1/app/index.jsx +++ b/ej2-react/code-snippet/badge/color-cs1/app/index.jsx @@ -1,5 +1,6 @@ import * as React from "react"; import * as ReactDOM from "react-dom"; +import "./index.css"; function App() { return (Color Customization New
diff --git a/ej2-react/code-snippet/badge/custom-position-cs1/app/index.jsx b/ej2-react/code-snippet/badge/custom-position-cs1/app/index.jsx index 5b7dcab43..6af0bee2a 100644 --- a/ej2-react/code-snippet/badge/custom-position-cs1/app/index.jsx +++ b/ej2-react/code-snippet/badge/custom-position-cs1/app/index.jsx @@ -1,5 +1,6 @@ import * as React from "react"; import * as ReactDOM from "react-dom"; +import "./index.css"; function App() { return (diff --git a/ej2-react/code-snippet/badge/dot-cs1/app/index.jsx b/ej2-react/code-snippet/badge/dot-cs1/app/index.jsx index 7b02dcf9b..4f369cfe5 100644 --- a/ej2-react/code-snippet/badge/dot-cs1/app/index.jsx +++ b/ej2-react/code-snippet/badge/dot-cs1/app/index.jsx @@ -1,5 +1,6 @@ import * as React from "react"; import * as ReactDOM from "react-dom"; +import './index.css'; function App() { return (diff --git a/ej2-react/code-snippet/badge/dynamic-badge-cs1/app/index.jsx b/ej2-react/code-snippet/badge/dynamic-badge-cs1/app/index.jsx index 8fc1d6d0c..8668c060d 100644 --- a/ej2-react/code-snippet/badge/dynamic-badge-cs1/app/index.jsx +++ b/ej2-react/code-snippet/badge/dynamic-badge-cs1/app/index.jsx @@ -2,6 +2,7 @@ import * as React from "react"; import * as ReactDOM from "react-dom"; import { ListViewComponent } from '@syncfusion/ej2-react-lists'; +import './index.css'; function BadgePortable(props) { return ({props.BadgeContent} New ); diff --git a/ej2-react/code-snippet/badge/getting-started-cs1/app/index.jsx b/ej2-react/code-snippet/badge/getting-started-cs1/app/index.jsx index 939fa4472..8b75fb089 100644 --- a/ej2-react/code-snippet/badge/getting-started-cs1/app/index.jsx +++ b/ej2-react/code-snippet/badge/getting-started-cs1/app/index.jsx @@ -1,5 +1,6 @@ import * as React from "react"; import * as ReactDOM from "react-dom"; +import "./index.css"; function App() { return (Badge Component New
); } diff --git a/ej2-react/code-snippet/badge/link-cs1/app/index.jsx b/ej2-react/code-snippet/badge/link-cs1/app/index.jsx index 2de27604f..eb517737c 100644 --- a/ej2-react/code-snippet/badge/link-cs1/app/index.jsx +++ b/ej2-react/code-snippet/badge/link-cs1/app/index.jsx @@ -1,5 +1,6 @@ import * as React from "react"; import * as ReactDOM from "react-dom"; +import './index.css'; function App() { return (Link Badge diff --git a/ej2-react/code-snippet/badge/listview-cs1/app/index.jsx b/ej2-react/code-snippet/badge/listview-cs1/app/index.jsx index 17f7758fa..9ce9a4580 100644 --- a/ej2-react/code-snippet/badge/listview-cs1/app/index.jsx +++ b/ej2-react/code-snippet/badge/listview-cs1/app/index.jsx @@ -2,6 +2,7 @@ import * as React from "react"; import * as ReactDOM from "react-dom"; import { ListViewComponent } from '@syncfusion/ej2-react-lists'; +import './index.css'; function App() { // Datasource for listview, badge field is the class data for Badges let dataSource = [ diff --git a/ej2-react/code-snippet/badge/notification-cs1/app/index.jsx b/ej2-react/code-snippet/badge/notification-cs1/app/index.jsx index 35c93f3fa..65e62435f 100644 --- a/ej2-react/code-snippet/badge/notification-cs1/app/index.jsx +++ b/ej2-react/code-snippet/badge/notification-cs1/app/index.jsx @@ -1,5 +1,6 @@ import * as React from "react"; import * as ReactDOM from "react-dom"; +import './index.css' function App() { return (diff --git a/ej2-react/code-snippet/badge/overlap-cs1/app/index.jsx b/ej2-react/code-snippet/badge/overlap-cs1/app/index.jsx index 35c93f3fa..a9856900a 100644 --- a/ej2-react/code-snippet/badge/overlap-cs1/app/index.jsx +++ b/ej2-react/code-snippet/badge/overlap-cs1/app/index.jsx @@ -1,5 +1,6 @@ import * as React from "react"; import * as ReactDOM from "react-dom"; +import "./index.css"; function App() { return (diff --git a/ej2-react/code-snippet/badge/pill-cs1/app/index.jsx b/ej2-react/code-snippet/badge/pill-cs1/app/index.jsx index 66d78d7a2..efd79b5ec 100644 --- a/ej2-react/code-snippet/badge/pill-cs1/app/index.jsx +++ b/ej2-react/code-snippet/badge/pill-cs1/app/index.jsx @@ -1,5 +1,6 @@ import * as React from "react"; import * as ReactDOM from "react-dom"; +import "./index.css"; function App() { return (Badge Component New
); } diff --git a/ej2-react/code-snippet/badge/position-cs1/app/index.jsx b/ej2-react/code-snippet/badge/position-cs1/app/index.jsx index 0e8a84d0c..141c42d00 100644 --- a/ej2-react/code-snippet/badge/position-cs1/app/index.jsx +++ b/ej2-react/code-snippet/badge/position-cs1/app/index.jsx @@ -1,5 +1,6 @@ import * as React from "react"; import * as ReactDOM from "react-dom"; +import "./index.css"; function App() { return (diff --git a/ej2-react/code-snippet/badge/size-cs1/app/index.jsx b/ej2-react/code-snippet/badge/size-cs1/app/index.jsx index fab84ce54..7cb4fe3e3 100644 --- a/ej2-react/code-snippet/badge/size-cs1/app/index.jsx +++ b/ej2-react/code-snippet/badge/size-cs1/app/index.jsx @@ -1,5 +1,6 @@ import * as React from "react"; import * as ReactDOM from "react-dom"; +import "./index.css"; function App() { return (Badge Component New
diff --git a/ej2-react/code-snippet/badge/types-cs1/app/index.jsx b/ej2-react/code-snippet/badge/types-cs1/app/index.jsx index 458fb152a..d10213e1f 100644 --- a/ej2-react/code-snippet/badge/types-cs1/app/index.jsx +++ b/ej2-react/code-snippet/badge/types-cs1/app/index.jsx @@ -1,5 +1,6 @@ import * as React from "react"; import * as ReactDOM from "react-dom"; +import "./index.css"; function App() { return (diff --git a/ej2-react/code-snippet/chart/axis/legend-cs6/app/datasource.jsx b/ej2-react/code-snippet/chart/axis/legend-cs6/app/datasource.jsx new file mode 100644 index 000000000..f7be9facb --- /dev/null +++ b/ej2-react/code-snippet/chart/axis/legend-cs6/app/datasource.jsx @@ -0,0 +1,10 @@ +export let data = [ + { country: "USA", gold: 50, silver: 70, bronze: 45 }, + { country: "China", gold: 40, silver: 60, bronze: 55 }, + { country: "Japan", gold: 70, silver: 60, bronze: 50 }, + { country: "Australia", gold: 60, silver: 56, bronze: 40 }, + { country: "France", gold: 50, silver: 45, bronze: 35 }, + { country: "Germany", gold: 40, silver: 30, bronze: 22 }, + { country: "Italy", gold: 40, silver: 35, bronze: 37 }, + { country: "Sweden", gold: 30, silver: 25, bronze: 27 } +]; \ No newline at end of file diff --git a/ej2-react/code-snippet/chart/axis/legend-cs6/app/datasource.tsx b/ej2-react/code-snippet/chart/axis/legend-cs6/app/datasource.tsx new file mode 100644 index 000000000..f394b5c0e --- /dev/null +++ b/ej2-react/code-snippet/chart/axis/legend-cs6/app/datasource.tsx @@ -0,0 +1,10 @@ +export let data: Object[] = [ + { country: "USA", gold: 50, silver: 70, bronze: 45 }, + { country: "China", gold: 40, silver: 60, bronze: 55 }, + { country: "Japan", gold: 70, silver: 60, bronze: 50 }, + { country: "Australia", gold: 60, silver: 56, bronze: 40 }, + { country: "France", gold: 50, silver: 45, bronze: 35 }, + { country: "Germany", gold: 40, silver: 30, bronze: 22 }, + { country: "Italy", gold: 40, silver: 35, bronze: 37 }, + { country: "Sweden", gold: 30, silver: 25, bronze: 27 } +]; \ No newline at end of file diff --git a/ej2-react/code-snippet/chart/axis/legend-cs6/app/index.jsx b/ej2-react/code-snippet/chart/axis/legend-cs6/app/index.jsx new file mode 100644 index 000000000..151996c80 --- /dev/null +++ b/ej2-react/code-snippet/chart/axis/legend-cs6/app/index.jsx @@ -0,0 +1,56 @@ +{% raw %} + + +import * as React from "react"; +import * as ReactDOM from "react-dom"; +import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, Category, ColumnSeries } from'@syncfusion/ej2-react-charts'; +import { data } from './datasource'; + +function App() { + + const primaryxAxis = { + valueType: 'Category', + title: 'Countries' + }; + const primaryyAxis = { + minimum: 0, + maximum: 80, + interval: 20, + title: 'Medals' + }; + const legendSettings = { + visible: true, + layout: "Auto", + maximumColumns: 3, + fixedWidth: true + }; + + return+ + +}; +export default App; +ReactDOM.render(+ + ++ ++ ++ ++ ++ ++ +, document.getElementById("charts")); + + + +{% endraw %} \ No newline at end of file diff --git a/ej2-react/code-snippet/chart/axis/legend-cs6/app/index.tsx b/ej2-react/code-snippet/chart/axis/legend-cs6/app/index.tsx new file mode 100644 index 000000000..d03f60f65 --- /dev/null +++ b/ej2-react/code-snippet/chart/axis/legend-cs6/app/index.tsx @@ -0,0 +1,56 @@ +{% raw %} + + +import * as React from "react"; +import * as ReactDOM from "react-dom"; +import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, AxisModel, LegendSettingsModel, Legend, Category, ColumnSeries } from'@syncfusion/ej2-react-charts'; +import { data } from './datasource'; + +function App() { + + const primaryxAxis: AxisModel = { + valueType: 'Category', + title: 'Countries' + }; + const primaryyAxis: AxisModel = { + minimum: 0, + maximum: 80, + interval: 20, + title: 'Medals' + }; + const legendSettings: LegendSettingsModel = { + visible: true, + layout: "Auto", + maximumColumns: 3, + fixedWidth: true + }; + + return + + +}; +export default App; +ReactDOM.render(+ + ++ ++ ++ ++ ++ ++ +, document.getElementById("charts")); + + + +{% endraw %} \ No newline at end of file diff --git a/ej2-react/code-snippet/chart/axis/legend-cs6/index.html b/ej2-react/code-snippet/chart/axis/legend-cs6/index.html new file mode 100644 index 000000000..69cdf9366 --- /dev/null +++ b/ej2-react/code-snippet/chart/axis/legend-cs6/index.html @@ -0,0 +1,35 @@ + + + + + Syncfusion React Chart-Legend + + + + + + + + + + +++ + + \ No newline at end of file diff --git a/ej2-react/code-snippet/chart/series/line-cs54/systemjs.config.js b/ej2-react/code-snippet/chart/axis/legend-cs6/systemjs.config.js similarity index 83% rename from ej2-react/code-snippet/chart/series/line-cs54/systemjs.config.js rename to ej2-react/code-snippet/chart/axis/legend-cs6/systemjs.config.js index 4ed36970d..6ad0b18fc 100644 --- a/ej2-react/code-snippet/chart/series/line-cs54/systemjs.config.js +++ b/ej2-react/code-snippet/chart/axis/legend-cs6/systemjs.config.js @@ -1,17 +1,17 @@ System.config({ transpiler: "ts", typescriptOptions: { - target: "es5", - module: "commonjs", - moduleResolution: "node", - emitDecoratorMetadata: true, - experimentalDecorators: true, - "jsx": "react" + target: "es5", + module: "commonjs", + moduleResolution: "node", + emitDecoratorMetadata: true, + experimentalDecorators: true, + "jsx": "react" }, - meta: { - 'typescript': { - "exports": "ts" - } + meta: { + 'typescript': { + "exports": "ts" + } }, paths: { "syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/" @@ -39,17 +39,14 @@ System.config({ "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js", -"react-dom":"https://unpkg.com/react-dom@16.3.1/umd/react-dom.development.js", -"react":"https://unpkg.com/react@16.3.1/umd/react.development.js", - + "react-dom": "https://unpkg.com/react-dom@16.3.1/umd/react-dom.development.js", + "react": "https://unpkg.com/react@16.3.1/umd/react.development.js", + }, packages: { 'app': { main: 'index', defaultExtension: 'tsx' }, } - -}); - -System.import('app'); - +}); +System.import('app'); \ No newline at end of file diff --git a/ej2-react/code-snippet/chart/series/100-stackedarea-cs3/app/index.jsx b/ej2-react/code-snippet/chart/series/100-stackedarea-cs3/app/index.jsx index 0ea76aa34..95c46511e 100644 --- a/ej2-react/code-snippet/chart/series/100-stackedarea-cs3/app/index.jsx +++ b/ej2-react/code-snippet/chart/series/100-stackedarea-cs3/app/index.jsx @@ -2,31 +2,46 @@ import * as React from "react"; import * as ReactDOM from "react-dom"; -import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, DateTime, Tooltip, DataLabel, StackingAreaSeries } from '@syncfusion/ej2-react-charts'; +import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, DateTime, StackingAreaSeries } from '@syncfusion/ej2-react-charts'; import { percentData } from './datasource'; + function App() { - const primaryxAxis = { - title: 'Years', valueType: 'DateTime', intervalType: 'Years', - edgeLabelPlacement: 'Shift', labelFormat: 'y' - }; - const border = { width: 2, color: 'red' }; - const primaryyAxis = { title: 'Temperature (%)', labelFormat: '{value}%', rangePadding: 'None' }; - returnLoading....+- ; -} -; + + const primaryxAxis = { + valueType: 'DateTime', + title: 'Years', + intervalType: 'Years', + labelFormat: 'y', + edgeLabelPlacement: 'Shift' + }; + const primaryyAxis = { + title: 'Temperature (%)', + labelFormat: '{value}%', + rangePadding: 'None' + }; + const border = { width: 2, color: '#ff4251', dashArray: '5,5' }; + const border1 = { width: 2, color: '#4C4C4C', dashArray: '5,5' }; + const border2 = { width: 2, color: '#794F1B', dashArray: '5,5' }; + const border3 = { width: 2, color: '#1a9a6f', dashArray: '5,5' }; + return- - -- -- -- -- -+ + +}; export default App; ReactDOM.render(+ + ++ ++ ++ ++ +, document.getElementById("charts")); -{% endraw %} \ No newline at end of file +{% endraw %} diff --git a/ej2-react/code-snippet/chart/series/100-stackedarea-cs3/app/index.tsx b/ej2-react/code-snippet/chart/series/100-stackedarea-cs3/app/index.tsx index 82b8bb14f..36bdb56b2 100644 --- a/ej2-react/code-snippet/chart/series/100-stackedarea-cs3/app/index.tsx +++ b/ej2-react/code-snippet/chart/series/100-stackedarea-cs3/app/index.tsx @@ -2,34 +2,43 @@ import * as React from "react"; import * as ReactDOM from "react-dom"; -import { AxisModel, ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, - Legend, DateTime, Tooltip, DataLabel, Zoom, Crosshair, StackingAreaSeries, Selection} -from'@syncfusion/ej2-react-charts'; +import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, AxisModel, BorderModel, Legend, DateTime, StackingAreaSeries } from '@syncfusion/ej2-react-charts'; import { percentData } from './datasource'; function App() { const primaryxAxis: AxisModel = { - title: 'Years', valueType: 'DateTime', intervalType: 'Years', - edgeLabelPlacement: 'Shift', labelFormat: 'y'}; - const primaryyAxis: AxisModel = { title: 'Temperature (%)', labelFormat: '{value}%', rangePadding: 'None' }; - const border: object = { width: 2, color: 'red' }; + valueType: 'DateTime', + title: 'Years', + intervalType: 'Years', + labelFormat: 'y', + edgeLabelPlacement: 'Shift' + }; + const primaryyAxis: AxisModel = { + title: 'Temperature (%)', + labelFormat: '{value}%', + rangePadding: 'None' + }; + const border: BorderModel = { width: 2, color: '#ff4251', dashArray: '5,5' }; + const border1: BorderModel = { width: 2, color: '#4C4C4C', dashArray: '5,5' }; + const border2: BorderModel = { width: 2, color: '#794F1B', dashArray: '5,5' }; + const border3: BorderModel = { width: 2, color: '#1a9a6f', dashArray: '5,5' }; return - + primaryXAxis={primaryxAxis} + primaryYAxis={primaryyAxis} + title='Annual Temperature Comparison'> +- - -- -- -- -- -+ + + }; export default App; diff --git a/ej2-react/code-snippet/chart/series/100-stackedbar-cs3/app/datasource.jsx b/ej2-react/code-snippet/chart/series/100-stackedbar-cs3/app/datasource.jsx deleted file mode 100644 index 60faa75f6..000000000 --- a/ej2-react/code-snippet/chart/series/100-stackedbar-cs3/app/datasource.jsx +++ /dev/null @@ -1,8 +0,0 @@ -export let stackBarData = [ - { x: 'Jan', y: 6, y1: 6, y2: -1 }, { x: 'Feb', y: 8 , y1: 8, y2: -1.5 }, - { x: 'Mar', y: 12, y1: 11, y2: -2 }, { x: 'Apr', y: 15, y1: 16, y2: -2.5 }, - { x: 'May', y: 20, y1: 21, y2: -3 }, { x: 'Jun', y: 24, y1: 25, y2: -3.5 }, - { x: 'Jul', y: 28, y1: 27, y2: -4 }, { x: 'Aug', y: 32, y1: 31, y2: -4.5 }, - { x: 'Sep', y: 33, y1: 34, y2: -5 }, { x: 'Oct', y: 35, y1: 34, y2: -5.5 }, - { x: 'Nov', y: 40, y1: 41, y2: -6 }, { x: 'Dec', y: 42, y1: 42, y2: -6.5 } -]; \ No newline at end of file diff --git a/ej2-react/code-snippet/chart/series/100-stackedbar-cs3/app/datasource.tsx b/ej2-react/code-snippet/chart/series/100-stackedbar-cs3/app/datasource.tsx deleted file mode 100644 index bb9818c75..000000000 --- a/ej2-react/code-snippet/chart/series/100-stackedbar-cs3/app/datasource.tsx +++ /dev/null @@ -1,8 +0,0 @@ -export let stackBarData: Object[] = [ - { x: 'Jan', y: 6, y1: 6, y2: -1 }, { x: 'Feb', y: 8 , y1: 8, y2: -1.5 }, - { x: 'Mar', y: 12, y1: 11, y2: -2 }, { x: 'Apr', y: 15, y1: 16, y2: -2.5 }, - { x: 'May', y: 20, y1: 21, y2: -3 }, { x: 'Jun', y: 24, y1: 25, y2: -3.5 }, - { x: 'Jul', y: 28, y1: 27, y2: -4 }, { x: 'Aug', y: 32, y1: 31, y2: -4.5 }, - { x: 'Sep', y: 33, y1: 34, y2: -5 }, { x: 'Oct', y: 35, y1: 34, y2: -5.5 }, - { x: 'Nov', y: 40, y1: 41, y2: -6 }, { x: 'Dec', y: 42, y1: 42, y2: -6.5 } -]; \ No newline at end of file diff --git a/ej2-react/code-snippet/chart/series/100-stackedbar-cs3/app/index.jsx b/ej2-react/code-snippet/chart/series/100-stackedbar-cs3/app/index.jsx deleted file mode 100644 index e23576069..000000000 --- a/ej2-react/code-snippet/chart/series/100-stackedbar-cs3/app/index.jsx +++ /dev/null @@ -1,30 +0,0 @@ -{% raw %} - -import * as React from "react"; -import * as ReactDOM from "react-dom"; -import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, Category, Tooltip, DataLabel, StackingBarSeries } from '@syncfusion/ej2-react-charts'; -import { stackBarData } from './datasource'; -function App() { - const primaryxAxis = { valueType: 'Category', title: 'Months' }; - const primaryyAxis = { - title: 'Percentage (%)', minimum: -20, maximum: 100, - edgeLabelPlacement: 'Shift', labelFormat: '{value}%' - }; - const border = { width:1.5, color: 'black'}; - return+ ++ ++ ++ +- ; -} -; -export default App; -ReactDOM.render(- - -- -- -- -, document.getElementById("charts")); - -{% endraw %} \ No newline at end of file diff --git a/ej2-react/code-snippet/chart/series/100-stackedbar-cs3/app/index.tsx b/ej2-react/code-snippet/chart/series/100-stackedbar-cs3/app/index.tsx deleted file mode 100644 index da3cdbee3..000000000 --- a/ej2-react/code-snippet/chart/series/100-stackedbar-cs3/app/index.tsx +++ /dev/null @@ -1,37 +0,0 @@ -{% raw %} - -import * as React from "react"; -import * as ReactDOM from "react-dom"; -import { AxisModel, ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, - Legend, Category, Tooltip, DataLabel, Zoom, Crosshair, StackingBarSeries, Selection} -from'@syncfusion/ej2-react-charts'; -import { stackBarData } from './datasource'; - -function App() { - - const primaryxAxis: AxisModel = { valueType: 'Category', title: 'Months' }; - const primaryyAxis: AxisModel = { - title: 'Percentage (%)', minimum: -20, maximum: 100, - edgeLabelPlacement: 'Shift', labelFormat: '{value}%' - }; - const border: object = { width:1.5, color: 'black'}; - return - - -}; -export default App; -ReactDOM.render(- - -- -- -- -, document.getElementById("charts")); - -{% endraw %} diff --git a/ej2-react/code-snippet/chart/series/100-stackedbar-cs3/index.html b/ej2-react/code-snippet/chart/series/100-stackedbar-cs3/index.html deleted file mode 100644 index e4fa03cc3..000000000 --- a/ej2-react/code-snippet/chart/series/100-stackedbar-cs3/index.html +++ /dev/null @@ -1,58 +0,0 @@ - - - - - Syncfusion React Chart-Line Series - - - - - - - - - - --- - - - - - \ No newline at end of file diff --git a/ej2-react/code-snippet/chart/series/100-stackedbar-cs4/app/datasource.jsx b/ej2-react/code-snippet/chart/series/100-stackedbar-cs4/app/datasource.jsx index 60faa75f6..9c648d693 100644 --- a/ej2-react/code-snippet/chart/series/100-stackedbar-cs4/app/datasource.jsx +++ b/ej2-react/code-snippet/chart/series/100-stackedbar-cs4/app/datasource.jsx @@ -1,8 +1,12 @@ export let stackBarData = [ - { x: 'Jan', y: 6, y1: 6, y2: -1 }, { x: 'Feb', y: 8 , y1: 8, y2: -1.5 }, - { x: 'Mar', y: 12, y1: 11, y2: -2 }, { x: 'Apr', y: 15, y1: 16, y2: -2.5 }, - { x: 'May', y: 20, y1: 21, y2: -3 }, { x: 'Jun', y: 24, y1: 25, y2: -3.5 }, - { x: 'Jul', y: 28, y1: 27, y2: -4 }, { x: 'Aug', y: 32, y1: 31, y2: -4.5 }, - { x: 'Sep', y: 33, y1: 34, y2: -5 }, { x: 'Oct', y: 35, y1: 34, y2: -5.5 }, - { x: 'Nov', y: 40, y1: 41, y2: -6 }, { x: 'Dec', y: 42, y1: 42, y2: -6.5 } + { x: 2000, y: 0.61, y1: 0.03, y2: 0.48}, + { x: 2001, y: 0.81, y1: 0.05, y2: 0.53 }, + { x: 2002, y: 0.91, y1: 0.06, y2: 0.57 }, + { x: 2003, y: 1, y1: 0.09, y2: 0.61 }, + { x: 2004, y: 1.19, y1: 0.14, y2: 0.63 }, + { x: 2005, y: 1.47, y1: 0.20, y2: 0.64 }, + { x: 2006, y: 1.74, y1: 0.29, y2: 0.66 }, + { x: 2007, y: 1.98, y1: 0.46, y2: 0.76 }, + { x: 2008, y: 1.99, y1: 0.64, y2: 0.77 }, + { x: 2009, y: 1.70, y1: 0.75, y2: 0.55 } ]; \ No newline at end of file diff --git a/ej2-react/code-snippet/chart/series/100-stackedbar-cs4/app/datasource.tsx b/ej2-react/code-snippet/chart/series/100-stackedbar-cs4/app/datasource.tsx index bb9818c75..e2c2b8420 100644 --- a/ej2-react/code-snippet/chart/series/100-stackedbar-cs4/app/datasource.tsx +++ b/ej2-react/code-snippet/chart/series/100-stackedbar-cs4/app/datasource.tsx @@ -1,8 +1,12 @@ export let stackBarData: Object[] = [ - { x: 'Jan', y: 6, y1: 6, y2: -1 }, { x: 'Feb', y: 8 , y1: 8, y2: -1.5 }, - { x: 'Mar', y: 12, y1: 11, y2: -2 }, { x: 'Apr', y: 15, y1: 16, y2: -2.5 }, - { x: 'May', y: 20, y1: 21, y2: -3 }, { x: 'Jun', y: 24, y1: 25, y2: -3.5 }, - { x: 'Jul', y: 28, y1: 27, y2: -4 }, { x: 'Aug', y: 32, y1: 31, y2: -4.5 }, - { x: 'Sep', y: 33, y1: 34, y2: -5 }, { x: 'Oct', y: 35, y1: 34, y2: -5.5 }, - { x: 'Nov', y: 40, y1: 41, y2: -6 }, { x: 'Dec', y: 42, y1: 42, y2: -6.5 } + { x: 2000, y: 0.61, y1: 0.03, y2: 0.48}, + { x: 2001, y: 0.81, y1: 0.05, y2: 0.53 }, + { x: 2002, y: 0.91, y1: 0.06, y2: 0.57 }, + { x: 2003, y: 1, y1: 0.09, y2: 0.61 }, + { x: 2004, y: 1.19, y1: 0.14, y2: 0.63 }, + { x: 2005, y: 1.47, y1: 0.20, y2: 0.64 }, + { x: 2006, y: 1.74, y1: 0.29, y2: 0.66 }, + { x: 2007, y: 1.98, y1: 0.46, y2: 0.76 }, + { x: 2008, y: 1.99, y1: 0.64, y2: 0.77 }, + { x: 2009, y: 1.70, y1: 0.75, y2: 0.55 } ]; \ No newline at end of file diff --git a/ej2-react/code-snippet/chart/series/100-stackedbar-cs4/app/index.jsx b/ej2-react/code-snippet/chart/series/100-stackedbar-cs4/app/index.jsx index aafa7375f..b23ae17e4 100644 --- a/ej2-react/code-snippet/chart/series/100-stackedbar-cs4/app/index.jsx +++ b/ej2-react/code-snippet/chart/series/100-stackedbar-cs4/app/index.jsx @@ -2,29 +2,37 @@ import * as React from "react"; import * as ReactDOM from "react-dom"; -import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, Category, Tooltip, DataLabel, StackingBarSeries } from '@syncfusion/ej2-react-charts'; +import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, StackingBarSeries } from '@syncfusion/ej2-react-charts'; import { stackBarData } from './datasource'; + function App() { - const primaryxAxis = { valueType: 'Category', title: 'Months' }; - const primaryyAxis = { - title: 'Percentage (%)', minimum: -20, maximum: 100, - edgeLabelPlacement: 'Shift', labelFormat: '{value}%' - }; - const border = { width:1.5, color: 'black'}; - returnLoading....-- ; -} -; + + const primaryxAxis = { title: 'Months' }; + const primaryyAxis = { + title: 'Percentage (%)', + labelFormat: '{value}%' + }; + const border = { width: 2, color: '#ff4251', dashArray: '5,5' }; + const border1 = { width: 2, color: '#66BDB7', dashArray: '5,5' }; + const border2 = { width: 2, color: '#794F1B', dashArray: '5,5' }; + + return- - -- -- -- -+ + +}; export default App; ReactDOM.render(+ + ++ ++ ++ +, document.getElementById("charts")); -{% endraw %} \ No newline at end of file +{% endraw %} diff --git a/ej2-react/code-snippet/chart/series/100-stackedbar-cs4/app/index.tsx b/ej2-react/code-snippet/chart/series/100-stackedbar-cs4/app/index.tsx index 815bd7141..3e9aea4da 100644 --- a/ej2-react/code-snippet/chart/series/100-stackedbar-cs4/app/index.tsx +++ b/ej2-react/code-snippet/chart/series/100-stackedbar-cs4/app/index.tsx @@ -2,33 +2,34 @@ import * as React from "react"; import * as ReactDOM from "react-dom"; -import { AxisModel, ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, - Legend, Category, Tooltip, DataLabel, Zoom, Crosshair, StackingBarSeries, Selection} -from'@syncfusion/ej2-react-charts'; +import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, AxisModel, BorderModel, StackingBarSeries } from '@syncfusion/ej2-react-charts'; import { stackBarData } from './datasource'; function App() { - const primaryxAxis: AxisModel = { valueType: 'Category', title: 'Months' }; + const primaryxAxis: AxisModel = { title: 'Months' }; const primaryyAxis: AxisModel = { - title: 'Percentage (%)', minimum: -20, maximum: 100, - edgeLabelPlacement: 'Shift', labelFormat: '{value}%' + title: 'Percentage (%)', + labelFormat: '{value}%' }; - const border: object = { width:1.5, color: 'black'}; + const border: BorderModel = { width: 2, color: '#ff4251', dashArray: '5,5' }; + const border1: BorderModel = { width: 2, color: '#66BDB7', dashArray: '5,5' }; + const border2: BorderModel = { width: 2, color: '#794F1B', dashArray: '5,5' }; + return - + +- + primaryXAxis={primaryxAxis} + primaryYAxis={primaryyAxis} + title='Sales Comparison'> + + - -- -- -+ ++ + + }; export default App; diff --git a/ej2-react/code-snippet/chart/series/100-stackedcolumn-cs3/app/datasource.jsx b/ej2-react/code-snippet/chart/series/100-stackedcolumn-cs3/app/datasource.jsx deleted file mode 100644 index a7879224d..000000000 --- a/ej2-react/code-snippet/chart/series/100-stackedcolumn-cs3/app/datasource.jsx +++ /dev/null @@ -1,9 +0,0 @@ -export let columnperData = [ - { x: '2006', y: 900, y1: 190, y2: 250, y3: 150 }, - { x: '2007', y: 544, y1: 226, y2: 145, y3: 120 }, - { x: '2008', y: 880, y1: 194, y2: 190, y3: 115 }, - { x: '2009', y: 675, y1: 250, y2: 220, y3: 125 }, - { x: '2010', y: 765, y1: 222, y2: 225, y3: 132 }, - { x: '2011', y: 679, y1: 181, y2: 135, y3: 137 }, - { x: '2012', y: 770, y1: 128, y2: 152, y3: 110 } -]; \ No newline at end of file diff --git a/ej2-react/code-snippet/chart/series/100-stackedcolumn-cs3/app/datasource.tsx b/ej2-react/code-snippet/chart/series/100-stackedcolumn-cs3/app/datasource.tsx deleted file mode 100644 index cbe8240dc..000000000 --- a/ej2-react/code-snippet/chart/series/100-stackedcolumn-cs3/app/datasource.tsx +++ /dev/null @@ -1,9 +0,0 @@ -export let columnperData: Object[] = [ - { x: '2006', y: 900, y1: 190, y2: 250, y3: 150 }, - { x: '2007', y: 544, y1: 226, y2: 145, y3: 120 }, - { x: '2008', y: 880, y1: 194, y2: 190, y3: 115 }, - { x: '2009', y: 675, y1: 250, y2: 220, y3: 125 }, - { x: '2010', y: 765, y1: 222, y2: 225, y3: 132 }, - { x: '2011', y: 679, y1: 181, y2: 135, y3: 137 }, - { x: '2012', y: 770, y1: 128, y2: 152, y3: 110 } -]; \ No newline at end of file diff --git a/ej2-react/code-snippet/chart/series/100-stackedcolumn-cs3/app/index.jsx b/ej2-react/code-snippet/chart/series/100-stackedcolumn-cs3/app/index.jsx deleted file mode 100644 index 89673008d..000000000 --- a/ej2-react/code-snippet/chart/series/100-stackedcolumn-cs3/app/index.jsx +++ /dev/null @@ -1,29 +0,0 @@ -{% raw %} - -import * as React from "react"; -import * as ReactDOM from "react-dom"; -import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, Category, Tooltip, DataLabel, StackingColumnSeries } from '@syncfusion/ej2-react-charts'; -import { columnperData } from './datasource'; -function App() { - const primaryxAxis = { title: 'Years', interval: 1, valueType: 'Category' }; - const primaryyAxis = { title: 'GDP (%) Per Annum', rangePadding: 'None', labelFormat: '{value}%' }; - const border = { width: 2, color: 'blue'}; - return- ; -} -; -export default App; -ReactDOM.render(- - -- -- -- -- -, document.getElementById("charts")); - -{% endraw %} \ No newline at end of file diff --git a/ej2-react/code-snippet/chart/series/100-stackedcolumn-cs3/app/index.tsx b/ej2-react/code-snippet/chart/series/100-stackedcolumn-cs3/app/index.tsx deleted file mode 100644 index 5df7cceed..000000000 --- a/ej2-react/code-snippet/chart/series/100-stackedcolumn-cs3/app/index.tsx +++ /dev/null @@ -1,36 +0,0 @@ -{% raw %} - -import * as React from "react"; -import * as ReactDOM from "react-dom"; -import { AxisModel, ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, - Legend, Category, Tooltip, DataLabel, Zoom, Crosshair, StackingColumnSeries, Selection} -from'@syncfusion/ej2-react-charts'; -import { columnperData } from './datasource'; - -function App() { - - const primaryxAxis: AxisModel = { title: 'Years', interval: 1, valueType: 'Category' }; - const primaryyAxis: AxisModel = { title: 'GDP (%) Per Annum', rangePadding: 'None', labelFormat: '{value}%' }; - const border: object = { width: 2, color: 'blue'}; - return - - -}; -export default App; -ReactDOM.render(- - -- -- -- -- -, document.getElementById("charts")); - -{% endraw %} diff --git a/ej2-react/code-snippet/chart/series/100-stackedcolumn-cs4/app/datasource.jsx b/ej2-react/code-snippet/chart/series/100-stackedcolumn-cs4/app/datasource.jsx index a7879224d..cd14bbb13 100644 --- a/ej2-react/code-snippet/chart/series/100-stackedcolumn-cs4/app/datasource.jsx +++ b/ej2-react/code-snippet/chart/series/100-stackedcolumn-cs4/app/datasource.jsx @@ -1,9 +1,9 @@ export let columnperData = [ - { x: '2006', y: 900, y1: 190, y2: 250, y3: 150 }, - { x: '2007', y: 544, y1: 226, y2: 145, y3: 120 }, - { x: '2008', y: 880, y1: 194, y2: 190, y3: 115 }, - { x: '2009', y: 675, y1: 250, y2: 220, y3: 125 }, - { x: '2010', y: 765, y1: 222, y2: 225, y3: 132 }, - { x: '2011', y: 679, y1: 181, y2: 135, y3: 137 }, - { x: '2012', y: 770, y1: 128, y2: 152, y3: 110 } + { x: new Date(2006, 0, 1), y: 900, y1: 190, y2: 250, y3: 150 }, + { x: new Date(2007, 0, 1), y: 544, y1: 226, y2: 145, y3: 120 }, + { x: new Date(2008, 0, 1), y: 880, y1: 194, y2: 190, y3: 115 }, + { x: new Date(2009, 0, 1), y: 675, y1: 250, y2: 220, y3: 125 }, + { x: new Date(2010, 0, 1), y: 765, y1: 222, y2: 225, y3: 132 }, + { x: new Date(2011, 0, 1), y: 679, y1: 181, y2: 135, y3: 137 }, + { x: new Date(2012, 0, 1), y: 770, y1: 128, y2: 152, y3: 110 } ]; \ No newline at end of file diff --git a/ej2-react/code-snippet/chart/series/100-stackedcolumn-cs4/app/datasource.tsx b/ej2-react/code-snippet/chart/series/100-stackedcolumn-cs4/app/datasource.tsx index cbe8240dc..1052e972e 100644 --- a/ej2-react/code-snippet/chart/series/100-stackedcolumn-cs4/app/datasource.tsx +++ b/ej2-react/code-snippet/chart/series/100-stackedcolumn-cs4/app/datasource.tsx @@ -1,9 +1,9 @@ export let columnperData: Object[] = [ - { x: '2006', y: 900, y1: 190, y2: 250, y3: 150 }, - { x: '2007', y: 544, y1: 226, y2: 145, y3: 120 }, - { x: '2008', y: 880, y1: 194, y2: 190, y3: 115 }, - { x: '2009', y: 675, y1: 250, y2: 220, y3: 125 }, - { x: '2010', y: 765, y1: 222, y2: 225, y3: 132 }, - { x: '2011', y: 679, y1: 181, y2: 135, y3: 137 }, - { x: '2012', y: 770, y1: 128, y2: 152, y3: 110 } + { x: new Date(2006, 0, 1), y: 900, y1: 190, y2: 250, y3: 150 }, + { x: new Date(2007, 0, 1), y: 544, y1: 226, y2: 145, y3: 120 }, + { x: new Date(2008, 0, 1), y: 880, y1: 194, y2: 190, y3: 115 }, + { x: new Date(2009, 0, 1), y: 675, y1: 250, y2: 220, y3: 125 }, + { x: new Date(2010, 0, 1), y: 765, y1: 222, y2: 225, y3: 132 }, + { x: new Date(2011, 0, 1), y: 679, y1: 181, y2: 135, y3: 137 }, + { x: new Date(2012, 0, 1), y: 770, y1: 128, y2: 152, y3: 110 } ]; \ No newline at end of file diff --git a/ej2-react/code-snippet/chart/series/100-stackedcolumn-cs4/app/index.jsx b/ej2-react/code-snippet/chart/series/100-stackedcolumn-cs4/app/index.jsx index 238639042..357b972ce 100644 --- a/ej2-react/code-snippet/chart/series/100-stackedcolumn-cs4/app/index.jsx +++ b/ej2-react/code-snippet/chart/series/100-stackedcolumn-cs4/app/index.jsx @@ -2,28 +2,46 @@ import * as React from "react"; import * as ReactDOM from "react-dom"; -import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, Category, Tooltip, DataLabel, StackingColumnSeries } from '@syncfusion/ej2-react-charts'; +import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, DateTime, StackingColumnSeries } from '@syncfusion/ej2-react-charts'; import { columnperData } from './datasource'; + function App() { - const primaryxAxis = { title: 'Years', interval: 1, valueType: 'Category' }; - const primaryyAxis = { title: 'GDP (%) Per Annum', rangePadding: 'None', labelFormat: '{value}%' }; - const border = { width: 2, color: 'blue'}; - return - ; -} -; + + const primaryxAxis = { + valueType: 'DateTime', + title: 'Years', + interval: 1, + labelFormat: 'y' + }; + const primaryyAxis = { + title: 'GDP (%) Per Annum', + rangePadding: 'None', + labelFormat: '{value}%' + }; + const border = { width: 2, color: '#ff4251', dashArray: '5,5' }; + const border1 = { width: 2, color: '#66BDB7', dashArray: '5,5' }; + const border2 = { width: 2, color: '#794F1B', dashArray: '5,5' }; + const border3 = { width: 2, color: '#1a9a6f', dashArray: '5,5' }; + + return- - -- -- -- -- -+ + +}; export default App; ReactDOM.render(+ + ++ ++ ++ ++ +, document.getElementById("charts")); -{% endraw %} \ No newline at end of file +{% endraw %} diff --git a/ej2-react/code-snippet/chart/series/100-stackedcolumn-cs4/app/index.tsx b/ej2-react/code-snippet/chart/series/100-stackedcolumn-cs4/app/index.tsx index 5b1e9330c..27100d4d3 100644 --- a/ej2-react/code-snippet/chart/series/100-stackedcolumn-cs4/app/index.tsx +++ b/ej2-react/code-snippet/chart/series/100-stackedcolumn-cs4/app/index.tsx @@ -2,33 +2,44 @@ import * as React from "react"; import * as ReactDOM from "react-dom"; -import { AxisModel, ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, - Legend, Category, Tooltip, DataLabel, Zoom, Crosshair, StackingColumnSeries, Selection} -from'@syncfusion/ej2-react-charts'; +import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, AxisModel, BorderModel, Legend, DateTime, StackingColumnSeries } from '@syncfusion/ej2-react-charts'; import { columnperData } from './datasource'; function App() { - const primaryxAxis: AxisModel = { title: 'Years', interval: 1, valueType: 'Category' }; - const primaryyAxis: AxisModel = { title: 'GDP (%) Per Annum', rangePadding: 'None', labelFormat: '{value}%' }; - const border: object = { width: 2, color: 'blue'}; + const primaryxAxis: AxisModel = { + valueType: 'DateTime', + title: 'Years', + interval: 1, + labelFormat: 'y' + }; + const primaryyAxis: AxisModel = { + title: 'GDP (%) Per Annum', + rangePadding: 'None', + labelFormat: '{value}%' + }; + const border: BorderModel = { width: 2, color: '#ff4251', dashArray: '5,5' }; + const border1: BorderModel = { width: 2, color: '#66BDB7', dashArray: '5,5' }; + const border2: BorderModel = { width: 2, color: '#794F1B', dashArray: '5,5' }; + const border3: BorderModel = { width: 2, color: '#1a9a6f', dashArray: '5,5' }; + return - - + +- + primaryXAxis={primaryxAxis} + primaryYAxis={primaryyAxis} + title='Gross Domestic Product Growth'> + + - -- -- -- -+ ++ ++ + + + }; export default App; ReactDOM.render(, document.getElementById("charts")); diff --git a/ej2-react/code-snippet/chart/series/accessibility-cs1/app/datasource.jsx b/ej2-react/code-snippet/chart/series/accessibility-cs1/app/datasource.jsx new file mode 100644 index 000000000..4a78d86c6 --- /dev/null +++ b/ej2-react/code-snippet/chart/series/accessibility-cs1/app/datasource.jsx @@ -0,0 +1,8 @@ +export let chartData = [ + { month: 'Jan', sales: 35 }, { month: 'Feb', sales: 28 }, + { month: 'Mar', sales: 34 }, { month: 'Apr', sales: 32 }, + { month: 'May', sales: 40 }, { month: 'Jun', sales: 32 }, + { month: 'Jul', sales: 35 }, { month: 'Aug', sales: 55 }, + { month: 'Sep', sales: 38 }, { month: 'Oct', sales: 30 }, + { month: 'Nov', sales: 25 }, { month: 'Dec', sales: 32 } +]; \ No newline at end of file diff --git a/ej2-react/code-snippet/chart/series/accessibility-cs1/app/datasource.tsx b/ej2-react/code-snippet/chart/series/accessibility-cs1/app/datasource.tsx new file mode 100644 index 000000000..1cea35922 --- /dev/null +++ b/ej2-react/code-snippet/chart/series/accessibility-cs1/app/datasource.tsx @@ -0,0 +1,8 @@ +export let chartData: Object[] = [ + { month: 'Jan', sales: 35 }, { month: 'Feb', sales: 28 }, + { month: 'Mar', sales: 34 }, { month: 'Apr', sales: 32 }, + { month: 'May', sales: 40 }, { month: 'Jun', sales: 32 }, + { month: 'Jul', sales: 35 }, { month: 'Aug', sales: 55 }, + { month: 'Sep', sales: 38 }, { month: 'Oct', sales: 30 }, + { month: 'Nov', sales: 25 }, { month: 'Dec', sales: 32 } +]; \ No newline at end of file diff --git a/ej2-react/code-snippet/chart/series/accessibility-cs1/app/index.jsx b/ej2-react/code-snippet/chart/series/accessibility-cs1/app/index.jsx new file mode 100644 index 000000000..496e8aeee --- /dev/null +++ b/ej2-react/code-snippet/chart/series/accessibility-cs1/app/index.jsx @@ -0,0 +1,42 @@ +{% raw %} + +import * as React from "react"; +import * as ReactDOM from "react-dom"; +import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, LineSeries, Tooltip, Legend, Category, DataLabel } from'@syncfusion/ej2-react-charts'; +import { chartData } from './datasource'; + +function App() { + + const primaryxAxis = { valueType: 'Category' }; + const primaryyAxis = { labelFormat: '${value}K' }; + const tooltip = { enable: true }; + const legendSettings = { visible: true }; + const accessibility = { + accessibilityDescription: 'A line chart displaying the sales analysis for each month.', + accessibilityRole: 'chart' + }; + const marker = { visible: true, dataLabel: { visible: true } }; + + return + + +}; +export default App; +ReactDOM.render(+ + ++ +, document.getElementById("charts")); + + +{% endraw %} \ No newline at end of file diff --git a/ej2-react/code-snippet/chart/series/accessibility-cs1/app/index.tsx b/ej2-react/code-snippet/chart/series/accessibility-cs1/app/index.tsx new file mode 100644 index 000000000..47d0e14fc --- /dev/null +++ b/ej2-react/code-snippet/chart/series/accessibility-cs1/app/index.tsx @@ -0,0 +1,42 @@ +{% raw %} + +import * as React from "react"; +import * as ReactDOM from "react-dom"; +import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, AxisModel, TooltipSettingsModel, LegendSettingsModel, AccessibilityModel, LineSeries, Tooltip, Legend, Category, DataLabel } from'@syncfusion/ej2-react-charts'; +import { chartData } from './datasource'; + +function App() { + + const primaryxAxis: AxisModel = { valueType: 'Category' }; + const primaryyAxis: AxisModel = { labelFormat: '${value}K' }; + const tooltip: TooltipSettingsModel = { enable: true }; + const legendSettings: LegendSettingsModel = { visible: true }; + const accessibility: AccessibilityModel = { + accessibilityDescription: 'A line chart displaying the sales analysis for each month.', + accessibilityRole: 'chart' + }; + const marker = { visible: true, dataLabel: { visible: true } }; + + return + + +}; +export default App; +ReactDOM.render(+ + ++ +, document.getElementById("charts")); + + +{% endraw %} \ No newline at end of file diff --git a/ej2-react/code-snippet/chart/series/stackedbar-cs3/index.html b/ej2-react/code-snippet/chart/series/accessibility-cs1/index.html similarity index 85% rename from ej2-react/code-snippet/chart/series/stackedbar-cs3/index.html rename to ej2-react/code-snippet/chart/series/accessibility-cs1/index.html index 7fdba8f1d..fe24e4ba0 100644 --- a/ej2-react/code-snippet/chart/series/stackedbar-cs3/index.html +++ b/ej2-react/code-snippet/chart/series/accessibility-cs1/index.html @@ -9,7 +9,7 @@ - - -+Loading....-+Loading....+