You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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.
1
+
The DevExtreme Chart component ships with integrated crosshair support (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.
2
2
<!--split-->
3
3
4
4
This demo configures the following **crosshair** properties:
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.
15
+
To override settings for each line individually, configure **crosshair**.[horizontalLine](/Documentation/ApiReference/UI_Components/dxChart/Configuration/crosshair/horizontalLine/) and **crosshair**.[verticalLine](/Documentation/ApiReference/UI_Components/dxChart/Configuration/crosshair/verticalLine/) objects.
Copy file name to clipboardExpand all lines: apps/demos/Demos/Charts/FunnelChart/description.md
+7-7Lines changed: 7 additions & 7 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,13 +1,13 @@
1
-
DevExtreme Funnel displays the flow of data over different stages. This demo displays conversion rates from website visits to product renewals.
1
+
DevExtreme Funnel displays data/information flow across different stages/periods. This demo displays conversion rates from website visits to product renewals.
Configures export settings. Funnel supports the following export [formats](/Documentation/ApiReference/UI_Components/dxFunnel/Configuration/export/#formats): PNG, PDF, JPEG, SVG, and GIF.
10
+
Configures export settings. Our Funnel Chart supports the following export [formats](/Documentation/ApiReference/UI_Components/dxFunnel/Configuration/export/#formats): PNG, PDF, JPEG, SVG, and GIF.
Use our DevExpress BI Dashboard to embed interactive business intelligence into your next web app.
20
+
Use the DevExpress BI Dashboard to embed interactive business intelligence into your next web app.
21
21
22
-
The Web Dashboard is a data analysis UI component that you can embed into your ASP.NET Core or Angular, React, and Vue applications with .NET backend. Dashboards allow you to display multiple inter-connected data analysis elements such as grids, charts, maps, gauges, and others: all within an automatically-arranged layout.
22
+
Our Web Dashboard is a data analysis UI component you can embed into your ASP.NET Core or Angular, React, and Vue applications with a .NET backend. DevExpress Dashboards allow you to display multiple inter-connected data analysis elements such as grids, charts, maps, gauges, and others: all within an auto-arranged layout.
23
23
24
-
The set of components allows you to deploy an all-in-one solution and switch between Viewer and Designer modes directly on the web client (includes adaptive layouts for tablet & mobile).
24
+
DevExpress Dashboard allows you to deploy an all-in-one solution and switch between Viewer and Designer modes directly within the web client (includes built-in adaptive layouts for tablet & mobile devices).
25
25
26
-
The Web Dashboard is available as a part of a Universal subscription.
26
+
DevExpress is available as part of a Universal subscription.
27
27
28
28
[Get Started with DevExpress BI Dashboard](https://docs.devexpress.com/Dashboard/115955/web-dashboard) | [Explore Demos](https://demos.devexpress.com/Dashboard/)
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.
1
+
DevExtreme Chart supports configurable hover modes for both series and points. This demo applies a common **hoverMode** for all series/points and a custom mode for the component legend.
2
2
<!--split-->
3
3
4
4
You can specify **hoverMode** for the following Chart elements:
-**commonSeriesSettings**.[point](/Documentation/ApiReference/UI_Components/dxChart/Configuration/commonSeriesSettings/point/#hoverMode) (or other Series Type objects)
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.
23
+
To further customize Chart behavior, define the [stickyHovering](/Documentation/ApiReference/UI_Components/dxChart/Configuration/#stickyHovering) property. When enabled (default), points remain in a hovered state until users hover the mouse pointer over other points or move it outside the bounds of the component.
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.
1
+
The DevExtreme Chart component allows you to display data across multiple panes. DevExtreme Chart 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.
2
2
3
3
<!--split-->
4
4
5
5
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.
6
6
7
-
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.
7
+
DevExtreme Chart can display multiple [series](/Documentation/ApiReference/UI_Components/dxChart/Configuration/series/)within a single pane. Specify the **series**.[pane](/Documentation/ApiReference/UI_Components/dxChart/Configuration/series/#pane) property to display a series in a specific pane.
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.
1
+
You can use DevExtreme Chart to visualize data as a [Pareto chart](https://en.wikipedia.org/wiki/Pareto_chart) and display individual values along with their cumulative totals. In this demo, individual values are numbers of complaints and cumulative totals are given in percentages.
2
2
3
3
<!--split-->
4
4
5
-
Follow the steps below to create a Pareto chart:
5
+
To create a Pareto chart you must:
6
6
7
7
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).
8
-
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.
9
-
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).
8
+
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 cumulative total values to this series.
9
+
3. Specify **valueAxis**.[constantLines](/Documentation/ApiReference/UI_Components/dxChart/Configuration/valueAxis/constantLines/) to illustrate [Pareto principle](https://en.wikipedia.org/wiki/Pareto_principle)correlations (80/20).
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.
1
+
When a DevExtreme PieChart contains a large number of data points or if data points are compressed visually, point labels may overlap. Use the [resolveLabelOverlapping](/Documentation/ApiReference/UI_Components/dxPieChart/Configuration/#resolveLabelOverlapping) property to minimize the impact of overlapping labels. In this demo, you can hide or shift overlapping labels.
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.
1
+
DevExtreme Chart can display custom images for series points. Specify the **point**.**image** object within [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.
2
2
<!--split-->
3
3
4
-
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.
4
+
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).
Copy file name to clipboardExpand all lines: apps/demos/Demos/Charts/PyramidChart/description.md
+2-2Lines changed: 2 additions & 2 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,10 +1,10 @@
1
-
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).
1
+
DevExtreme Funnel can display data/information as a pyramid chart. To generate pyramid visualizations, set the [algorithm](/Documentation/ApiReference/UI_Components/dxFunnel/Configuration/#algorithm) property to *"dynamicHeight"* and [invert the Funnel](/Documentation/ApiReference/UI_Components/dxFunnel/Configuration/#inverted).
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.
1
+
DevExtreme PieChart supports small value grouping operations. To enable this functionality, configure the [smallValuesGrouping](/Documentation/ApiReference/UI_Components/dxPieChart/Configuration/series/smallValuesGrouping/) object within [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.
2
2
<!--split-->
3
3
4
-
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.
4
+
You can also set **smallValuesGrouping**.**mode** to *"topN"*. In this mode, our PieChart displays a predefined number of large data points (specified with [topCount](/Documentation/ApiReference/UI_Components/dxPieChart/Configuration/series/smallValuesGrouping/#topCount)) and groups the rest.
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"*.
1
+
Step line charts display data as points joined by horizontal and vertical line segments (forming 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"*.
0 commit comments