DOCINFRA-2341_merged_using_automation

ej2-react-toc.html

@@ -412,7 +412,9 @@
     <li><a href="/ej2-react/chart/preact">Preact</a></li>
     </ul>
 </li>
+<li><a href="/ej2-react/chart/feature-modules">Feature Modules</a></li>
 <li><a href="/ej2-react/chart/working-with-data">Working with Data</a></li>
+<li><a href="/ej2-react/chart/dynamic-data-update">Dynamic Data Update</a></li>
 <li><a href="/ej2-react/chart/chart-dimensions">Chart Dimensions</a></li>
 <li><a href="/ej2-react/chart/category-axis">Category Axis</a></li>
 <li><a href="/ej2-react/chart/numeric-axis">Numeric Axis</a></li>
@@ -1208,6 +1210,7 @@
           <ul>
             <li><a href="/ej2-react/grid/getting-started">React</a></li>
             <li><a href="/ej2-react/grid/nextjs-getting-started">NextJS</a></li>
+            <li><a href="/ej2-react/grid/sharepoint">SharePoint</a></li>
             <li><a href="/ej2-react/grid/preact">Preact</a></li>
           </ul>
         </li>
@@ -1415,6 +1418,7 @@
 <li><a href="/ej2-react/image-editor/finetune">Finetune</a></li>
 <li><a href="/ej2-react/image-editor/resize">Resize</a></li>
 <li><a href="/ej2-react/image-editor/frame">Frame</a></li>
+<li><a href="/ej2-react/image-editor/z-order">Z-Order</a></li>
 <li><a href="/ej2-react/image-editor/localization">Localization</a></li>
 <li><a href="https://ej2.syncfusion.com/react/documentation/api/image-editor/">API Reference</a></li>
 <li><a href="/ej2-react/image-editor/accessibility">Accessibility</a></li>
@@ -1672,6 +1676,11 @@
 <li><a href="https://ej2.syncfusion.com/react/documentation/api/message/">API Reference</a></li>
 </ul>
 </li><li>
+    MultiColumn ComboBox
+    <ul>
+        <li><a href="/ej2-react/multicolumn-combobox/getting-started">Getting Started</a></li>
+    </ul>
+  </li><li>
 MultiSelect
 <ul>
 <li><a href="/ej2-react/multi-select/getting-started">Getting Started</a></li>
@@ -1716,6 +1725,11 @@
 </li>
 <li><a href="/ej2-react/numerictextbox/ej1-api-migration">Migration from Essential JS 1</a></li>
 </ul>
+</li><li>
+    OTP Input
+    <ul>
+        <li><a href="/ej2-react/otp-input/getting-started">Getting Started</a></li>
+    </ul>
 </li><li>
     Pager
       <ul>
@@ -1783,6 +1797,7 @@
 <li><a href="/ej2-react/pdfviewer/form-designer/create-with-user-interface-interaction">Create form fields with UI interaction</a></li>
 </ul>
 </li>
+<li><a href="/ej2-react/pdfviewer/organize-pdf">Organize Pages</a></li>
 <li><a href="/ej2-react/pdfviewer/print">Print</a></li>
 <li><a href="/ej2-react/pdfviewer/download">Download</a></li>
 <li><a href="/ej2-react/pdfviewer/globalization">Globalization</a></li>
@@ -1809,10 +1824,12 @@
 <li><a href="/ej2-react/pdfviewer/how-to/load-n-number-page">Load N number of pages on initial loading</a></li>
 <li><a href="/ej2-react/pdfviewer/how-to/toolbar-icon-customization">Customize toolbar</a></li>
 <li><a href="/ej2-react/pdfviewer/how-to/conformance">Supported conformance documents</a></li>
-<li><a href="/ej2-react/pdfviewer/how-to/organize-pdf">Organize Pages Feature</a></li>
 <li><a href="/ej2-react/pdfviewer/how-to/custom-context-menu">Customize context menu</a></li>
 <li><a href="/ej2-react/pdfviewer/how-to/pagerenderstarted-pagerendercompleted-event">PageRenderInitiate and PageRenderComplete event</a></li>
