Demos: update splits in descriptions (DevExpress#27621) (DevExpress#2…

…7622)

apps/demos/Demos/Charts/AjaxRequest/description.md

@@ -1,4 +1,4 @@
 If your server stores data in JSON format, you do not need to make AJAX requests to get the data. Instead, assign the URL of your data storage to the Chart's [dataSource](/Documentation/ApiReference/UI_Components/dxChart/Configuration/#dataSource) property. To configure how the component displays data, specify the [series](Documentation/ApiReference/UI_Components/dxChart/Configuration/series/) type and its nested options: [argumentField](/Documentation/ApiReference/UI_Components/dxChart/Configuration/series/#argumentField) and [valueField](/Documentation/ApiReference/UI_Components/dxChart/Configuration/series/#valueField), so the component can determine the object fields that indicate Chart arguments and values in JSON.
-<!--split-->
 
-Note that you can also use a JSONP callback parameter supported by <a href="http://api.jquery.com/jQuery.ajax/" target="_blank">jQuery.ajax()</a> in the [dataSource](/Documentation/ApiReference/UI_Components/dxChart/Configuration/#dataSource).
+Note that you can also use a JSONP callback parameter supported by <a href="http://api.jquery.com/jQuery.ajax/" target="_blank">jQuery.ajax()</a> in the [dataSource](/Documentation/ApiReference/UI_Components/dxChart/Configuration/#dataSource).
+<!--split-->

apps/demos/Demos/Charts/Annotation/description.md

@@ -1,7 +1,7 @@
 Annotations are containers for images, text blocks, and custom content that display additional information about the visualized data.
-<!--split-->
 
 To create annotations, populate the Chart's [annotations](/Documentation/ApiReference/UI_Components/dxChart/Configuration/annotations/) array. Each object in the array configures an individual annotation. To specify properties for all annotations, use the [commonAnnotationSettings](/Documentation/ApiReference/UI_Components/dxChart/Configuration/commonAnnotationSettings/) object. Individual settings take precedence over common settings.
+<!--split-->
 
 You can set each annotation's [type](/Documentation/ApiReference/UI_Components/dxChart/Configuration/annotations/#type) property to *"text"*, *"image"*, or *"custom"*. Depending on the **type**, specify the [text](/Documentation/ApiReference/UI_Components/dxChart/Configuration/annotations/#text) or [image](/Documentation/ApiReference/UI_Components/dxChart/Configuration/annotations/image/) property. You can also add a [description](/Documentation/ApiReference/UI_Components/dxChart/Configuration/annotations/#description) that will be displayed in a tooltip.
 

apps/demos/Demos/Charts/AutoCalculatedBarWidth/description.md

@@ -1,4 +1,4 @@
 This demo illustrates a common issue in multi-series charts. Individual [series](/Documentation/ApiReference/UI_Components/dxChart/Series_Types/BarSeries/) can skip values for certain arguments or include zero values. In such cases, arguments can display a different number of bars and cause uneven gaps between data. 
-<!--split-->
 
 The [ignoreEmptyPoints](/Documentation/ApiReference/UI_Components/dxChart/Series_Types/BarSeries/#ignoreEmptyPoints) property allows you to change this behavior. If you set it to **true**, bars increase their width to fill the gaps. In this demo, you can see how the property affects the following arguments: `Iran`, `Canada`, `Saudi Arabia`, and `Mexico`.
+<!--split-->

apps/demos/Demos/Charts/AxisLabelsOverlapping/description.md

@@ -1,5 +1,4 @@
 In this demo, argument axis labels overlap due to their length. 
-<!--split-->
 
 To specify the overlapping behavior, you can use one of the following [label](/Documentation/ApiReference/UI_Components/dxChart/Configuration/argumentAxis/label/).[overlappingBehavior](/Documentation/ApiReference/UI_Components/dxChart/Configuration/argumentAxis/label/#overlappingBehavior) modes:
 
@@ -14,6 +13,6 @@ Rotates axis labels at the angle specified by the [rotationAngle](/Documentation
 
 - `stagger`      
 Arranges axis labels into two staggered rows. Use the [staggeringSpacing](/Documentation/ApiReference/UI_Components/dxChart/Configuration/argumentAxis/label/#staggeringSpacing) property to specify an empty space between rows.
+<!--split-->
 
-All of the values above can be applied to a horizontal axis, but only `none` and `hide` can be specified for a vertical axis.
-
+All of the values above can be applied to a horizontal axis, but only `none` and `hide` can be specified for a vertical axis.

apps/demos/Demos/Charts/AxisLabelsTemplates/description.md

@@ -1,6 +1,6 @@
 Axis labels display values for [major axis ticks](/Documentation/ApiReference/UI_Components/dxChart/Configuration/commonAxisSettings/tick/).
-<!--split-->
 
 To configure labels for individual axes, specify label settings in the **valueAxis**.[label](/Documentation/ApiReference/UI_Components/dxChart/Configuration/valueAxis/label/) and **argumentAxis**.[label](/Documentation/ApiReference/UI_Components/dxChart/Configuration/argumentAxis/label/) objects. To configure labels for all axes, use the **commonAxisSettings**.[label](/Documentation/ApiReference/UI_Components/dxChart/Configuration/commonAxisSettings/label/) object. Individual settings take precedence over common settings.
 
 This demo illustrates how you can display custom content for axis labels. To replicate this demo, declare SVG markup within the [template](/Documentation/ApiReference/UI_Components/dxChart/Configuration/commonAxisSettings/label/#template) property. You can access a label's original and formatted values from template code. 
+<!--split-->

apps/demos/Demos/Charts/Candlestick/description.md

@@ -1,7 +1,7 @@
 The Candlestick financial chart is designed to communicate trading patterns over a short period of time. A single data point on a Candlestick [series](/Documentation/ApiReference/UI_Components/dxChart/Configuration/series/#type) displays variations in stock prices over the course of a day.
-<!--split-->
 
 You can use the Candlestick type for an individual [series](/Documentation/ApiReference/UI_Components/dxChart/Configuration/series/) or specify the type in the [commonSeriesSettings](/Documentation/ApiReference/UI_Components/dxChart/Configuration/commonSeriesSettings/) object for all series in the Chart. Use the [commonSeriesSettings](/Documentation/ApiReference/UI_Components/dxChart/Configuration/commonSeriesSettings/).[candlestick](/Documentation/ApiReference/UI_Components/dxChart/Series_Types/CandleStickSeries/) object to configure properties of the Chart Candlestick series.
+<!--split-->
 
 In Candlestick series, each point consists of a rectangle (body) and a vertical line (shadow, wick, or tail). The top and bottom values of a vertical line correspond to the highest and lowest prices of the stock, respectively. Use the [highValueField](/Documentation/ApiReference/UI_Components/dxChart/Configuration/series/#highValueField) and [lowValueField](/Documentation/ApiReference/UI_Components/dxChart/Configuration/series/#lowValueField) properties to specify data source fields for these prices.
 

apps/demos/Demos/Charts/ClientSideDataProcessing/description.md

@@ -1,6 +1,6 @@
 The Chart component can get data from a remote storage and process it on the client side. To implement this functionality, assign a [DataSource](/Documentation/ApiReference/Data_Layer/DataSource/) object to the Chart [dataSource](/Documentation/ApiReference/UI_Components/dxChart/Configuration/#dataSource) property.
-<!--split-->
 
 In the [DataSource](/Documentation/ApiReference/Data_Layer/DataSource/), implement a [CustomStore](/Documentation/ApiReference/Data_Layer/CustomStore/). Switch the [CustomStore](/Documentation/ApiReference/Data_Layer/CustomStore/) to the `raw` [loadMode](/Documentation/ApiReference/Data_Layer/CustomStore/Configuration/#loadMode) and load all data from the server in the [load](/Documentation/ApiReference/Data_Layer/CustomStore/Configuration/#load) function as shown in the demo. Set the [paginate](/Documentation/ApiReference/Data_Layer/DataSource/Configuration/#paginate) property to **false** to prevent data from partitioning. You can also apply [filter](/Documentation/ApiReference/Data_Layer/DataSource/Configuration/#filter) to the received values. In this demo, select different values of the drop-down menu under the chart to apply different filters.
+<!--split-->
 
 Once you load the data, specify the [series](/Documentation/ApiReference/UI_Components/dxChart/Configuration/series/) type and its nested options: [argumentField](/Documentation/ApiReference/UI_Components/dxChart/Configuration/series/#argumentField) and [valueField](/Documentation/ApiReference/UI_Components/dxChart/Configuration/series/#valueField), so the component can determine which object fields in the data source indicate Chart arguments and values.

apps/demos/Demos/Charts/ColorEachBar/description.md

@@ -1,8 +1,8 @@
 The Chart assigns one color to one series. To color bars differently, create a separate series for each bar.
-<!--split-->
 
 Assign the `age` field to the [argumentField](/Documentation/ApiReference/UI_Components/dxChart/Configuration/commonSeriesSettings/#argumentField) property of the [commonSeriesSettings](/Documentation/ApiReference/UI_Components/dxChart/Configuration/commonSeriesSettings/) object to specify a common argument for the series. Then specify the [valueField](/Documentation/ApiReference/UI_Components/dxChart/Configuration/series/#valueField) property.
 
 Choose a data field and assign it to the [seriesTemplate](/Documentation/ApiReference/UI_Components/dxChart/Configuration/seriesTemplate/).[nameField](/Documentation/ApiReference/UI_Components/dxChart/Configuration/seriesTemplate/#nameField) property. Each value from this data field generates a separate series.
 
-To learn more about this type of data binding, refer to the following demo: [Dynamic Series from the DataSource](https://js.devexpress.com/Demos/WidgetsGallery/Demo/Charts/SeriesTemplates/).
+To learn more about this type of data binding, refer to the following demo: [Dynamic Series from the DataSource](https://js.devexpress.com/Demos/WidgetsGallery/Demo/Charts/SeriesTemplates/).
+<!--split-->

apps/demos/Demos/Charts/CustomLegendMarkers/description.md

@@ -1,4 +1,4 @@
 Legend markers are SVG elements. To customize a legend marker, declare the SVG markup in the [markerTemplate](/Documentation/ApiReference/UI_Components/dxChart/Configuration/legend/#markerTemplate). You can access the [legend item data object](/Documentation/ApiReference/UI_Components/dxChart/Types/Legend/) inside the template and use it to identify the series and read its parameters.
-<!--split-->
 
-In this demo, the markers' appearance changes when you click the markers to show or hide the corresponding series.
+In this demo, the markers' appearance changes when you click the markers to show or hide the corresponding series.
+<!--split-->

apps/demos/Demos/Charts/ExportCustomMarkup/description.md

@@ -1,4 +1,4 @@
 The [DevExpress.viz.exportFromMarkup(markup, options)](/Documentation/ApiReference/Common/utils/viz/Methods/#exportFromMarkupmarkup_options) method allows you to export SVG content, including [SVG-based DevExtreme components](/Documentation/Guide/Themes_and_Styles/HTML-_and_SVG-Based_Widgets/), to an image or document.
-<!--split-->
 
-The **markup** parameter accepts valid SVG markup (see the `prepareMarkup()` function in the code). To get the markup of a component, call its [svg()](/Documentation/ApiReference/UI_Components/dxChart/Methods/#svg) method. The **options** parameter accepts an object whose fields configure export properties. In this demo, we specify the `width`, `height`, `format`, and `svgToCanvas` fields.  Refer to the [method description](/Documentation/ApiReference/Common/utils/viz/Methods/#exportFromMarkupmarkup_options) for more information on these and other available fields.
+The **markup** parameter accepts valid SVG markup (see the `prepareMarkup()` function in the code). To get the markup of a component, call its [svg()](/Documentation/ApiReference/UI_Components/dxChart/Methods/#svg) method. The **options** parameter accepts an object whose fields configure export properties. In this demo, we specify the `width`, `height`, `format`, and `svgToCanvas` fields.  Refer to the [method description](/Documentation/ApiReference/Common/utils/viz/Methods/#exportFromMarkupmarkup_options) for more information on these and other available fields.
+<!--split-->

apps/demos/Demos/Charts/ExportSeveralCharts/description.md

@@ -1,5 +1,4 @@
 The **DevExpress.viz.exportWidgets(widgetInstances, options)** method allows you to export several charts to a single image or document. 
-<!--split-->
 
 The **widgetInstances** parameter accepts an array with the following format:
 
@@ -9,6 +8,7 @@ The **widgetInstances** parameter accepts an array with the following format:
         ...
         [ widgetInstanceP_1, widgetInstanceP_2, ..., widgetInstanceP_R ]
     ]
+<!--split-->
 
 Each nested array contains component instances that should be in the same row in the exported document. In this demo, `chartInstance` and `pieChartInstance` occupy the only row in the document.
 

apps/demos/Demos/Charts/FlatDataStructure/description.md

@@ -1,9 +1,9 @@
 The TreeMap component visualizes data as a set of rectangles (tiles). The tile size corresponds to a data point value relative to other data points. 
-<!--split-->
 
 The TreeMap component works with collections of objects. If objects in your collection have a plain structure, the component visualizes them as tiles. If your data is hierarchical, the TreeMap displays it as a group of nested tiles.
 
 To bind data to the component, assign the collection of objects to the TreeMap's [dataSource](/Documentation/ApiReference/UI_Components/dxTreeMap/Configuration/#dataSource) property. 
+<!--split-->
 
 Once you assign the data source, specify the [valueField](/Documentation/ApiReference/UI_Components/dxTreeMap/Configuration/#valueField) and [labelField](/Documentation/ApiReference/UI_Components/dxTreeMap/Configuration/#labelField) properties. If you specify these properties, the component can determine the object fields that indicate TreeMap labels and values in the collection. The default values for these properties are `value` and `name`, respectively. This demo uses default values, so there is no need to explicitly specify value and label fields.
 
@@ -30,5 +30,4 @@ For example, one group of objects in the demo data appears as follows:
 
 This group of objects produces a tile with the **Australia** label. The **Australia** tile has two nested tiles labeled **Sydney** and **Melbourne**.
 
-To make the TreeMap more informative, you can specify a [title](/Documentation/ApiReference/UI_Components/dxTreeMap/Configuration/title/) and implement a [tooltip](/Documentation/ApiReference/UI_Components/dxTreeMap/Configuration/tooltip/).
-
+To make the TreeMap more informative, you can specify a [title](/Documentation/ApiReference/UI_Components/dxTreeMap/Configuration/title/) and implement a [tooltip](/Documentation/ApiReference/UI_Components/dxTreeMap/Configuration/tooltip/).

apps/demos/Demos/Charts/HierarchicalDataStructure/description.md

@@ -1,9 +1,9 @@
 The TreeMap component visualizes data as a set of rectangles (tiles). The tile size corresponds to a data point value relative to other data points. 
-<!--split-->
 
 The TreeMap component works with collections of objects. If objects in your collection have a plain structure, the component visualizes them as tiles. If your data is hierarchical, the TreeMap displays it as a group of nested tiles.
 
 To bind data to the component, assign the collection of objects to the TreeMap's [dataSource](/Documentation/ApiReference/UI_Components/dxTreeMap/Configuration/#dataSource) property. 
+<!--split-->
 
 Once you assign the data source, specify the [valueField](/Documentation/ApiReference/UI_Components/dxTreeMap/Configuration/#valueField) and [labelField](/Documentation/ApiReference/UI_Components/dxTreeMap/Configuration/#labelField) properties. If you specify these properties, the component can determine the object fields that indicate TreeMap labels and values in the collection. The default values for these properties are `value` and `name`, respectively.
 

apps/demos/Demos/Charts/NullPointSupport/description.md

@@ -1,4 +1,4 @@
 The [Step Area](https://js.devexpress.com/Demos/WidgetsGallery/Demo/Charts/StepArea/) series uses perpendicular vertical and horizontal lines to connect data points and shades the area under these lines. If a point's value is `null`, the series draws a gap.
-<!--split-->
 
 Only `null` point values result in gaps. `undefined` values are ignored. Multiple 0 values may look like a gap, but if [series points](/Documentation/ApiReference/UI_Components/dxChart/Series_Types/StepAreaSeries/point/) are visible, you can see them in this gap. If you want to remove gaps caused by `null` values, enable the [ignoreEmptyPoints](/Documentation/ApiReference/UI_Components/dxChart/Configuration/series/#ignoreEmptyPoints) property.
+<!--split-->

apps/demos/Demos/Charts/PieWithAnnotations/description.md

@@ -1,10 +1,10 @@
 Annotations are containers for images, text blocks, and custom content. Annotations can help deliver a more refined user-experience and can improve analysis and readability (by displaying additional information for visualized data).
-<!--split-->
 
 To create annotations, populate the PieChart's [annotations](/Documentation/ApiReference/UI_Components/dxPieChart/Configuration/annotations/) array. Each object in the array configures an individual annotation. To specify settings for all annotations, use the [commonAnnotationSettings](/Documentation/ApiReference/UI_Components/dxPieChart/Configuration/commonAnnotationSettings/) object. Individual settings take precedence over common settings.
+<!--split-->
 
 You can set each annotation [type](/Documentation/ApiReference/UI_Components/dxPieChart/Configuration/annotations/#type) property to *"text"*, *"image"*, or *"custom"*. In this demo, the type used for all annotations is *"image"*.
 
 Annotations can deliver more information if you add tooltips. A [tooltip](/Documentation/ApiReference/UI_Components/dxPieChart/Configuration/tooltip/) appears when users hover the mouse pointer over an annotation. This demo illustrates how you can implement a tooltip with custom content via the [tooltipTemplate](/Documentation/ApiReference/UI_Components/dxPieChart/Configuration/annotations/#tooltipTemplate) property.
 
-For more information on annotation settings, refer to the [annotations[]](/Documentation/ApiReference/UI_Components/dxPieChart/Configuration/annotations/) help topic.
+For more information on annotation settings, refer to the [annotations[]](/Documentation/ApiReference/UI_Components/dxPieChart/Configuration/annotations/) help topic.

apps/demos/Demos/Charts/PiesWithEqualSize/description.md

@@ -1,4 +1,4 @@
 To display multiple PieChart components that share [series](/Documentation/ApiReference/UI_Components/dxPieChart/Configuration/series/) and [legend](/Documentation/ApiReference/UI_Components/dxPieChart/Configuration/legend/) settings, you can declare an object with options and use this object in every PieChart.
-<!--split-->
 
-When you display PieChart components side by side, their pies may differ in size. You can join all charts into a size group to resize these pies to match each other. To do so, set the [sizeGroup](/Documentation/ApiReference/UI_Components/dxPieChart/Configuration/#sizeGroup) property of every chart to the same value.
+When you display PieChart components side by side, their pies may differ in size. You can join all charts into a size group to resize these pies to match each other. To do so, set the [sizeGroup](/Documentation/ApiReference/UI_Components/dxPieChart/Configuration/#sizeGroup) property of every chart to the same value.
+<!--split-->

apps/demos/Demos/Charts/PointsAggregationFinancialChart/description.md

@@ -1,6 +1,6 @@
 The Chart component can aggregate series points. To enable this feature, set the **aggregation**.[enabled](/Documentation/ApiReference/UI_Components/dxChart/Configuration/series/aggregation/#enabled) property of a [series](/Documentation/ApiReference/UI_Components/dxChart/Configuration/series/) to **true**. 
-<!--split-->
 
 In this demo, the Chart is bound to the [RangeSelector](/Documentation/ApiReference/UI_Components/dxRangeSelector/) component. If you set the selection to a wide range, the control will use a higher aggregation degree, and vice versa.
 
 Aggregation on zoom is one of many possible use cases for this feature. For information on how to configure aggregation for other scenarios, refer to the following description: [aggregation](/Documentation/ApiReference/UI_Components/dxChart/Configuration/series/aggregation/).
+<!--split-->