Chart: Update demo descriptions (DevExpress#30833)

arman-boyakhchyan · web-flow · commit a3fcede4bc32 · 2025-08-21T11:25:18.000+04:00
diff --git a/apps/demos/Demos/Charts/Crosshair/description.md b/apps/demos/Demos/Charts/Crosshair/description.md
@@ -1,2 +1,15 @@
-In&nbsp;this example, the crosshair pointer is&nbsp;enabled and a&nbsp;custom style is&nbsp;applied to&nbsp;it. The crosshair pointer allows a&nbsp;user to&nbsp;determine the argument and the value of&nbsp;a&nbsp;specific point more precisely.
-<!--split-->
+The DevExtreme Chart component supports crosshairs (vertical and horizontal lines centered on a data point). When enabled, the crosshair follows the cursor and snaps to the nearest series point. To configure crosshair settings, specify the [crosshair](/Documentation/ApiReference/UI_Components/dxChart/Configuration/crosshair/) object.
+<!--split-->
+
+This demo configures the following **crosshair** properties:
+
+- [color](/Documentation/ApiReference/UI_Components/dxChart/Configuration/crosshair/#color)    
+Specifies the line color.
+- [width](/Documentation/ApiReference/UI_Components/dxChart/Configuration/crosshair/#width)    
+Configures the line width.
+- [dashStyle](/Documentation/ApiReference/UI_Components/dxChart/Configuration/crosshair/#dashStyle)    
+Specifies the line style.
+- [label](/Documentation/ApiReference/UI_Components/dxChart/Configuration/crosshair/label/)    
+Configures labels (text and appearance).
+
+You can configure **crosshair**.[horizontalLine](/Documentation/ApiReference/UI_Components/dxChart/Configuration/crosshair/horizontalLine/) and **crosshair**.[verticalLine](/Documentation/ApiReference/UI_Components/dxChart/Configuration/crosshair/verticalLine/) objects to override settings for each line individually.
diff --git a/apps/demos/Demos/Charts/ErrorBars/description.md b/apps/demos/Demos/Charts/ErrorBars/description.md
@@ -1,13 +1,13 @@
-DevExtreme Chart supports value error bars. Implement these bars to indicate data measurement tolerances and [confidence intervals](https://en.wikipedia.org/wiki/Confidence_interval). Configure error bar settings and appearance in the **series**.[valueErrorBar](/Documentation/ApiReference/UI_Components/dxChart/Configuration/series/valueErrorBar/) object.
+DevExtreme Chart supports value error bars. These bars indicate data measurement tolerances and [confidence intervals](https://en.wikipedia.org/wiki/Confidence_interval). Use the **series**.[valueErrorBar](/Documentation/ApiReference/UI_Components/dxChart/Configuration/series/valueErrorBar/) object to configure error bar settings and appearance.
 
 <!--split-->
 
-To enable error bars, specify one of the following pairs of **valueErrorBar** properties:
+To display error bars, specify one of the following pairs of **valueErrorBar** properties:
 
 - [lowValueField](Documentation/ApiReference/UI_Components/dxChart/Configuration/series/valueErrorBar/#lowValueField) and [highValueField](/Documentation/ApiReference/UI_Components/dxChart/Configuration/series/valueErrorBar/#highValueField)    
-Specify predefined error bars for each series point.
+Bind fields that contain error values for each series point.
 
 - [value](Documentation/ApiReference/UI_Components/dxChart/Configuration/series/valueErrorBar/#value) and [type](/Documentation/ApiReference/UI_Components/dxChart/Configuration/series/valueErrorBar/#type)    
-Configure dynamically calculated error bars.
+Calculate error bar values based on series data points.
 
 This demo implements predefined error bars specified in the Chart data source.
diff --git a/apps/demos/Demos/Charts/FunnelChart/description.md b/apps/demos/Demos/Charts/FunnelChart/description.md
@@ -1,19 +1,19 @@
-DevExtreme Funnel displays data in a funnel chart. You can implement funnel charts to display the flow of data over different stages. This demo displays conversion rates from website visits to product renewals.
+DevExtreme Funnel displays the flow of data over different stages. This demo displays conversion rates from website visits to product renewals.
 
 <!--split-->
 
-This demo specifies multiple Funnel configuration objects:
+This demo configures the following objects:
 
 - [title](/Documentation/ApiReference/UI_Components/dxFunnel/Configuration/title/)    
-Specifies a title for the Funnel component.
+Specifies the component title.
 - [export](/Documentation/ApiReference/UI_Components/dxFunnel/Configuration/export/)    
-Configures export settings. Funnel supports multiple export [formats](/Documentation/ApiReference/UI_Components/dxFunnel/Configuration/export/#formats).
+Configures export settings. Funnel supports the following export [formats](/Documentation/ApiReference/UI_Components/dxFunnel/Configuration/export/#formats): PNG, PDF, JPEG, SVG, and GIF.
 - [tooltip](/Documentation/ApiReference/UI_Components/dxFunnel/Configuration/tooltip/)    
 Specifies item tooltips.
 - [label](/Documentation/ApiReference/UI_Components/dxFunnel/Configuration/label/)    
 Configures item labels.
 - [item](/Documentation/ApiReference/UI_Components/dxFunnel/Configuration/item/)    
-Customizes the visual appearance of items.
+Customizes item appearance.
 
 [note]
 
diff --git a/apps/demos/Demos/Charts/HoverMode/description.md b/apps/demos/Demos/Charts/HoverMode/description.md
@@ -1,2 +1,23 @@
-The Chart and PieChart components support different modes of&nbsp;series hovering. This demo shows the _&laquo;includePoints&raquo;_ mode, when all the points of&nbsp;a&nbsp;hovered series change their display style. In&nbsp;addition, you can specify a&nbsp;custom hover mode for legend items. Here, the _&laquo;excludePoints&raquo;_ mode is&nbsp;used, when only the series line changes its display style leaving the points as&nbsp;they were.
-<!--split-->
+DevExtreme Chart supports configurable hover modes for series and points. This demo specifies properties that set common **hoverMode** for all series/points and a custom mode for the component legend.
+<!--split-->
+
+You can specify **hoverMode** for the following Chart elements:
+
+- [series](/Documentation/ApiReference/UI_Components/dxChart/Configuration/series/#hoverMode)    
+A specific series.
+- [commonSeriesSettings](/Documentation/ApiReference/UI_Components/dxChart/Configuration/commonSeriesSettings/#hoverMode)    
+All series.
+- **commonSeriesSettings**.[spline](/Documentation/ApiReference/UI_Components/dxChart/Configuration/commonSeriesSettings/#spline) (or other [Series Type](/Documentation/ApiReference/UI_Components/dxChart/Series_Types/) objects)    
+All series of a specific type.
+- [legend](/Documentation/ApiReference/UI_Components/dxChart/Configuration/legend/#hoverMode)    
+Series hovered in the Chart legend.
+- **series**.[point](/Documentation/ApiReference/UI_Components/dxChart/Configuration/series/point/#hoverMode)    
+Points in a specific series.
+- **commonSeriesSettings**.[point](/Documentation/ApiReference/UI_Components/dxChart/Configuration/commonSeriesSettings/point/#hoverMode) (or other Series Type objects)    
+All points.
+- **commonSeriesSettings**.**spline**.**point**    
+All points in series of a specific type.
+- [argumentAxis](/Documentation/ApiReference/UI_Components/dxChart/Configuration/argumentAxis/#hoverMode)    
+All points at common argument values.
+
+To further customize Chart behavior, define the [stickyHovering](/Documentation/ApiReference/UI_Components/dxChart/Configuration/#stickyHovering) property. When enabled (default), points remain in the hover state until users hover the mouse pointer over other points or move it outside the component.
diff --git a/apps/demos/Demos/Charts/MultiplePanes/description.md b/apps/demos/Demos/Charts/MultiplePanes/description.md
@@ -1,7 +1,7 @@
-The DevExtreme Chart component allows you to display data in multiple panes. To configure a multi-pane chart, specify the [panes[]](/Documentation/ApiReference/UI_Components/dxChart/Configuration/panes/) array. The component stacks panes vertically (or horizontally when [rotated](/Documentation/ApiReference/UI_Components/dxChart/Configuration/#rotated) is `true`).
+The DevExtreme Chart component allows you to display data in multiple panes. The component stacks panes vertically (or horizontally when Chart axes are [rotated](/Documentation/ApiReference/UI_Components/dxChart/Configuration/#rotated)). To create a multi-pane chart, add items to the [panes[]](/Documentation/ApiReference/UI_Components/dxChart/Configuration/panes/) array.
 
 <!--split-->
 
-Chart assigns unique [value axes](/Documentation/ApiReference/UI_Components/dxChart/Configuration/valueAxis/) and a shared [argument axis](/Documentation/ApiReference/UI_Components/dxChart/Configuration/argumentAxis/) to all panes. To configure the value axis of a specific pane, define **valueAxis** properties and assign the **pane**.[name](/Documentation/ApiReference/UI_Components/dxChart/Configuration/panes/#name) value to **valueAxis**.[pane](/Documentation/ApiReference/UI_Components/dxChart/Configuration/valueAxis/#pane).
+The Chart renders multiple [value axes](/Documentation/ApiReference/UI_Components/dxChart/Configuration/valueAxis/) and a shared [argument axis](/Documentation/ApiReference/UI_Components/dxChart/Configuration/argumentAxis/). To create multiple value axes, add a **valueAxis[]** object for each value axis. To assign a value axis to a pane, pass the pane [name](/Documentation/ApiReference/UI_Components/dxChart/Configuration/panes/#name) to the **valueAxis**.[pane](/Documentation/ApiReference/UI_Components/dxChart/Configuration/valueAxis/#pane) property.
 
 DevExtreme Chart can display multiple [series](/Documentation/ApiReference/UI_Components/dxChart/Configuration/series/) in a single pane. Specify the **series**.[pane](/Documentation/ApiReference/UI_Components/dxChart/Configuration/series/#pane) property to display a series in a specific pane.
diff --git a/apps/demos/Demos/Charts/ParetoChart/description.md b/apps/demos/Demos/Charts/ParetoChart/description.md
@@ -1,5 +1,9 @@
-You can utilize the DevExtreme Chart component to display data in a [Pareto chart](https://en.wikipedia.org/wiki/Pareto_chart). A Pareto chart displays individual values along with their cumulative totals. In this demo, individual values are numbers of complaints and cumulative totals are represented as percentages.
+You can use the DevExtreme Chart component to visualize data as a [Pareto chart](https://en.wikipedia.org/wiki/Pareto_chart). Such charts display individual values along with their cumulative totals. In this demo, individual values are numbers of complaints and cumulative totals are given in percentages.
 
 <!--split-->
 
-To create a Pareto chart, configure two [series](/Documentation/ApiReference/UI_Components/dxChart/Configuration/series/) objects. Assign the [Bar](/Documentation/ApiReference/UI_Components/dxChart/Series_Types/BarSeries/) and [Line](/Documentation/ApiReference/UI_Components/dxChart/Series_Types/LineSeries/)/[Spline](/Documentation/ApiReference/UI_Components/dxChart/Series_Types/SplineSeries/) series types to **series**.[type](/Documentation/ApiReference/UI_Components/dxChart/Configuration/series/#type). To represent the numbers of the [Pareto principle](https://en.wikipedia.org/wiki/Pareto_principle) (80/20), you can specify constant lines. This demo configures a **valueAxis**.[constantLines](/Documentation/ApiReference/UI_Components/dxChart/Configuration/valueAxis/constantLines/) object to display a constant line at 80% of the cumulative total axis.
+Follow the steps below to create a Pareto chart:
+
+1. Configure a [Bar](/Documentation/ApiReference/UI_Components/dxChart/Series_Types/BarSeries/) series and assign your primary data to this series (specify **series**.[valueField](/Documentation/ApiReference/UI_Components/dxChart/Configuration/series/#valueField) property).
+2. Add a [Line](/Documentation/ApiReference/UI_Components/dxChart/Series_Types/LineSeries/) or [Spline](/Documentation/ApiReference/UI_Components/dxChart/Series_Types/SplineSeries/) series and assign your cumulative total values to this series.
+3. Specify **valueAxis**.[constantLines](/Documentation/ApiReference/UI_Components/dxChart/Configuration/valueAxis/constantLines/) to illustrate [Pareto principle](https://en.wikipedia.org/wiki/Pareto_principle) correlation (80/20).
diff --git a/apps/demos/Demos/Charts/PieResolveLabelOverlap/description.md b/apps/demos/Demos/Charts/PieResolveLabelOverlap/description.md
@@ -1,2 +1,2 @@
-In&nbsp;the PieChart, series may include a&nbsp;large number of&nbsp;points, which may result in&nbsp;point label overlapping. This demo illustrates the **resolveLabelOverlapping** property that allows you to&nbsp;specify how the component must behave when point labels overlap.
-<!--split-->
+When a DevExtreme Pie Chart contains a lot of data points or they are crowded, point labels may overlap. Use the [resolveLabelOverlapping](/Documentation/ApiReference/UI_Components/dxPieChart/Configuration/#resolveLabelOverlapping) property to resolve overlapping labels. In this demo, you can hide or shift overlapping labels.
+<!--split-->
diff --git a/apps/demos/Demos/Charts/PointImage/description.md b/apps/demos/Demos/Charts/PointImage/description.md
@@ -1,2 +1,4 @@
-This demo shows that the Chart can display custom images instead of&nbsp;standard point symbols.
-<!--split-->
+DevExtreme Chart can display custom images for series points. Specify the **point**.**image** object in [common series](/Documentation/ApiReference/UI_Components/dxChart/Configuration/commonSeriesSettings/point/image/) or [series](/Documentation/ApiReference/UI_Components/dxChart/Configuration/series/point/image/) settings to display these images.
+<!--split-->
+
+This demo [hides](/Documentation/ApiReference/UI_Components/dxChart/Configuration/commonSeriesSettings/point/#visible) default point [symbols](/Documentation/ApiReference/UI_Components/dxChart/Configuration/commonSeriesSettings/point/#symbol) and calls the [customizePoint](/Documentation/ApiReference/UI_Components/dxChart/Configuration/#customizePoint) function to display images based on point values.
diff --git a/apps/demos/Demos/Charts/PyramidChart/description.md b/apps/demos/Demos/Charts/PyramidChart/description.md
@@ -1,14 +1,14 @@
-DevExtreme Funnel can display data in a pyramid chart. To configure the component as a pyramid chart, assign *"dynamicHeight"* to the [algorithm](/Documentation/ApiReference/UI_Components/dxFunnel/Configuration/#algorithm) property and enable [inverted](/Documentation/ApiReference/UI_Components/dxFunnel/Configuration/#inverted).
+DevExtreme Funnel can display data as a pyramid chart. To create such visualization, set the [algorithm](/Documentation/ApiReference/UI_Components/dxFunnel/Configuration/#algorithm) property to *"dynamicHeight"* and [invert the Funnel](/Documentation/ApiReference/UI_Components/dxFunnel/Configuration/#inverted).
 <!--split-->
 
-This demo specifies multiple Funnel configuration objects:
+This demo configures the following objects:
 
 - [title](/Documentation/ApiReference/UI_Components/dxFunnel/Configuration/title/)    
-Specifies a title for the Funnel component.
+Specifies the component title.
 - [tooltip](/Documentation/ApiReference/UI_Components/dxFunnel/Configuration/tooltip/)    
 Specifies item tooltips.
 - [item](/Documentation/ApiReference/UI_Components/dxFunnel/Configuration/item/)    
-Customizes the appearance of items.
+Customizes item appearance.
 - [legend](/Documentation/ApiReference/UI_Components/dxFunnel/Configuration/legend/)    
 Configures the component legend.
 - [label](/Documentation/ApiReference/UI_Components/dxFunnel/Configuration/label/)    
diff --git a/apps/demos/Demos/Charts/SmallValueGroups/description.md b/apps/demos/Demos/Charts/SmallValueGroups/description.md
@@ -1,2 +1,4 @@
-In&nbsp;this example, the PieChart component combines all values below the **threshold** property in&nbsp;one category called _&laquo;others&raquo;_.
-<!--split-->
+DevExtreme PieChart supports small value grouping. To enable this functionality, configure the [smallValuesGrouping](/Documentation/ApiReference/UI_Components/dxPieChart/Configuration/series/smallValuesGrouping/) object in [series](/Documentation/ApiReference/UI_Components/dxPieChart/Configuration/series/) or [commonSeriesSettings](/Documentation/ApiReference/UI_Components/dxPieChart/Configuration/commonSeriesSettings/). This demo sets **smallValuesGrouping**.[mode](/Documentation/ApiReference/UI_Components/dxPieChart/Configuration/series/smallValuesGrouping/) to *"smallValueThreshold"* and specifies the [threshold](/Documentation/ApiReference/UI_Components/dxPieChart/Configuration/series/smallValuesGrouping/#threshold) property.
+<!--split-->
+
+You can also set **smallValuesGrouping**.**mode** to *"topN"*. In this mode, PieChart displays a predefined number of the largest data points (specified with [topCount](/Documentation/ApiReference/UI_Components/dxPieChart/Configuration/series/smallValuesGrouping/#topCount)) and groups the rest.
diff --git a/apps/demos/Demos/Charts/StepLine/description.md b/apps/demos/Demos/Charts/StepLine/description.md
@@ -1,2 +1,2 @@
-_Step line_ series are much like traditional line series. The primary difference is&nbsp;that in _step line_ series, data points are connected by&nbsp;vertical and horizontal lines --- resulting in&nbsp;a&nbsp;&laquo;stair step&raquo; effect.
+Step line charts display data as points joined by horizontal and vertical line segments that form a step-like pattern. To create a step line chart, set the **series**.[type](/Documentation/ApiReference/UI_Components/dxChart/Configuration/series/#type) property to *"stepline"*. 
 <!--split-->
diff --git a/apps/demos/Demos/Charts/TooltipAPI/description.md b/apps/demos/Demos/Charts/TooltipAPI/description.md
@@ -1,2 +1,2 @@
-This demo illustrates how to&nbsp;show and hide the point&rsquo;s tooltip with the API. To&nbsp;test this feature, select a&nbsp;continent from the drop-down menu under the PieChart or&nbsp;click a&nbsp;point directly in&nbsp;the PieChart.
+You can use tooltip API members to manage its visibility in code. This demo creates a [DevExtreme PieChart](/Documentation/Guide/UI_Components/PieChart/Getting_Started_with_PieChart/) and disables its default tooltip. When you click a pie segment or select an item in the **Choose Region** [box], the [showTooltip()](/Documentation/ApiReference/UI_Components/dxChart/Chart_Elements/Point/Methods/#showTooltip) method call displays a tooltip.
 <!--split-->