-<li><a href="/ej2-react/pdfviewer/how-to/open-bookmark">Open and Close Bookmark pane programmatically </a></li>
+<li><a href="/ej2-react/pdfviewer/how-to/open-bookmark">Open and Close Bookmark pane programmatically</a></li>
+<li><a href="/ej2-react/pdfviewer/how-to/signatureselect-signatureunselect">SignatureSelect and SignatureUnselect event</a></li>
+<li><a href="/ej2-react/pdfviewer/how-to/download-start-event">Controlling File Downloads</a></li>
+<li><a href="/ej2-react/pdfviewer/how-to/min-max-zoom">Minimum and Maximum Zoom Properties</a></li>
 </ul>
 </li>
 <li>Troubleshooting
@@ -1974,6 +1991,8 @@
 <li><a href="/ej2-react/query-builder/import-export">Importing and Exporting</a></li>
 <li><a href="/ej2-react/query-builder/lock-group-rule">Lock Group/Rule</a></li>
 <li><a href="/ej2-react/query-builder/clone-group-rule">Clone Group/Rule</a></li>
+<li><a href="/ej2-react/query-builder/drag-and-drop">Drag and Drop</a></li>
+<li><a href="/ej2-react/query-builder/separate-connector">Separate Connector</a></li>
 <li><a href="/ej2-react/query-builder/global-local">Localization</a></li>
 <li><a href="/ej2-react/query-builder/style-and-appearance">Styles and Appearances</a></li>
 <li><a href="/ej2-react/query-builder/accessibility">Accessibility</a></li>

ej2-react/chart/dynamic-data-update.md

