Chart: update Overview (DevExpress#7056) (DevExpress#7192)

vladaskorohodova · web-flow · commit d82565266879 · 2025-04-09T10:13:53.000+04:00
diff --git a/concepts/05 UI Components/Chart/00 Overview.md b/concepts/05 UI Components/Chart/00 Overview.md
diff --git a/concepts/05 UI Components/Chart/02 Overview/00 Overview.md b/concepts/05 UI Components/Chart/02 Overview/00 Overview.md
@@ -0,0 +1,3 @@
+DevExtreme Chart is an interactive UI component that visualizes data from local or remote storage with various [series types](/concepts/05%20UI%20Components/Chart/11%20Series%20Types/10%20Line%20Series.md '/Documentation/Guide/UI_Components/Chart/Series_Types/').
+
+This overview highlights Chart elements, key features, and next steps.
diff --git a/concepts/05 UI Components/Chart/02 Overview/05 Elements.md b/concepts/05 UI Components/Chart/02 Overview/05 Elements.md
@@ -0,0 +1,10 @@
+<p><img src="/images/ChartJS/chart-elements.png" alt="Chart elements" style="margin:0px auto; display:block; width: 870px;"></p>
+
+1. [Value axis](/Documentation/ApiReference/UI_Components/dxChart/Configuration/valueAxis/)
+2. [Argument axis](/Documentation/ApiReference/UI_Components/dxChart/Configuration/argumentAxis/)
+3. [Legend](/concepts/05%20UI%20Components/Chart/35%20Legend/00%20Overview.md '/Documentation/Guide/UI_Components/Chart/Legend/Overview/')
+4. [Title](/concepts/05%20UI%20Components/Chart/58%20Title%20and%20Subtitle.md '/Documentation/Guide/UI_Components/Chart/Title_and_Subtitle/')
+5. [Point label](/concepts/05%20UI%20Components/Chart/15%20Point%20Labels/00%20Overview.md '/Documentation/Guide/UI_Components/Chart/Point_Labels/Overview/')
+6. [Area](/Documentation/Guide/UI_Components/Chart/Series_Types/Area_Series/)
+7. [Line](/Documentation/Guide/UI_Components/Chart/Series_Types/Line_Series/)
+8. [Bar](/Documentation/Guide/UI_Components/Chart/Series_Types/Bar_Series/)
diff --git a/concepts/05 UI Components/Chart/02 Overview/10 Key Features.md b/concepts/05 UI Components/Chart/02 Overview/10 Key Features.md
@@ -0,0 +1,47 @@
+- **Series Types**    
+The Chart component includes over 20 [series types](/concepts/05%20UI%20Components/Chart/11%20Series%20Types/10%20Line%20Series.md '/Documentation/Guide/UI_Components/Chart/Series_Types/'), with the most popular ones being:
+    - [Line](/Documentation/Guide/UI_Components/Chart/Series_Types/Line_Series/)
+    - [Bar](/Documentation/Guide/UI_Components/Chart/Series_Types/Bar_Series/)
+    - [Area](/Documentation/Guide/UI_Components/Chart/Series_Types/Area_Series/)
+    - [Scatter](/Documentation/Guide/UI_Components/Chart/Series_Types/Scatter_Series/)
+    - [Bubble](/Documentation/Guide/UI_Components/Chart/Series_Types/Bubble_Series/)
+    - [Financial](/Documentation/Guide/UI_Components/Chart/Series_Types/Financial_Series/)
+    - [Range](/Documentation/Guide/UI_Components/Chart/Series_Types/Range_Series/)
+
+    [Combine](/concepts/05%20UI%20Components/Chart/10%20Series/00%20Overview.md '/Documentation/Guide/UI_Components/Chart/Series/Overview/') them, [customize](/Documentation/Guide/UI_Components/Chart/Series/Customize_Appearance/) appearance, and configure individual [points](/concepts/05%20UI%20Components/Chart/14%20Series%20Points/00%20Overview.md '/Documentation/Guide/UI_Components/Chart/Series_Points/Overview/').
+
+- **Data Sources**    
+Chart can load and update data from various [data source](/concepts/70%20Data%20Binding/00%20Specify%20a%20Data%20Source/10%20Local%20Array.md '/Documentation/Guide/Data_Binding/Specify_a_Data_Source/Local_Array/') types. Bind data [directly](/Documentation/Guide/UI_Components/Chart/Data_Binding/Bind_Series_to_Data/#Directly) or use a [series template](/Documentation/Guide/UI_Components/Chart/Data_Binding/Bind_Series_to_Data/#Using_a_Series_Template).
+
+- **Informational Elements**    
+You can enhance the Chart with additional information elements, such as:
+
+    - [Legend](/concepts/05%20UI%20Components/Chart/35%20Legend/00%20Overview.md '/Documentation/Guide/UI_Components/Chart/Legend/Overview/')
+    - [Grid](/concepts/05%20UI%20Components/Chart/55%20Grid/00%20Grid.md '/Documentation/Guide/UI_Components/Chart/Grid/')
+    - [Title and Subtitle](/concepts/05%20UI%20Components/Chart/58%20Title%20and%20Subtitle.md '/Documentation/Guide/UI_Components/Chart/Title_and_Subtitle/')
+    - [Strips](/concepts/05%20UI%20Components/Chart/60%20Strips.md '/Documentation/Guide/UI_Components/Chart/Strips/')
+    - [Constant Lines](/concepts/05%20UI%20Components/Chart/65%20Constant%20Lines.md '/Documentation/Guide/UI_Components/Chart/Constant_Lines/')
+    - [Error Bars](/concepts/05%20UI%20Components/Chart/85%20Error%20Bars.md '/Documentation/Guide/UI_Components/Chart/Error_Bars/')
+
+- **Interactive Features**    
+Add interactivity to your Chart with the following elements:
+
+    - [Tooltips](/concepts/05%20UI%20Components/Chart/30%20Tooltips/00%20Overview.md '/Documentation/Guide/UI_Components/Chart/Tooltips/Overview/')
+    - [Crosshair](/concepts/05%20UI%20Components/Chart/80%20Crosshair.md '/Documentation/Guide/UI_Components/Chart/Crosshair/')
+    - [Zooming and Panning](/concepts/05%20UI%20Components/Chart/95%20Zooming%20and%20Panning '/Documentation/Guide/UI_Components/Chart/Zooming_and_Panning/')
+    - [Client-Side Exporting and Printing](/concepts/05%20UI%20Components/Chart/99%20Client-Side%20Exporting%20and%20Printing '/Documentation/Guide/UI_Components/Chart/Client-Side_Exporting_and_Printing/')
+    - [Adaptive Layout](/concepts/05%20UI%20Components/Chart/89%20Adaptive%20Layout.md '/Documentation/Guide/UI_Components/Chart/Adaptive_Layout/')
+    - [Drill-Down](/Documentation/Guide/UI_Components/Chart/Drill-Down_Chart/) 
+
+- **Customization**    
+The following Chart customizations are available:
+
+    - [Multiple Axes](/Documentation/Guide/UI_Components/Chart/Axes/Multi-Axis_Chart/)
+    - [Multiple Panes](/Documentation/Guide/UI_Components/Chart/Panes/Multi-Pane_Chart/)
+    - [Custom Legend Markers](https://js.devexpress.com/Demos/WidgetsGallery/Demo/Charts/CustomLegendMarkers/)
+    - [Axis Label Templates](https://js.devexpress.com/Demos/WidgetsGallery/Demo/Charts/AxisLabelsTemplates/) 
+    - [Tooltip Templates](https://js.devexpress.com/Demos/WidgetsGallery/Demo/Charts/TooltipHTMLSupport/)
+    - [Color Gradients and Patterns](/Documentation/Guide/UI_Components/Chart/Series/Customize_Appearance/)
+
+- **Data Aggregation**    
+Charts with too many series points can impact performance and readability. To improve analysis, DevExtreme Chart supports point and discrete [aggregation](/Documentation/Guide/UI_Components/Chart/Data_Aggregation/) modes.
diff --git a/concepts/05 UI Components/Chart/02 Overview/15 Explore More.md b/concepts/05 UI Components/Chart/02 Overview/15 Explore More.md
@@ -0,0 +1,3 @@
+- [API](/api-reference/10%20UI%20Components/dxChart '/Documentation/ApiReference/UI_Components/dxChart/')
+
+- [Demos](https://js.devexpress.com/Demos/WidgetsGallery/Demo/Charts/Overview/)
diff --git a/concepts/05 UI Components/Chart/10 Series/00 Overview.md b/concepts/05 UI Components/Chart/10 Series/00 Overview.md
@@ -1,3 +1,7 @@
+---
+title: Chart - Series Overview
+---
+
 A series is a collection of related data points. 
 
 ![DevExtreme HTML5 JavaScript Charts Series](/images/ChartJS/visual_elements/series.png)
diff --git a/concepts/05 UI Components/Chart/14 Series Points/00 Overview.md b/concepts/05 UI Components/Chart/14 Series Points/00 Overview.md
@@ -1,3 +1,7 @@
+---
+title: Chart - Series Points Overview
+---
+
 A series point is a visual representation of one or several data objects. Series points can have different shapes and sizes depending on the [series types](/concepts/05%20UI%20Components/Chart/11%20Series%20Types/10%20Line%20Series.md '/Documentation/Guide/UI_Components/Chart/Series_Types/'). 
 
 ![DevExtreme HTML5 JavaScript Charts SeriesPoints](/images/ChartJS/visual_elements/series_points.png)
diff --git a/concepts/05 UI Components/Chart/15 Point Labels/00 Overview.md b/concepts/05 UI Components/Chart/15 Point Labels/00 Overview.md
@@ -1,3 +1,7 @@
+---
+title: Chart - Point Labels Overview
+---
+
 Each [series point](/concepts/05%20UI%20Components/Chart/14%20Series%20Points/00%20Overview.md '/Documentation/Guide/UI_Components/Chart/Series_Points/Overview/') can be accompanied with a label that displays the point's value(s) or custom data.
 
 ![DevExtreme HTML5 JavaScript Charts SeriesPoints](/images/ChartJS/visual_elements/point_labels.png)
diff --git a/concepts/05 UI Components/Chart/20 Axes/00 Overview.md b/concepts/05 UI Components/Chart/20 Axes/00 Overview.md
@@ -1,3 +1,7 @@
+---
+title: Chart - Axes Overview
+---
+
 The Chart UI component visualizes data on the rectangular coordinate system. In this system, each point is determined on a plane by two components: the argument and the value, each indicated on a devoted axis.
 
 ![DevExtreme HTML5 JavaScript Charts Axis Axes](/images/ChartJS/visual_elements/axes.png)
diff --git a/concepts/05 UI Components/Chart/30 Tooltips/00 Overview.md b/concepts/05 UI Components/Chart/30 Tooltips/00 Overview.md
@@ -1,3 +1,7 @@
+---
+title: Chart - Tooltips Overview
+---
+
 A tooltip is a small pop-up rectangle displaying information about a [series point](/concepts/05%20UI%20Components/Chart/14%20Series%20Points/00%20Overview.md '/Documentation/Guide/UI_Components/Chart/Series_Points/Overview/') that the user pauses on. By default, the information is the point value, but it is possible to display anything in a tooltip.
 
 ![DevExtreme HTML5 JavaScript Charts Tooltip](/images/ChartJS/visual_elements/tooltip.png)
diff --git a/concepts/05 UI Components/Chart/35 Legend/00 Overview.md b/concepts/05 UI Components/Chart/35 Legend/00 Overview.md
@@ -1,4 +1,8 @@
-The legend is a chart component that helps a user identify series. It contains several colored items, one per series. 
+---
+title: Chart - Legend Overview
+---
+
+The legend helps users identify series by displaying a colored item for each series.
 
 ![DevExtreme HTML5 JavaScript Charts Legend](/images/ChartJS/visual_elements/legend.png)
 
diff --git a/concepts/05 UI Components/Chart/40 Panes/00 Overview.md b/concepts/05 UI Components/Chart/40 Panes/00 Overview.md
@@ -1,3 +1,7 @@
+---
+title: Chart - Panes Overview
+---
+
 A pane is a chart area containing series. If there are many series in the Chart, they can be distributed between multiple panes.
 
 ![DevExtreme HTML5 JavaScript Charts Panes](/images/ChartJS/visual_elements/pane.png)
diff --git a/images/ChartJS/chart-elements.png b/images/ChartJS/chart-elements.png

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+DevExtreme Chart is an interactive UI component that visualizes data from local or remote storage with various [series types](/concepts/05%20UI%20Components/Chart/11%20Series%20Types/10%20Line%20Series.md '/Documentation/Guide/UI_Components/Chart/Series_Types/').`
	`2`	`+`
	`3`	`+This overview highlights Chart elements, key features, and next steps.`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+- [API](/api-reference/10%20UI%20Components/dxChart '/Documentation/ApiReference/UI_Components/dxChart/')`
	`2`	`+`
	`3`	`+- [Demos](https://js.devexpress.com/Demos/WidgetsGallery/Demo/Charts/Overview/)`