Chart: update Overview #7056
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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/'). | ||
|
|
||
| In this overview, you can find a map of Chart elements, information about key features, and what to explore next. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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](/concepts/05%20UI%20Components/Chart/20%20Axes/00%20Overview.md '/Documentation/Guide/UI_Components/Chart/Axes/Overview/') | ||
| 2. [Argument axis](/concepts/05%20UI%20Components/Chart/20%20Axes/00%20Overview.md '/Documentation/Guide/UI_Components/Chart/Axes/Overview/') | ||
| 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/) | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,24 @@ | ||
| - **Series Options** | ||
|
|
||
| The Chart component features over 20 [types of series](/concepts/05%20UI%20Components/Chart/11%20Series%20Types/10%20Line%20Series.md '/Documentation/Guide/UI_Components/Chart/Series_Types/'). [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/'). | ||
|
There was a problem hiding this comment. I think we can consider adding all map of different chart types here (similar with [kendo](https://www.telerik.com/kendo-jquery-ui/charts or MUI) Please take a look to the comparison that we have |
||
|
|
||
| - **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 Chart with additional information elements, such as the following: | ||
|
|
||
| - [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** | ||
|
There was a problem hiding this comment. Let's add a drill-down feature https://js.devexpress.com/React/Demos/WidgetsGallery/Demo/Charts/ChartsDrillDown/MaterialBlueLight/ |
||
| Add interactivity to your Chart with the following elements: | ||
|
There was a problem hiding this comment. It would be nice to include |
||
|
|
||
| - [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/') | ||
|
There was a problem hiding this comment. Let's add one more group |
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,3 @@ | ||
| - [API](/api-reference/10%20UI%20Components/dxChart '/Documentation/ApiReference/UI_Components/dxChart/') | ||
|
There was a problem hiding this comment. Should not we add like to GS here as well? |
||
|
|
||
| - [Demos](https://js.devexpress.com/Demos/WidgetsGallery/Demo/Charts/Overview/) | ||
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I think we can highlight argument axis similar way as we highlight value axis in the picture