@@ -0,0 +1,82 @@
+---
+layout: post
+title: Dynamic data update in React Chart component | Syncfusion
+description: Learn here all about dynamic data update in Syncfusion React Chart component of Syncfusion Essential JS 2 and more.
+control: Dynamic Data Update
+platform: ej2-react
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Dynamic data update in React Chart component
+
+## Adding a new data point
+
+The `addPoint` method is used to dynamically add a new data point to the chart series. This method is particularly useful when you want to update the chart with a new data point without having to refresh the entire chart. This method takes two parameters:
+
+* The first parameter is the new data point to add to your existing data source.
+* The optional second parameter specifies the animation duration for adding the new data point.
+
+{% tabs %}
+{% highlight js tabtitle="index.jsx" %}
+{% include code-snippet/chart/dynamic-update/add-point/app/index.jsx %}
+{% endhighlight %}
+{% highlight ts tabtitle="index.tsx" %}
+{% include code-snippet/chart/dynamic-update/add-point/app/index.tsx %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/chart/dynamic-update/add-point" %}
+
+## Removing an existing data point
+
+The `removePoint` method is used to dynamically remove a data point from the chart series. This method is particularly useful when you want to update the chart by removing an existing data point without having to refresh the entire chart. This method takes two parameters:
+
+* The first parameter is the index of the data point that needs to be removed from the existing data source.
+* The optional second parameter specifies the animation duration for removing the data point.
+
+{% tabs %}
+{% highlight js tabtitle="index.jsx" %}
+{% include code-snippet/chart/dynamic-update/remove-point/app/index.jsx %}
+{% endhighlight %}
+{% highlight ts tabtitle="index.tsx" %}
+{% include code-snippet/chart/dynamic-update/remove-point/app/index.tsx %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/chart/dynamic-update/remove-point" %}
+
+## Replacing entire data points
+
+To replace the existing data source in the chart with a new data source, you can simply use the `setData` method. This method allows you to replace the existing data points in the chart series with a new set of data points, enabling you to easily update the chart with new information. This method takes two parameters:
+
+* The first parameter is the new set of data points to be updated.
+* The optional second parameter specifies the animation duration for updating the new data source.
+
+{% tabs %}
+{% highlight js tabtitle="index.jsx" %}
+{% include code-snippet/chart/dynamic-update/set-data/app/index.jsx %}
+{% endhighlight %}
+{% highlight ts tabtitle="index.tsx" %}
+{% include code-snippet/chart/dynamic-update/set-data/app/index.tsx %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/chart/dynamic-update/set-data" %}
+
+## Click to add or remove a data point
+
+You can use mouse or touch events to dynamically add or remove data points from an existing data source by clicking on the appropriate position within the chart area. To add a new data point to the existing data source, click anywhere in the chart area, retrieve the x-axis and y-axis information of the clicked location from the `chartMouseClick` event arguments. Then, utilize the `addPoint` method to add a new data point to the existing data source.
+
+To remove a data point from the existing data source, simply click on the desired data point. To achieve this, first, verify whether the clicked data point obtained from `chartMouseClick` already exists in the data source. If it does, remove it by utilizing the `removePoint` method based on its index.
+
+{% tabs %}
+{% highlight js tabtitle="index.jsx" %}
+{% include code-snippet/chart/dynamic-update/click-add-point/app/index.jsx %}
+{% endhighlight %}
+{% highlight ts tabtitle="index.tsx" %}
+{% include code-snippet/chart/dynamic-update/click-add-point/app/index.tsx %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/chart/dynamic-update/click-add-point" %}

ej2-react/chart/feature-modules.md

@@ -0,0 +1,82 @@
+---
+layout: post
+title: Module in React Chart component | Syncfusion
+description: Learn here all about Module in Syncfusion React Chart component of Syncfusion Essential JS 2 and more.
+control: Module 
+platform: ej2-react
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Module in React Chart component
+
+The following modules should be injected to extend chart's functionality.
+
+The available chart modules are
+
+| Module | Description |
+|------|-------------|
+| **Axis Type Feature Modules** |
+| [`Category`](https://ej2.syncfusion.com/react/documentation/api/chart/category)| Inject this module to use category axis type to visualize category (string type) values.|
+| [`DateTime`](https://ej2.syncfusion.com/react/documentation/api/chart/dateTime)| Inject this module to use date time axis type to visualize datetime values.|
+| [`Logarithmic`](https://ej2.syncfusion.com/react/documentation/api/chart/logarithmic)| Inject this module to use log axis type to visualize logarithmic values.|
+| [`DateTimeCategory`](https://ej2.syncfusion.com/react/documentation/api/chart/dateTimeCategory)| Inject this module to use date time category axis type to visualize datetime category values.|
+| **Series Type Feature Modules** |
+| [`LineSeries`](https://ej2.syncfusion.com/react/documentation/api/chart/lineSeries)| Inject this module to use the line type series in the chart.|
+| [`StepLineSeries`](https://ej2.syncfusion.com/react/documentation/api/chart/stepLineSeries)| Inject this module to use the step line type series in the chart.|
+| [`StackingLineSeries`](https://ej2.syncfusion.com/react/documentation/api/chart/stackingLineSeries)| Inject this module to use the stacking line type series in the chart.|
+| [`MultiColoredLineSeries`](https://ej2.syncfusion.com/react/documentation/api/chart/multiColoredLineSeries)| Inject this module to use the multi colored line type series in the chart.|
+| [`SplineSeries`](https://ej2.syncfusion.com/react/documentation/api/chart/splineSeries)| Inject this module to use the spline type series in the chart.|
+| [`AreaSeries`](https://ej2.syncfusion.com/react/documentation/api/chart/areaSeries)| Inject this module to use the area type series in the chart.|
+| [`RangeAreaSeries`](https://ej2.syncfusion.com/react/documentation/api/chart/rangeAreaSeries)| Inject this module to use the range area type series in the chart.|
+| [`RangeStepAreaSeries`](https://ej2.syncfusion.com/react/documentation/api/chart/rangeStepAreaSeries)| Inject this module to use the range step area type series in the chart.|
+| [`SplineRangeAreaSeries`](https://ej2.syncfusion.com/react/documentation/api/chart/splineRangeAreaSeries)| Inject this module to use the spline range area type series in the chart.|
+| [`StackingAreaSeries`](https://ej2.syncfusion.com/react/documentation/api/chart/stackingAreaSeries)| Inject this module to use the stacking area type series in the chart.|
+| [`StackingStepAreaSeries`](https://ej2.syncfusion.com/react/documentation/api/chart/stackingStepAreaSeries)| Inject this module to use the stacking step area type series in the chart.|
+| [`StepAreaSeries`](https://ej2.syncfusion.com/react/documentation/api/chart/stepAreaSeries)| Inject this module to use the step area type series in the chart.|
+| [`SplineAreaSeries`](https://ej2.syncfusion.com/react/documentation/api/chart/splineAreaSeries)| Inject this module to use the spline area type series in the chart.|
+| [`MultiColoredAreaSeries`](https://ej2.syncfusion.com/react/documentation/api/chart/multiColoredAreaSeries)| Inject this module to use the multi colored area type series in the chart.|
+| [`ColumnSeries`](https://ej2.syncfusion.com/react/documentation/api/chart/column)| Inject this module to use the column type series in the chart.||
+| [`RangeColumnSeries`](https://ej2.syncfusion.com/react/documentation/api/chart/rangeColumnSeries)| Inject this module to use the range column type series in the chart.|
+| [`StackingColumnSeries`](https://ej2.syncfusion.com/react/documentation/api/chart/stackingColumnSeries)| Inject this module to use the stacking column type series in the chart.|
+| [`BarSeries`](https://ej2.syncfusion.com/react/documentation/api/chart/barSeries)| Inject this module to use the bar type series in the chart.|
+| [`StackingBarSeries`](https://ej2.syncfusion.com/react/documentation/api/chart/stackingBarSeries)| Inject this module to use the stacking bar type series in the chart.|
+| [`ScatterSeries`](https://ej2.syncfusion.com/react/documentation/api/chart/scatterSeries)| Inject this module to use the scatter type series in the chart.|
+| [`BubbleSeries`](https://ej2.syncfusion.com/react/documentation/api/chart/bubbleSeries)| Inject this module to use the bubble type series in the chart.|
+| [`PolarSeries`](https://ej2.syncfusion.com/react/documentation/api/chart/polarSeries)| Inject this module to use the polar type series in the chart.|
+| [`RadarSeries`](https://ej2.syncfusion.com/react/documentation/api/chart/radarSeries)| Inject this module to use the radar type series in the chart.|
+| [`HiloSeries`](https://ej2.syncfusion.com/react/documentation/api/chart/hiloSeries)| Inject this module to use the hilo type series in the chart.|
+| [`HiloOpenCloseSeries`](https://ej2.syncfusion.com/react/documentation/api/chart/hiloOpenCloseSeries)| Inject this module to use the hilo open close type series in the chart.|
+| [`CandleSeries`](https://ej2.syncfusion.com/react/documentation/api/chart/candleSeries)| Inject this module to use the candle type series in the chart.|
+| [`BoxAndWhiskerSeries`](https://ej2.syncfusion.com/react/documentation/api/chart/boxAndWhiskerSeries)| Inject this module to use the box and whisker type series in the chart.|
+| [`WaterfallSeries`](https://ej2.syncfusion.com/react/documentation/api/chart/waterfallSeries)| Inject this module to use the waterfall type series in the chart.|
+| [`HistogramSeries`](https://ej2.syncfusion.com/react/documentation/api/chart/histogramSeries)| Inject this module to use the histogram type series in the chart.|
+| [`ParetoSeries`](https://ej2.syncfusion.com/react/documentation/api/chart/paretoSeries)| Inject this module to use the pareto type series in the chart.|
+| [`ErrorBar`](https://ej2.syncfusion.com/react/documentation/api/chart/errorBar)| Inject this module to use the error bar feature in series.|
+| **Indicator Type Feature Modules** |
+| [`AccumulationDistributionIndicator`](https://ej2.syncfusion.com/react/documentation/api/chart/accumulationDistributionIndicator)| Inject this module to use the accumulation distribution indicator.|
+| [`AtrIndicator`](https://ej2.syncfusion.com/react/documentation/api/chart/atrIndicator)| Inject this module to use the average true range (ATR) indicator.|
+| [`BollingerBands`](https://ej2.syncfusion.com/react/documentation/api/chart/bollingerBands)| Inject this module to use the bollinger band indicator.|
+| [`EMAIndicator`](https://ej2.syncfusion.com/react/documentation/api/chart/emaIndicator)| Inject this module to use the exponential moving average (EMA) indicator.|
+| [`MomentumIndicator`](https://ej2.syncfusion.com/react/documentation/api/chart/momentumIndicator)| Inject this module to use the momentum indicator.|
+| [`MACDIndicator`](https://ej2.syncfusion.com/react/documentation/api/chart/macdType)| Inject this module to use the moving average convergence divergence (MACD) indicator.|
+| [`RsiIndicator`](https://ej2.syncfusion.com/react/documentation/api/chart/rsiIndicator)| Inject this module to use the relative Strength index (Rsi) indicator.|
+| [`SmaIndicator`](https://ej2.syncfusion.com/react/documentation/api/chart/smaIndicator)| Inject this module to use the simple moving average (SMA) indicator.|
+| [`StochasticIndicator`](https://ej2.syncfusion.com/react/documentation/api/chart/stochasticIndicator)| Inject this module to use the stochastic indicator.|
+| [`TmaIndicator`](https://ej2.syncfusion.com/react/documentation/api/chart/tmaIndicator)| Inject this module to use the trireact moving average indicator.|
+| **Other Feature Modules** |
+| [`StripLine`](https://ej2.syncfusion.com/react/documentation/api/chart/stripLineSettings)| Inject this module to use strip line feature.|
+| [`Trendlines`](https://ej2.syncfusion.com/react/documentation/api/chart/trendlines)| Inject this module to use the trendline feature.|
+| [`DataLabel`](https://ej2.syncfusion.com/react/documentation/api/chart/dataLabel)| Inject this module to use the data label feature.|
+| [`ChartAnnotation`](https://helpej2.syncfusion.com/react/documentation/api/chart/chartAnnotation)| Inject this module to use the annotation feature.|
+| [`Legend`](https://ej2.syncfusion.com/react/documentation/api/chart/legend)| Inject this module to use the legend feature.|
+| [`Tooltip`](https://ej2.syncfusion.com/react/documentation/api/chart/tooltip)| Inject this module to use the tooltip feature.|
+| [`Zoom`](https://ej2.syncfusion.com/react/documentation/api/chart/zoom)| Inject this module to use the zooming and panning feature.|
+| [`DataEditing`](https://ej2.syncfusion.com/react/documentation/api/chart/dataEditing)| Inject this module to use the data editing feature.|
+| [`Crosshair`](https://ej2.syncfusion.com/react/documentation/api/chart/crosshair)| Inject this module to use the crosshair feature.|
+| [`Selection`](https://ej2.syncfusion.com/react/documentation/api/chart/selectionMode)| Inject this module to use the selection feature.|
+| [`Highlight`](https://helpej2.syncfusion.com/react/documentation/api/chart/highlightMode)| Inject this module to use the highlight feature.|
+| [`Export`](https://ej2.syncfusion.com/react/documentation/api/chart/export)| Inject this module to use the export feature.|
+| [`MultiLevelLabel`](https://helpej2.syncfusion.com/react/documentation/api/chart/multiLevelLabels)| Inject this module to use the multi level label feature.|
+
+These modules should be injected into the chart using the `Inject` directive.

ej2-react/code-snippet/3d-chart/working-with-data/working-with-data-cs2/app/index.jsx

@@ -5,7 +5,7 @@ import * as ReactDOM from "react-dom";
 
 function App() {
     const dataManager = new DataManager({
-        url: 'https://services.syncfusion.com/js/production/api/orders',
+        url: 'https://services.syncfusion.com/react/production/api/orders',
       });
       const query = new Query().take(5).where('Estimate', 'lessThan', 3, false);
     return <Chart3DComponent id='charts' style={{ textAlign: "center" }} primaryXAxis={{

ej2-react/code-snippet/3d-chart/working-with-data/working-with-data-cs2/app/index.tsx

@@ -5,7 +5,7 @@ import * as ReactDOM from "react-dom";
 
 function App() {
   const dataManager = new DataManager({
-    url: 'https://services.syncfusion.com/js/production/api/orders',
+    url: 'https://services.syncfusion.com/react/production/api/orders',
   });
   const query = new Query().take(5).where('Estimate', 'lessThan', 3, false);
 return <Chart3DComponent id='charts' style={{ textAlign: "center" }} primaryXAxis={{

ej2-react/code-snippet/3d-chart/working-with-data/working-with-data-cs3/app/index.jsx

@@ -5,7 +5,7 @@ import * as ReactDOM from "react-dom";
 
 function App() {
     const dataManager = new DataManager({
-        url: 'https://services.syncfusion.com/js/production/api/orders',
+        url: 'https://services.syncfusion.com/react/production/api/orders',
         adaptor: new ODataAdaptor()
       });
       const query = new Query();

ej2-react/code-snippet/3d-chart/working-with-data/working-with-data-cs3/app/index.tsx

@@ -5,7 +5,7 @@ import * as ReactDOM from "react-dom";
 
 function App() {
   const dataManager = new DataManager({
-    url: 'https://services.syncfusion.com/js/production/api/orders',
+    url: 'https://services.syncfusion.com/react/production/api/orders',
     adaptor: new ODataAdaptor()
   });
   const query = new Query();