diff --git a/blazor/stock-chart/accessibility.md b/blazor/stock-chart/accessibility.md index 4301b7edff..985199cea9 100644 --- a/blazor/stock-chart/accessibility.md +++ b/blazor/stock-chart/accessibility.md @@ -1,7 +1,7 @@ --- layout: post title: Accessibility in Blazor Stock Chart Component | Syncfusion -description: Checkout and learn here all about Accessibility using Keyboard navigation in Syncfusion Blazor Stock Chart component and more. +description: Check out and learn here all about Accessibility using Keyboard navigation in Syncfusion Blazor Stock Chart component and more. platform: Blazor control: Stock Chart documentation: ug @@ -9,7 +9,7 @@ documentation: ug # Accessibility in Blazor Stock Chart Component -The Blazor Stock Chart component followed the accessibility guidelines and standards, including [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), [WCAG 2.2](https://www.w3.org/TR/WCAG22/) standards, and [WCAG roles](https://www.w3.org/TR/wai-aria/#roles) that are commonly used to evaluate accessibility. +The Blazor Stock Chart component follows accessibility guidelines and standards, including [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), [WCAG 2.2](https://www.w3.org/TR/WCAG22/) standards, and [WCAG roles](https://www.w3.org/TR/wai-aria/#roles) that are commonly used to evaluate accessibility. The accessibility compliance for the Blazor Stock Chart component is outlined below. @@ -30,16 +30,16 @@ The accessibility compliance for the Blazor Stock Chart component is outlined be margin: 0.5em 0; } +
Yes - All features of the component meet the requirement.
Intermediate - Some features of the component do not meet the requirement.
No - The component does not meet the requirement.
- ## WAI-ARIA attributes -The Blazor Stock Chart component followed the [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/patterns/alert/) patterns to meet the accessibility. The following ARIA attributes are used in the Blazor Stock Chart component: +The Blazor Stock Chart component follows the [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/patterns/alert/) patterns to meet accessibility requirements. The following ARIA attributes are used in the Blazor Stock Chart component: * img (role) * button (role) @@ -50,27 +50,27 @@ The Blazor Stock Chart component followed the [WAI-ARIA](https://www.w3.org/WAI/ ## Keyboard interaction -The Blazor Stock Chart component followed the [keyboard interaction](https://www.w3.org/WAI/ARIA/apg/patterns/alert/#keyboardinteraction) guideline, making it easy for people who use assistive technologies (AT) and those who completely rely on keyboard navigation. The following keyboard shortcuts are supported by the Blazor Stock Chart component. +The Blazor Stock Chart component follows the [keyboard interaction](https://www.w3.org/WAI/ARIA/apg/patterns/alert/#keyboardinteraction) guideline, enabling effective use with assistive technologies (AT) and full keyboard navigation. The following keyboard shortcuts are supported by the Blazor Stock Chart component. | Windows | Mac | Description | | --- | --- | --- | -| Alt + J | ⌥ + J | Moves the focus to the Stock Chart element. | -| Tab | Tab | Moves the focus to the next element in the Stock Chart. | -| Shift + Tab | ⇧ + Tab | Moves the focus to the previous element in the Stock Chart. | -| ↓ | ↓ | Moves the focus to the data point left side from the selected point. | -| ↑ | ↑ | Moves the focus to the data point right side from the selected point. | -| ↓ or ← | ↓ or ← | Moves the focus to the legend left side from the selected legend. | -| ↑ or → | ↑ or → | Moves the focus to the legend right side from the selected legend. | +| Alt + J | ⌥ + J | Moves focus to the Stock Chart element. | +| Tab | Tab | Moves focus to the next element in the stock chart. | +| Shift + Tab | ⇧ + Tab | Moves focus to the previous element in the stock chart. | +| ↓ | ↓ | Moves focus to the data point to the left of the selected point. | +| ↑ | ↑ | Moves focus to the data point to the right of the selected point. | +| ↓ or ← | ↓ or ← | Moves focus to the legend item to the left of the selected legend. | +| ↑ or → | ↑ or → | Moves focus to the legend item to the right of the selected legend. | | Enter/Space | Enter/Space | Toggles the visibility of the corresponding series. | -| ESC | Esc | Cancel the tooltip for the data point. | -| Ctrl + P | ⌘ + P | Prints the Stock Chart. | +| Esc | Esc | Cancels the tooltip for the data point. | +| Ctrl + P | ⌘ + P | Prints the stock chart. | ## Ensuring accessibility -The Blazor Stock Chart component's accessibility levels are ensured through an [axe-core](https://www.nuget.org/packages/Deque.AxeCore.Playwright) with playwright tests. +The Blazor Stock Chart component's accessibility levels are validated using [axe-core](https://www.nuget.org/packages/Deque.AxeCore.Playwright) with Playwright tests. The accessibility compliance of the Blazor Stock Chart component is shown in the following sample. Open the [sample](https://blazor.syncfusion.com/accessibility/stock-chart) in a new window to evaluate the accessibility of the Blazor Stock Chart component with accessibility tools. ## See also -* [Accessibility in Syncfusion® Blazor components](https://blazor.syncfusion.com/documentation/common/accessibility) \ No newline at end of file +* [Accessibility in Syncfusion® Blazor components](https://blazor.syncfusion.com/documentation/common/accessibility) diff --git a/blazor/stock-chart/appearance.md b/blazor/stock-chart/appearance.md index c1d5c84886..973091d184 100644 --- a/blazor/stock-chart/appearance.md +++ b/blazor/stock-chart/appearance.md @@ -1,7 +1,7 @@ --- layout: post title: Appearance in Blazor Stock Chart Component | Syncfusion -description: Checkout and learn here all about appearance in Syncfusion Blazor Stock Chart component and much more. +description: Check out and learn about configuring chart appearance in the Syncfusion Blazor Stock Chart component to refine visual presentation. platform: Blazor control: Stock Chart documentation: ug @@ -11,7 +11,7 @@ documentation: ug ## Stock Chart Title -Stock Chart can be given a title using [Title](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartModel.html#Syncfusion_Blazor_Charts_StockChartModel_Title) property, to show the information about the data plotted. +Set a chart title using the [Title](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartModel.html#Syncfusion_Blazor_Charts_StockChartModel_Title) property to provide context for the plotted data. ```cshtml @@ -28,11 +28,10 @@ Stock Chart can be given a title using [Title](https://help.syncfusion.com/cr/bl @code { - public class ChartData { - public DateTime XValue {get; set;} - public double YValue {get; set;} + public DateTime XValue { get; set; } + public double YValue { get; set; } } public List DataSource = new List @@ -43,11 +42,10 @@ Stock Chart can be given a title using [Title](https://help.syncfusion.com/cr/bl new ChartData { XValue = new DateTime(2008, 01, 01), YValue = 38 }, new ChartData { XValue = new DateTime(2009, 01, 01), YValue = 54 }, new ChartData { XValue = new DateTime(2010, 01, 01), YValue = 57 }, - new ChartData { XValue = new DateTime(2011, 01, 01), YValue = 70 }, + new ChartData { XValue = new DateTime(2011, 01, 01), YValue = 70 } }; } - ``` ![Blazor Stock Chart with Title](images/appearance/blazor-stock-chart-title.png) @@ -56,7 +54,7 @@ Stock Chart can be given a title using [Title](https://help.syncfusion.com/cr/bl ## Title Customizations -The `TextStyle` property of chart title provides options to customize the `Size`, `Color`, `FontFamily`, `FontWeight`, `FontStyle`, `Opacity`, `TextAlignment` and `TextOverflow`. +The `TextStyle` property of the chart title provides options to customize `Size`, `Color`, `FontFamily`, `FontWeight`, `FontStyle`, `Opacity`, `TextAlignment`, and `TextOverflow`. ```cshtml @@ -74,11 +72,10 @@ The `TextStyle` property of chart title provides options to customize the `Size` @code { - public class ChartData { - public DateTime XValue {get; set;} - public double YValue {get; set;} + public DateTime XValue { get; set; } + public double YValue { get; set; } } public List DataSource = new List @@ -89,7 +86,7 @@ The `TextStyle` property of chart title provides options to customize the `Size` new ChartData { XValue = new DateTime(2008, 01, 01), YValue = 38 }, new ChartData { XValue = new DateTime(2009, 01, 01), YValue = 54 }, new ChartData { XValue = new DateTime(2010, 01, 01), YValue = 57 }, - new ChartData { XValue = new DateTime(2011, 01, 01), YValue = 70 }, + new ChartData { XValue = new DateTime(2011, 01, 01), YValue = 70 } }; } @@ -99,9 +96,9 @@ The `TextStyle` property of chart title provides options to customize the `Size` ## Stock Chart Theme -Changing theme will affect background color, gridlines, tooltip colors and appearance. +Changing the theme affects background color, gridlines, tooltip appearance, and overall styling. -Stock chart is shipped with several built-in themes such as `Material`, `Fabric`, `Bootstrap` , `HighContrastLight`, `MaterialDark`, `FabricDark`, `FabricDark`, `HighContrast` and `BootstrapDark`. +Stock Chart includes several built-in themes such as `Material`, `Fabric`, `Bootstrap`, `HighContrastLight`, `MaterialDark`, `FabricDark`, `HighContrast`, and `BootstrapDark`. ```cshtml @@ -118,11 +115,10 @@ Stock chart is shipped with several built-in themes such as `Material`, `Fabric` @code { - public class ChartData { - public DateTime XValue {get; set;} - public double YValue {get; set;} + public DateTime XValue { get; set; } + public double YValue { get; set; } } public List DataSource = new List @@ -133,7 +129,7 @@ Stock chart is shipped with several built-in themes such as `Material`, `Fabric` new ChartData { XValue = new DateTime(2008, 01, 01), YValue = 38 }, new ChartData { XValue = new DateTime(2009, 01, 01), YValue = 54 }, new ChartData { XValue = new DateTime(2010, 01, 01), YValue = 57 }, - new ChartData { XValue = new DateTime(2011, 01, 01), YValue = 70 }, + new ChartData { XValue = new DateTime(2011, 01, 01), YValue = 70 } }; } @@ -143,4 +139,4 @@ Stock chart is shipped with several built-in themes such as `Material`, `Fabric` ## See Also -* [Axis Customization](./axis-customization) \ No newline at end of file +* [Axis Customization](./axis-customization) diff --git a/blazor/stock-chart/axis-customization.md b/blazor/stock-chart/axis-customization.md index 2549f34a87..40076f1808 100644 --- a/blazor/stock-chart/axis-customization.md +++ b/blazor/stock-chart/axis-customization.md @@ -1,7 +1,7 @@ --- layout: post title: Axis Customization in Blazor Stock Chart Component | Syncfusion -description: Checkout and learn here all about axis customization in Syncfusion Blazor Stock Chart component and more. +description: Check out and learn here all about axis customization in the Syncfusion Blazor Stock Chart component and more. platform: Blazor control: Stock Chart documentation: ug @@ -13,7 +13,7 @@ documentation: ug ## Title -A title can be added to the axis using the [Title](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfStockChart.html#Syncfusion_Blazor_Charts_SfStockChart_Title) property to provide quick information to the user about the data plotted in the axis. Title style can be customized using the [TitleStyle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartTitleStyle.html) property of the axis. +Add a chart title using the [Title](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfStockChart.html#Syncfusion_Blazor_Charts_SfStockChart_Title) property to provide quick information about the plotted data. Customize the title style using the [TitleStyle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartTitleStyle.html) property. ```cshtml @@ -26,7 +26,6 @@ A title can be added to the axis using the [Title](https://help.syncfusion.com/c @code { - public class ChartData { public DateTime Date { get; set; } @@ -35,26 +34,25 @@ A title can be added to the axis using the [Title](https://help.syncfusion.com/c public List StockDetails = new List { - new ChartData { Date = new DateTime(2012, 04, 02), Y= 100}, - new ChartData { Date = new DateTime(2012, 04, 09), Y= 10}, - new ChartData { Date = new DateTime(2012, 04, 16), Y= 500}, - new ChartData { Date = new DateTime(2012, 04, 23), Y= 80}, - new ChartData { Date = new DateTime(2012, 04, 30), Y= 200}, - new ChartData { Date = new DateTime(2012, 05, 07), Y= 600}, - new ChartData { Date = new DateTime(2012, 05, 14), Y= 50}, - new ChartData { Date = new DateTime(2012, 05, 21), Y= 700}, - new ChartData { Date = new DateTime(2012, 05, 28), Y= 90} + new ChartData { Date = new DateTime(2012, 04, 02), Y = 100 }, + new ChartData { Date = new DateTime(2012, 04, 09), Y = 10 }, + new ChartData { Date = new DateTime(2012, 04, 16), Y = 500 }, + new ChartData { Date = new DateTime(2012, 04, 23), Y = 80 }, + new ChartData { Date = new DateTime(2012, 04, 30), Y = 200 }, + new ChartData { Date = new DateTime(2012, 05, 07), Y = 600 }, + new ChartData { Date = new DateTime(2012, 05, 14), Y = 50 }, + new ChartData { Date = new DateTime(2012, 05, 21), Y = 700 }, + new ChartData { Date = new DateTime(2012, 05, 28), Y = 90 } }; } - ``` ![Blazor Stock Chart with Title](images/common/blazor-stock-chart-title.png) ## Tick Lines Customization -The `Width`, `Color` and `Size` of the minor and major tick lines can be customized using the [MajorTickLines](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartAxis.html#Syncfusion_Blazor_Charts_StockChartAxis_MajorTickLines) and the [MinorTickLines](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartAxis.html#Syncfusion_Blazor_Charts_StockChartAxis_MinorTickLines) properties in the axis. +Customize the `Width` and `Color` of minor and major tick lines using the [MajorTickLines](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartAxis.html#Syncfusion_Blazor_Charts_StockChartAxis_MajorTickLines) and [MinorTickLines](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartAxis.html#Syncfusion_Blazor_Charts_StockChartAxis_MinorTickLines) properties on the axis. ```cshtml @@ -72,24 +70,23 @@ The `Width`, `Color` and `Size` of the minor and major tick lines can be cu @code { - public class ChartData { - public DateTime Date { get; set;} - public Double Y { get; set;} + public DateTime Date { get; set; } + public Double Y { get; set; } } public List StockDetails = new List { - new ChartData { Date = new DateTime(2012, 04, 02), Y= 100}, - new ChartData { Date = new DateTime(2012, 04, 09), Y= 10}, - new ChartData { Date = new DateTime(2012, 04, 16), Y= 500}, - new ChartData { Date = new DateTime(2012, 04, 23), Y= 80}, - new ChartData { Date = new DateTime(2012, 04, 30), Y= 200}, - new ChartData { Date = new DateTime(2012, 05, 07), Y= 600}, - new ChartData { Date = new DateTime(2012, 05, 14), Y= 50}, - new ChartData { Date = new DateTime(2012, 05, 21), Y= 700}, - new ChartData { Date = new DateTime(2012, 05, 28), Y= 90} + new ChartData { Date = new DateTime(2012, 04, 02), Y = 100 }, + new ChartData { Date = new DateTime(2012, 04, 09), Y = 10 }, + new ChartData { Date = new DateTime(2012, 04, 16), Y = 500 }, + new ChartData { Date = new DateTime(2012, 04, 23), Y = 80 }, + new ChartData { Date = new DateTime(2012, 04, 30), Y = 200 }, + new ChartData { Date = new DateTime(2012, 05, 07), Y = 600 }, + new ChartData { Date = new DateTime(2012, 05, 14), Y = 50 }, + new ChartData { Date = new DateTime(2012, 05, 21), Y = 700 }, + new ChartData { Date = new DateTime(2012, 05, 28), Y = 90 } }; } @@ -99,7 +96,7 @@ The `Width`, `Color` and `Size` of the minor and major tick lines can be cu ## Grid Lines Customization -The `Width`, `Color` and `DashArray` of the minor and major grid lines can be customized using the [MajorGridLines](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartAxis.html#Syncfusion_Blazor_Charts_ChartAxis_MajorGridLines) and the [MinorGridLines](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartAxis.html#Syncfusion_Blazor_Charts_ChartAxis_MinorGridLines) properties in the axis. +Customize the `Width`, `Color`, and `DashArray` of minor and major grid lines using the [MajorGridLines](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartAxis.html#Syncfusion_Blazor_Charts_ChartAxis_MajorGridLines) and [MinorGridLines](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartAxis.html#Syncfusion_Blazor_Charts_ChartAxis_MinorGridLines) properties on the axis. ```cshtml @@ -122,7 +119,6 @@ The `Width`, `Color` and `DashArray` of the minor and major grid lines can @code { - public class ChartData { public DateTime Date { get; set; } @@ -131,15 +127,15 @@ The `Width`, `Color` and `DashArray` of the minor and major grid lines can public List StockDetails = new List { - new ChartData { Date = new DateTime(2012, 04, 02), Y= 100}, - new ChartData { Date = new DateTime(2012, 04, 09), Y= 10}, - new ChartData { Date = new DateTime(2012, 04, 16), Y= 500}, - new ChartData { Date = new DateTime(2012, 04, 23), Y= 80}, - new ChartData { Date = new DateTime(2012, 04, 30), Y= 200}, - new ChartData { Date = new DateTime(2012, 05, 07), Y= 600}, - new ChartData { Date = new DateTime(2012, 05, 14), Y= 50}, - new ChartData { Date = new DateTime(2012, 05, 21), Y= 700}, - new ChartData { Date = new DateTime(2012, 05, 28), Y= 90} + new ChartData { Date = new DateTime(2012, 04, 02), Y = 100 }, + new ChartData { Date = new DateTime(2012, 04, 09), Y = 10 }, + new ChartData { Date = new DateTime(2012, 04, 16), Y = 500 }, + new ChartData { Date = new DateTime(2012, 04, 23), Y = 80 }, + new ChartData { Date = new DateTime(2012, 04, 30), Y = 200 }, + new ChartData { Date = new DateTime(2012, 05, 07), Y = 600 }, + new ChartData { Date = new DateTime(2012, 05, 14), Y = 50 }, + new ChartData { Date = new DateTime(2012, 05, 21), Y = 700 }, + new ChartData { Date = new DateTime(2012, 05, 28), Y = 90} }; } @@ -149,7 +145,7 @@ The `Width`, `Color` and `DashArray` of the minor and major grid lines can ## Multiple Axis -In addition to primary X and Y axis, n number of axis can be added to the chart. Series can be associated with this [Axis](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartAxis.html), by mapping with axis's unique name. +In addition to the primary X and Y axes, multiple additional axes can be added to the chart. A series can be associated with an [axis](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartAxis.html) by mapping the series to the axis using the axis's unique `Name`. ```cshtml @@ -178,7 +174,6 @@ In addition to primary X and Y axis, n number of axis can be added to the chart. @code { - public class ChartData { public DateTime Date { get; set; } @@ -191,15 +186,15 @@ In addition to primary X and Y axis, n number of axis can be added to the chart. public List StockDetails = new List { - new ChartData { Date = new DateTime(2012, 04, 02), Open= 85.9757, High = 90.6657,Low = 85.7685, Close = 90.5257,Volume = 660187068}, - new ChartData { Date = new DateTime(2012, 04, 09), Open= 89.4471, High = 92,Low = 86.2157, Close = 86.4614,Volume = 912634864}, - new ChartData { Date = new DateTime(2012, 04, 16), Open= 87.1514, High = 88.6071,Low = 81.4885, Close = 81.8543,Volume = 1221746066}, - new ChartData { Date = new DateTime(2012, 04, 23), Open= 81.5157, High = 88.2857,Low = 79.2857, Close = 86.1428,Volume = 965935749}, - new ChartData { Date = new DateTime(2012, 04, 30), Open= 85.4, High = 85.4857,Low = 80.7385, Close = 80.75,Volume = 615249365}, - new ChartData { Date = new DateTime(2012, 05, 07), Open= 80.2143, High = 82.2685,Low = 79.8185, Close = 80.9585,Volume = 541742692}, - new ChartData { Date = new DateTime(2012, 05, 14), Open= 80.3671, High = 81.0728,Low = 74.5971, Close = 75.7685,Volume = 708126233}, - new ChartData { Date = new DateTime(2012, 05, 21), Open= 76.3571, High = 82.3571,Low = 76.2928, Close = 80.3271,Volume = 682076215}, - new ChartData { Date = new DateTime(2012, 05, 28), Open= 81.5571, High = 83.0714,Low = 80.0743, Close = 80.1414,Volume = 480059584} + new ChartData { Date = new DateTime(2012, 04, 02), Open = 85.9757, High = 90.6657, Low = 85.7685, Close = 90.5257, Volume = 660187068 }, + new ChartData { Date = new DateTime(2012, 04, 09), Open = 89.4471, High = 92, Low = 86.2157, Close = 86.4614, Volume = 912634864 }, + new ChartData { Date = new DateTime(2012, 04, 16), Open = 87.1514, High = 88.6071, Low = 81.4885, Close = 81.8543, Volume = 1221746066 }, + new ChartData { Date = new DateTime(2012, 04, 23), Open = 81.5157, High = 88.2857, Low = 79.2857, Close = 86.1428, Volume = 965935749 }, + new ChartData { Date = new DateTime(2012, 04, 30), Open = 85.4, High = 85.4857, Low = 80.7385, Close = 80.75, Volume = 615249365 }, + new ChartData { Date = new DateTime(2012, 05, 07), Open = 80.2143, High = 82.2685, Low = 79.8185, Close = 80.9585, Volume = 541742692 }, + new ChartData { Date = new DateTime(2012, 05, 14), Open = 80.3671, High = 81.0728, Low = 74.5971, Close = 75.7685, Volume = 708126233 }, + new ChartData { Date = new DateTime(2012, 05, 21), Open = 76.3571, High = 82.3571, Low = 76.2928, Close = 80.3271, Volume = 682076215 }, + new ChartData { Date = new DateTime(2012, 05, 28), Open = 81.5571, High = 83.0714, Low = 80.0743, Close = 80.1414, Volume = 480059584 } }; } @@ -211,7 +206,7 @@ In addition to primary X and Y axis, n number of axis can be added to the chart. -When an axis is inversed, highest value of the axis comes closer to origin and vice versa. To place an axis in inversed manner set this property [IsInversed](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartAxis.html#Syncfusion_Blazor_Charts_StockChartAxis_IsInversed) to `true`. +When an axis is inversed, the highest value of the axis is placed closer to the origin and the lowest value farther from it. To render an axis in an inversed manner, set [IsInversed](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartAxis.html#Syncfusion_Blazor_Charts_StockChartAxis_IsInversed) to `true`. ```cshtml @@ -226,7 +221,6 @@ When an axis is inversed, highest value of the axis comes closer to origin and v @code { - public class ChartData { public DateTime Date { get; set; } @@ -239,15 +233,15 @@ When an axis is inversed, highest value of the axis comes closer to origin and v public List StockDetails = new List { - new ChartData { Date = new DateTime(2012, 04, 02), Open= 85.9757, High = 90.6657,Low = 85.7685, Close = 90.5257,Volume = 660187068}, - new ChartData { Date = new DateTime(2012, 04, 09), Open= 89.4471, High = 92,Low = 86.2157, Close = 86.4614,Volume = 912634864}, - new ChartData { Date = new DateTime(2012, 04, 16), Open= 87.1514, High = 88.6071,Low = 81.4885, Close = 81.8543,Volume = 1221746066}, - new ChartData { Date = new DateTime(2012, 04, 23), Open= 81.5157, High = 88.2857,Low = 79.2857, Close = 86.1428,Volume = 965935749}, - new ChartData { Date = new DateTime(2012, 04, 30), Open= 85.4, High = 85.4857,Low = 80.7385, Close = 80.75,Volume = 615249365}, - new ChartData { Date = new DateTime(2012, 05, 07), Open= 80.2143, High = 82.2685,Low = 79.8185, Close = 80.9585,Volume = 541742692}, - new ChartData { Date = new DateTime(2012, 05, 14), Open= 80.3671, High = 81.0728,Low = 74.5971, Close = 75.7685,Volume = 708126233}, - new ChartData { Date = new DateTime(2012, 05, 21), Open= 76.3571, High = 82.3571,Low = 76.2928, Close = 80.3271,Volume = 682076215}, - new ChartData { Date = new DateTime(2012, 05, 28), Open= 81.5571, High = 83.0714,Low = 80.0743, Close = 80.1414,Volume = 480059584} + new ChartData { Date = new DateTime(2012, 04, 02), Open = 85.9757, High = 90.6657, Low = 85.7685, Close = 90.5257, Volume = 660187068 }, + new ChartData { Date = new DateTime(2012, 04, 09), Open = 89.4471, High = 92, Low = 86.2157, Close = 86.4614, Volume = 912634864 }, + new ChartData { Date = new DateTime(2012, 04, 16), Open = 87.1514, High = 88.6071, Low = 81.4885, Close = 81.8543, Volume = 1221746066 }, + new ChartData { Date = new DateTime(2012, 04, 23), Open = 81.5157, High = 88.2857, Low = 79.2857, Close = 86.1428, Volume = 965935749 }, + new ChartData { Date = new DateTime(2012, 04, 30), Open = 85.4, High = 85.4857, Low = 80.7385, Close = 80.75, Volume = 615249365 }, + new ChartData { Date = new DateTime(2012, 05, 07), Open = 80.2143, High = 82.2685, Low = 79.8185, Close = 80.9585, Volume = 541742692 }, + new ChartData { Date = new DateTime(2012, 05, 14), Open = 80.3671, High = 81.0728, Low = 74.5971, Close = 75.7685, Volume = 708126233 }, + new ChartData { Date = new DateTime(2012, 05, 21), Open = 76.3571, High = 82.3571, Low = 76.2928, Close = 80.3271, Volume = 682076215 }, + new ChartData { Date = new DateTime(2012, 05, 28), Open = 81.5571, High = 83.0714, Low = 80.0743, Close = 80.1414, Volume = 480059584 } }; } @@ -258,7 +252,7 @@ When an axis is inversed, highest value of the axis comes closer to origin and v ## Opposed Position -To place an axis opposite from its original position, set [OpposedPosition](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartAxis.html#Syncfusion_Blazor_Charts_StockChartAxis_OpposedPosition) to true. +To place an axis opposite from its original position, set [OpposedPosition](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartAxis.html#Syncfusion_Blazor_Charts_StockChartAxis_OpposedPosition) to `true`. ```cshtml @@ -273,7 +267,6 @@ To place an axis opposite from its original position, set [OpposedPosition](http @code { - public class ChartData { public DateTime Date { get; set; } @@ -286,19 +279,18 @@ To place an axis opposite from its original position, set [OpposedPosition](http public List StockDetails = new List { - new ChartData { Date = new DateTime(2012, 04, 02), Open= 85.9757, High = 90.6657,Low = 85.7685, Close = 90.5257,Volume = 660187068}, - new ChartData { Date = new DateTime(2012, 04, 09), Open= 89.4471, High = 92,Low = 86.2157, Close = 86.4614,Volume = 912634864}, - new ChartData { Date = new DateTime(2012, 04, 16), Open= 87.1514, High = 88.6071,Low = 81.4885, Close = 81.8543,Volume = 1221746066}, - new ChartData { Date = new DateTime(2012, 04, 23), Open= 81.5157, High = 88.2857,Low = 79.2857, Close = 86.1428,Volume = 965935749}, - new ChartData { Date = new DateTime(2012, 04, 30), Open= 85.4, High = 85.4857,Low = 80.7385, Close = 80.75,Volume = 615249365}, - new ChartData { Date = new DateTime(2012, 05, 07), Open= 80.2143, High = 82.2685,Low = 79.8185, Close = 80.9585,Volume = 541742692}, - new ChartData { Date = new DateTime(2012, 05, 14), Open= 80.3671, High = 81.0728,Low = 74.5971, Close = 75.7685,Volume = 708126233}, - new ChartData { Date = new DateTime(2012, 05, 21), Open= 76.3571, High = 82.3571,Low = 76.2928, Close = 80.3271,Volume = 682076215}, - new ChartData { Date = new DateTime(2012, 05, 28), Open= 81.5571, High = 83.0714,Low = 80.0743, Close = 80.1414,Volume = 480059584} + new ChartData { Date = new DateTime(2012, 04, 02), Open = 85.9757, High = 90.6657, Low = 85.7685, Close = 90.5257, Volume = 660187068 }, + new ChartData { Date = new DateTime(2012, 04, 09), Open = 89.4471, High = 92, Low = 86.2157, Close = 86.4614, Volume = 912634864 }, + new ChartData { Date = new DateTime(2012, 04, 16), Open = 87.1514, High = 88.6071, Low = 81.4885, Close = 81.8543, Volume = 1221746066 }, + new ChartData { Date = new DateTime(2012, 04, 23), Open = 81.5157, High = 88.2857, Low = 79.2857, Close = 86.1428, Volume = 965935749 }, + new ChartData { Date = new DateTime(2012, 04, 30), Open = 85.4, High = 85.4857, Low = 80.7385, Close = 80.75, Volume = 615249365 }, + new ChartData { Date = new DateTime(2012, 05, 07), Open = 80.2143, High = 82.2685, Low = 79.8185, Close = 80.9585, Volume = 541742692 }, + new ChartData { Date = new DateTime(2012, 05, 14), Open = 80.3671, High = 81.0728, Low = 74.5971, Close = 75.7685, Volume = 708126233 }, + new ChartData { Date = new DateTime(2012, 05, 21), Open = 76.3571, High = 82.3571, Low = 76.2928, Close = 80.3271, Volume = 682076215 }, + new ChartData { Date = new DateTime(2012, 05, 28), Open = 81.5571, High = 83.0714, Low = 80.0743, Close = 80.1414, Volume = 480059584 } }; } - ``` -![Blazor Stock Chart in Opposed Position](images/common/blazor-stock-chart-in-opposed-position.png) \ No newline at end of file +![Blazor Stock Chart in Opposed Position](images/common/blazor-stock-chart-in-opposed-position.png) diff --git a/blazor/stock-chart/axis-types.md b/blazor/stock-chart/axis-types.md index 22e7d70f17..6c1bf431fa 100644 --- a/blazor/stock-chart/axis-types.md +++ b/blazor/stock-chart/axis-types.md @@ -1,7 +1,7 @@ --- layout: post title: Axis Types in Blazor Stock Chart Component | Syncfusion -description: Checkout and learn here all about axis types in Syncfusion Blazor Stock Chart component and much more. +description: Check out and learn about all the available axis types in the Syncfusion Blazor Stock Chart component. platform: Blazor control: Stock Chart documentation: ug @@ -13,9 +13,10 @@ documentation: ug ## DateTime Axis -Date time axis uses date time scale and displays the date time values as axis labels in the specified format and set the [ValueType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartAxis.html#Syncfusion_Blazor_Charts_StockChartAxis_ValueType) of axis to DateTime. +The DateTime axis uses a time-based scale and renders date-time values as axis labels in the specified format. Set the [ValueType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartAxis.html#Syncfusion_Blazor_Charts_StockChartAxis_ValueType) of the axis to DateTime. ```cshtml + @using Syncfusion.Blazor.Charts @@ -28,34 +29,37 @@ Date time axis uses date time scale and displays the date time values as axis la -@code{ +@code { public class ChartData { public DateTime Date { get; set; } public Double Y { get; set; } } + public List StockDetails = new List -{ - new ChartData { Date = new DateTime(2012, 04, 02), Y= 100}, - new ChartData { Date = new DateTime(2012, 04, 09), Y= 10}, - new ChartData { Date = new DateTime(2012, 04, 16), Y= 500}, - new ChartData { Date = new DateTime(2012, 04, 23), Y= 80}, - new ChartData { Date = new DateTime(2012, 04, 30), Y= 200}, - new ChartData { Date = new DateTime(2012, 05, 07), Y= 600}, - new ChartData { Date = new DateTime(2012, 05, 14), Y= 50}, - new ChartData { Date = new DateTime(2012, 05, 21), Y= 700}, - new ChartData { Date = new DateTime(2012, 05, 28), Y= 90} + { + new ChartData { Date = new DateTime(2012, 04, 02), Y = 100 }, + new ChartData { Date = new DateTime(2012, 04, 09), Y = 10 }, + new ChartData { Date = new DateTime(2012, 04, 16), Y = 500 }, + new ChartData { Date = new DateTime(2012, 04, 23), Y = 80 }, + new ChartData { Date = new DateTime(2012, 04, 30), Y = 200 }, + new ChartData { Date = new DateTime(2012, 05, 07), Y = 600 }, + new ChartData { Date = new DateTime(2012, 05, 14), Y = 50 }, + new ChartData { Date = new DateTime(2012, 05, 21), Y = 700 }, + new ChartData { Date = new DateTime(2012, 05, 28), Y = 90} }; } + ``` ![Blazor Stock Chart with Datetime Axis](images/common/blazor-stock-chart-datetime-axis.png) ## DateTimeCategory Axis -DateTimeCategory axis in the stock chart is used to display only business days. To use DateTimeCategory axis, set the [ValueType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ValueType.html) as [DateTimeCategory](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ValueType.html#Syncfusion_Blazor_Charts_ValueType_DateTimeCategory). +The DateTimeCategory axis displays only business days by skipping non-trading dates. To enable it, set the [ValueType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ValueType.html) to [DateTimeCategory](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ValueType.html#Syncfusion_Blazor_Charts_ValueType_DateTimeCategory). ```cshtml + @using Syncfusion.Blazor.Charts @using System.Dynamic @@ -74,16 +78,17 @@ DateTimeCategory axis in the stock chart is used to display only business days. @code { private List Dates = new List - { new DateTime(2021, 01, 11),new DateTime(2021, 01, 12),new DateTime(2021, 01, 13),new DateTime(2021, 01, 14),new DateTime(2021, 01, 15), - new DateTime(2021, 01, 19),new DateTime(2021, 01, 20),new DateTime(2021, 01, 21),new DateTime(2021, 01, 22),new DateTime(2021, 03, 01), - new DateTime(2021, 03, 02),new DateTime(2021, 04, 01),new DateTime(2021, 04, 05),new DateTime(2021, 04, 06),new DateTime(2021, 04, 07), - new DateTime(2021, 04, 11),new DateTime(2021, 04, 13),new DateTime(2021, 04, 15),new DateTime(2021, 04, 16),new DateTime(2021, 04, 17), - new DateTime(2021, 04, 18),new DateTime(2021, 04, 20),new DateTime(2021, 04, 21),new DateTime(2021, 04, 23),new DateTime(2021, 04, 25), - new DateTime(2021, 05, 01),new DateTime(2021, 05, 02),new DateTime(2021, 05, 06),new DateTime(2021, 05, 07),new DateTime(2021, 05, 08), - new DateTime(2021, 05, 11),new DateTime(2021, 05, 15),new DateTime(2021, 05, 18),new DateTime(2021, 05, 20),new DateTime(2021, 05, 25), - new DateTime(2021, 06, 01),new DateTime(2021, 06, 02),new DateTime(2021, 06, 03),new DateTime(2021, 06, 04),new DateTime(2021, 06, 05), - new DateTime(2021, 06, 10),new DateTime(2021, 06, 11),new DateTime(2021, 06, 12),new DateTime(2021, 06, 13),new DateTime(2021, 06, 15), - new DateTime(2021, 06, 16),new DateTime(2021, 06, 17),new DateTime(2021, 06, 18),new DateTime(2021, 06, 19),new DateTime(2021, 06, 20) + { + new DateTime(2021, 01, 11), new DateTime(2021, 01, 12), new DateTime(2021, 01, 13), new DateTime(2021, 01, 14), new DateTime(2021, 01, 15), + new DateTime(2021, 01, 19), new DateTime(2021, 01, 20), new DateTime(2021, 01, 21), new DateTime(2021, 01, 22), new DateTime(2021, 03, 01), + new DateTime(2021, 03, 02), new DateTime(2021, 04, 01),new DateTime(2021, 04, 05), new DateTime(2021, 04, 06),new DateTime(2021, 04, 07), + new DateTime(2021, 04, 11), new DateTime(2021, 04, 13), new DateTime(2021, 04, 15), new DateTime(2021, 04, 16), new DateTime(2021, 04, 17), + new DateTime(2021, 04, 18), new DateTime(2021, 04, 20), new DateTime(2021, 04, 21), new DateTime(2021, 04, 23), new DateTime(2021, 04, 25), + new DateTime(2021, 05, 01), new DateTime(2021, 05, 02), new DateTime(2021, 05, 06), new DateTime(2021, 05, 07),new DateTime(2021, 05, 08), + new DateTime(2021, 05, 11), new DateTime(2021, 05, 15), new DateTime(2021, 05, 18), new DateTime(2021, 05, 20), new DateTime(2021, 05, 25), + new DateTime(2021, 06, 01), new DateTime(2021, 06, 02), new DateTime(2021, 06, 03), new DateTime(2021, 06, 04),new DateTime(2021, 06, 05), + new DateTime(2021, 06, 10), new DateTime(2021, 06, 11), new DateTime(2021, 06, 12), new DateTime(2021, 06, 13), new DateTime(2021, 06, 15), + new DateTime(2021, 06, 16), new DateTime(2021, 06, 17), new DateTime(2021, 06, 18), new DateTime(2021, 06, 19), new DateTime(2021, 06, 20) }; public DateTime[] Value = new DateTime[] { new DateTime(2021, 01, 01), new DateTime(2022, 01, 01) }; @@ -114,6 +119,7 @@ DateTimeCategory axis in the stock chart is used to display only business days. } } } + ``` ![Blazor Stock Chart with DateTimeCategory Axis](images/common/blazor-stock-chart-datetimecategory-axis.png) @@ -122,9 +128,10 @@ DateTimeCategory axis in the stock chart is used to display only business days. -Logarithmic axis uses logarithmic scale and it is very useful in visualizing data, when it has numerical values in both lower order of magnitude (eg: 10-6) and higher order of magnitude (eg: 106) and set the [ValueType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartAxis.html#Syncfusion_Blazor_Charts_StockChartAxis_ValueType) of axis to `Logarithmic`. +The Logarithmic axis uses a logarithmic scale and is useful when data spans multiple orders of magnitude (e.g., 10-6 to 106). Set the [ValueType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartAxis.html#Syncfusion_Blazor_Charts_StockChartAxis_ValueType) of the axis to `Logarithmic`. ```cshtml + @using Syncfusion.Blazor.Charts @@ -138,29 +145,30 @@ Logarithmic axis uses logarithmic scale and it is very useful in visualizing dat -@code{ +@code { public class ChartData { public DateTime Date { get; set; } public Double Y { get; set; } } public List StockDetails = new List -{ - new ChartData { Date = new DateTime(2012, 04, 02), Y= 100}, - new ChartData { Date = new DateTime(2012, 04, 09), Y= 10}, - new ChartData { Date = new DateTime(2012, 04, 16), Y= 500}, - new ChartData { Date = new DateTime(2012, 04, 23), Y= 80}, - new ChartData { Date = new DateTime(2012, 04, 30), Y= 200}, - new ChartData { Date = new DateTime(2012, 05, 07), Y= 600}, - new ChartData { Date = new DateTime(2012, 05, 14), Y= 50}, - new ChartData { Date = new DateTime(2012, 05, 21), Y= 700}, - new ChartData { Date = new DateTime(2012, 05, 28), Y= 90} + { + new ChartData { Date = new DateTime(2012, 04, 02), Y = 100 }, + new ChartData { Date = new DateTime(2012, 04, 09), Y = 10 }, + new ChartData { Date = new DateTime(2012, 04, 16), Y = 500 }, + new ChartData { Date = new DateTime(2012, 04, 23), Y = 80 }, + new ChartData { Date = new DateTime(2012, 04, 30), Y = 200 }, + new ChartData { Date = new DateTime(2012, 05, 07), Y = 600 }, + new ChartData { Date = new DateTime(2012, 05, 14), Y = 50 }, + new ChartData { Date = new DateTime(2012, 05, 21), Y = 700 }, + new ChartData { Date = new DateTime(2012, 05, 28), Y = 90 } }; } + ``` ![Blazor Stock Chart with Logarithmic Axis](images/common/blazor-stock-chart-logarithmic-axis.png) ## See Also -* [Axis Customization](./axis-customization) \ No newline at end of file +* [Axis Customization](./axis-customization) diff --git a/blazor/stock-chart/chart-dimensions.md b/blazor/stock-chart/chart-dimensions.md index f669856a42..a108294305 100644 --- a/blazor/stock-chart/chart-dimensions.md +++ b/blazor/stock-chart/chart-dimensions.md @@ -1,7 +1,7 @@ --- layout: post title: Stock Chart Dimensions in Blazor Stock Chart Component | Syncfusion -description: Checkout and learn here all about stock chart dimensions in Syncfusion Blazor Stock Chart component and more. +description: Check out and learn how to configure chart dimensions in the Syncfusion Blazor Stock Chart component. platform: Blazor control: Stock Chart documentation: ug @@ -11,7 +11,7 @@ documentation: ug ## Size for Container -Stock Chart can render to its container size. You can set the size via inline or CSS as demonstrated below. +The stock chart adapts to its container size. Set the container dimensions with inline styles or CSS, as shown below. ```cshtml @@ -26,15 +26,14 @@ Stock Chart can render to its container size. You can set the size via inline o @code { - public class ChartData { - public DateTime Date { get; set} - public Double Open { get; set} - public Double Low { get; set} - public Double Close { get; set} - public Double High { get; set} - public Double Volume { get; set} + public DateTime Date { get; set; } + public Double Open { get; set; } + public Double Low { get; set; } + public Double Close { get; set; } + public Double High { get; set; } + public Double Volume { get; set; } } public List StockDetails = new List @@ -57,10 +56,10 @@ Stock Chart can render to its container size. You can set the size via inline o ## Size for Stock Chart -The size can be set for stock chart directly through [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartModel.html#Syncfusion_Blazor_Charts_StockChartModel_Width) and [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartModel.html#Syncfusion_Blazor_Charts_StockChartModel_Height) properties. +Set the stock chart size directly using the [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartModel.html#Syncfusion_Blazor_Charts_StockChartModel_Width) and [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartModel.html#Syncfusion_Blazor_Charts_StockChartModel_Height) properties. -**In Pixel** +**In Pixels** ```cshtml @@ -74,28 +73,27 @@ The size can be set for stock chart directly through [Width](https://help.syncfu @code { - public class ChartData { - public DateTime Date { get; set} - public Double Open { get; set} - public Double Low { get; set} - public Double Close { get; set} - public Double High { get; set} - public Double Volume { get; set} + public DateTime Date { get; set; } + public Double Open { get; set; } + public Double Low { get; set; } + public Double Close { get; set; } + public Double High { get; set; } + public Double Volume { get; set; } } public List StockDetails = new List { - new ChartData { Date = new DateTime(2012, 04, 02), Open= 85.9757, High = 90.6657,Low = 85.7685, Close = 90.5257,Volume = 660187068}, - new ChartData { Date = new DateTime(2012, 04, 09), Open= 89.4471, High = 92,Low = 86.2157, Close = 86.4614,Volume = 912634864}, - new ChartData { Date = new DateTime(2012, 04, 16), Open= 87.1514, High = 88.6071,Low = 81.4885, Close = 81.8543,Volume = 1221746066}, - new ChartData { Date = new DateTime(2012, 04, 23), Open= 81.5157, High = 88.2857,Low = 79.2857, Close = 86.1428,Volume = 965935749}, - new ChartData { Date = new DateTime(2012, 04, 30), Open= 85.4, High = 85.4857,Low = 80.7385, Close = 80.75,Volume = 615249365}, - new ChartData { Date = new DateTime(2012, 05, 07), Open= 80.2143, High = 82.2685,Low = 79.8185, Close = 80.9585,Volume = 541742692}, - new ChartData { Date = new DateTime(2012, 05, 14), Open= 80.3671, High = 81.0728,Low = 74.5971, Close = 75.7685,Volume = 708126233}, - new ChartData { Date = new DateTime(2012, 05, 21), Open= 76.3571, High = 82.3571,Low = 76.2928, Close = 80.3271,Volume = 682076215}, - new ChartData { Date = new DateTime(2012, 05, 28), Open= 81.5571, High = 83.0714,Low = 80.0743, Close = 80.1414,Volume = 480059584} + new ChartData { Date = new DateTime(2012, 04, 02), Open = 85.9757, High = 90.6657, Low = 85.7685, Close = 90.5257, Volume = 660187068 }, + new ChartData { Date = new DateTime(2012, 04, 09), Open = 89.4471, High = 92, Low = 86.2157, Close = 86.4614, Volume = 912634864 }, + new ChartData { Date = new DateTime(2012, 04, 16), Open = 87.1514, High = 88.6071, Low = 81.4885, Close = 81.8543, Volume = 1221746066 }, + new ChartData { Date = new DateTime(2012, 04, 23), Open = 81.5157, High = 88.2857, Low = 79.2857, Close = 86.1428, Volume = 965935749 }, + new ChartData { Date = new DateTime(2012, 04, 30), Open = 85.4, High = 85.4857, Low = 80.7385, Close = 80.75, Volume = 615249365 }, + new ChartData { Date = new DateTime(2012, 05, 07), Open = 80.2143, High = 82.2685, Low = 79.8185, Close = 80.9585, Volume = 541742692 }, + new ChartData { Date = new DateTime(2012, 05, 14), Open = 80.3671, High = 81.0728, Low = 74.5971, Close = 75.7685, Volume = 708126233 }, + new ChartData { Date = new DateTime(2012, 05, 21), Open = 76.3571, High = 82.3571, Low = 76.2928, Close = 80.3271, Volume = 682076215 }, + new ChartData { Date = new DateTime(2012, 05, 28), Open = 81.5571, High = 83.0714, Low = 80.0743, Close = 80.1414, Volume = 480059584 } }; } @@ -105,7 +103,7 @@ The size can be set for stock chart directly through [Width](https://help.syncfu **In Percentage** -By setting value in percentage, stock chart gets its dimension with respect to its container. For example, when the height is ‘50%’, chart renders to half of the container height. +When values are specified in percentages, the stock chart sizes relative to its container. For example, a height of '50%' renders at half the container height. ```cshtml @@ -118,28 +116,27 @@ By setting value in percentage, stock chart gets its dimension with respect to @code { - public class ChartData { - public DateTime Date { get; set} - public Double Open { get; set} - public Double Low { get; set} - public Double Close { get; set} - public Double High { get; set} - public Double Volume { get; set} + public DateTime Date { get; set; } + public Double Open { get; set; } + public Double Low { get; set; } + public Double Close { get; set; } + public Double High { get; set; } + public Double Volume { get; set; } } public List StockDetails = new List { - new ChartData { Date = new DateTime(2012, 04, 02), Open= 85.9757, High = 90.6657,Low = 85.7685, Close = 90.5257,Volume = 660187068}, - new ChartData { Date = new DateTime(2012, 04, 09), Open= 89.4471, High = 92,Low = 86.2157, Close = 86.4614,Volume = 912634864}, - new ChartData { Date = new DateTime(2012, 04, 16), Open= 87.1514, High = 88.6071,Low = 81.4885, Close = 81.8543,Volume = 1221746066}, - new ChartData { Date = new DateTime(2012, 04, 23), Open= 81.5157, High = 88.2857,Low = 79.2857, Close = 86.1428,Volume = 965935749}, - new ChartData { Date = new DateTime(2012, 04, 30), Open= 85.4, High = 85.4857,Low = 80.7385, Close = 80.75,Volume = 615249365}, - new ChartData { Date = new DateTime(2012, 05, 07), Open= 80.2143, High = 82.2685,Low = 79.8185, Close = 80.9585,Volume = 541742692}, - new ChartData { Date = new DateTime(2012, 05, 14), Open= 80.3671, High = 81.0728,Low = 74.5971, Close = 75.7685,Volume = 708126233}, - new ChartData { Date = new DateTime(2012, 05, 21), Open= 76.3571, High = 82.3571,Low = 76.2928, Close = 80.3271,Volume = 682076215}, - new ChartData { Date = new DateTime(2012, 05, 28), Open= 81.5571, High = 83.0714,Low = 80.0743, Close = 80.1414,Volume = 480059584} + new ChartData { Date = new DateTime(2012, 04, 02), Open = 85.9757, High = 90.6657, Low = 85.7685, Close = 90.5257, Volume = 660187068 }, + new ChartData { Date = new DateTime(2012, 04, 09), Open = 89.4471, High = 92, Low = 86.2157, Close = 86.4614, Volume = 912634864 }, + new ChartData { Date = new DateTime(2012, 04, 16), Open = 87.1514, High = 88.6071, Low = 81.4885, Close = 81.8543, Volume = 1221746066 }, + new ChartData { Date = new DateTime(2012, 04, 23), Open = 81.5157, High = 88.2857, Low = 79.2857, Close = 86.1428, Volume = 965935749 }, + new ChartData { Date = new DateTime(2012, 04, 30), Open = 85.4, High = 85.4857, Low = 80.7385, Close = 80.75, Volume = 615249365 }, + new ChartData { Date = new DateTime(2012, 05, 07), Open = 80.2143, High = 82.2685, Low = 79.8185, Close = 80.9585, Volume = 541742692 }, + new ChartData { Date = new DateTime(2012, 05, 14), Open = 80.3671, High = 81.0728, Low = 74.5971, Close = 75.7685, Volume = 708126233 }, + new ChartData { Date = new DateTime(2012, 05, 21), Open = 76.3571, High = 82.3571, Low = 76.2928, Close = 80.3271, Volume = 682076215 }, + new ChartData { Date = new DateTime(2012, 05, 28), Open = 81.5571, High = 83.0714, Low = 80.0743, Close = 80.1414, Volume = 480059584 } }; } @@ -147,4 +144,4 @@ By setting value in percentage, stock chart gets its dimension with respect to ![Changing Blazor Stock Chart Size in Percentage](images/size/blazor-stock-chart-size-in-percentage.png) -N> When you do not specify the size, it takes `450px` as the height and window size as its width. \ No newline at end of file +N> If no size is specified, a default height of 450px is used and the width matches the window size. diff --git a/blazor/stock-chart/cross-hair.md b/blazor/stock-chart/cross-hair.md index 2b48429f91..f6526b597e 100644 --- a/blazor/stock-chart/cross-hair.md +++ b/blazor/stock-chart/cross-hair.md @@ -1,7 +1,7 @@ --- layout: post title: Crosshair in Blazor Stock Chart Component | Syncfusion -description: Checkout and learn here all about crosshair in Syncfusion Blazor Stock Chart component and much more. +description: Check out and learn how to configure crosshair in the Syncfusion Blazor Stock Chart component and much more. platform: Blazor control: Stock Chart documentation: ug @@ -9,7 +9,7 @@ documentation: ug # Crosshair in Blazor Stock Chart Component -Crosshair has a vertical and horizontal line to view the value of the axis at mouse or touch position. Crosshair lines can be enabled by using [Enable](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartCrosshairSettings.html#Syncfusion_Blazor_Charts_StockChartCrosshairSettings_Enable) property in the `Crosshair`. Enabling the `SnapToData` property in the crosshair aligns it with the nearest data point instead of following the exact mouse position. +The crosshair displays vertical and horizontal lines to show axis values at the mouse or touch position. Enable crosshair lines using the [Enable](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartCrosshairSettings.html#Syncfusion_Blazor_Charts_StockChartCrosshairSettings_Enable) property of `Crosshair`. Enabling the `SnapToData` property aligns the crosshair with the nearest data point instead of the exact pointer position. ```cshtml @@ -31,7 +31,6 @@ Crosshair has a vertical and horizontal line to view the value of the axis at mo @code { - public class ChartData { public DateTime Date { get; set; } @@ -44,15 +43,15 @@ Crosshair has a vertical and horizontal line to view the value of the axis at mo public List StockDetails = new List { - new ChartData { Date = new DateTime(2012, 04, 02), Open= 85.9757, High = 90.6657,Low = 85.7685, Close = 90.5257,Volume = 660187068}, - new ChartData { Date = new DateTime(2012, 04, 09), Open= 89.4471, High = 92,Low = 86.2157, Close = 86.4614,Volume = 912634864}, - new ChartData { Date = new DateTime(2012, 04, 16), Open= 87.1514, High = 88.6071,Low = 81.4885, Close = 81.8543,Volume = 1221746066}, - new ChartData { Date = new DateTime(2012, 04, 23), Open= 81.5157, High = 88.2857,Low = 79.2857, Close = 86.1428,Volume = 965935749}, - new ChartData { Date = new DateTime(2012, 04, 30), Open= 85.4, High = 85.4857,Low = 80.7385, Close = 80.75,Volume = 615249365}, - new ChartData { Date = new DateTime(2012, 05, 07), Open= 80.2143, High = 82.2685,Low = 79.8185, Close = 80.9585,Volume = 541742692}, - new ChartData { Date = new DateTime(2012, 05, 14), Open= 80.3671, High = 81.0728,Low = 74.5971, Close = 75.7685,Volume = 708126233}, - new ChartData { Date = new DateTime(2012, 05, 21), Open= 76.3571, High = 82.3571,Low = 76.2928, Close = 80.3271,Volume = 682076215}, - new ChartData { Date = new DateTime(2012, 05, 28), Open= 81.5571, High = 83.0714,Low = 80.0743, Close = 80.1414,Volume = 480059584} + new ChartData { Date = new DateTime(2012, 04, 02), Open = 85.9757, High = 90.6657, Low = 85.7685, Close = 90.5257, Volume = 660187068 }, + new ChartData { Date = new DateTime(2012, 04, 09), Open = 89.4471, High = 92, Low = 86.2157, Close = 86.4614, Volume = 912634864 }, + new ChartData { Date = new DateTime(2012, 04, 16), Open = 87.1514, High = 88.6071, Low = 81.4885, Close = 81.8543, Volume = 1221746066 }, + new ChartData { Date = new DateTime(2012, 04, 23), Open = 81.5157, High = 88.2857, Low = 79.2857, Close = 86.1428, Volume = 965935749 }, + new ChartData { Date = new DateTime(2012, 04, 30), Open = 85.4, High = 85.4857, Low = 80.7385, Close = 80.75, Volume = 615249365 }, + new ChartData { Date = new DateTime(2012, 05, 07), Open = 80.2143, High = 82.2685, Low = 79.8185, Close = 80.9585, Volume = 541742692 }, + new ChartData { Date = new DateTime(2012, 05, 14), Open = 80.3671, High = 81.0728, Low = 74.5971, Close = 75.7685, Volume = 708126233 }, + new ChartData { Date = new DateTime(2012, 05, 21), Open = 76.3571, High = 82.3571, Low = 76.2928, Close = 80.3271, Volume = 682076215 }, + new ChartData { Date = new DateTime(2012, 05, 28), Open = 81.5571, High = 83.0714, Low = 80.0743, Close = 80.1414, Volume = 480059584 } }; } @@ -62,7 +61,7 @@ Crosshair has a vertical and horizontal line to view the value of the axis at mo ## Tooltip for axis -Tooltip label for an axis can be enabled by using [Enable](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartCrosshairSettings.html#Syncfusion_Blazor_Charts_StockChartCrosshairSettings_Enable) property of `CrosshairTooltip` in the corresponding axis. +Axis tooltip labels can be enabled using the [Enable](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartCrosshairSettings.html#Syncfusion_Blazor_Charts_StockChartCrosshairSettings_Enable) property of `CrosshairTooltip` on the corresponding axis. ```cshtml @@ -88,7 +87,6 @@ Tooltip label for an axis can be enabled by using [Enable](https://help.syncfus @code { - public class ChartData { public DateTime Date { get; set; } @@ -101,15 +99,15 @@ Tooltip label for an axis can be enabled by using [Enable](https://help.syncfus public List StockDetails = new List { - new ChartData { Date = new DateTime(2012, 04, 02), Open= 85.9757, High = 90.6657,Low = 85.7685, Close = 90.5257,Volume = 660187068}, - new ChartData { Date = new DateTime(2012, 04, 09), Open= 89.4471, High = 92,Low = 86.2157, Close = 86.4614,Volume = 912634864}, - new ChartData { Date = new DateTime(2012, 04, 16), Open= 87.1514, High = 88.6071,Low = 81.4885, Close = 81.8543,Volume = 1221746066}, - new ChartData { Date = new DateTime(2012, 04, 23), Open= 81.5157, High = 88.2857,Low = 79.2857, Close = 86.1428,Volume = 965935749}, - new ChartData { Date = new DateTime(2012, 04, 30), Open= 85.4, High = 85.4857,Low = 80.7385, Close = 80.75,Volume = 615249365}, - new ChartData { Date = new DateTime(2012, 05, 07), Open= 80.2143, High = 82.2685,Low = 79.8185, Close = 80.9585,Volume = 541742692}, - new ChartData { Date = new DateTime(2012, 05, 14), Open= 80.3671, High = 81.0728,Low = 74.5971, Close = 75.7685,Volume = 708126233}, - new ChartData { Date = new DateTime(2012, 05, 21), Open= 76.3571, High = 82.3571,Low = 76.2928, Close = 80.3271,Volume = 682076215}, - new ChartData { Date = new DateTime(2012, 05, 28), Open= 81.5571, High = 83.0714,Low = 80.0743, Close = 80.1414,Volume = 480059584} + new ChartData { Date = new DateTime(2012, 04, 02), Open = 85.9757, High = 90.6657, Low = 85.7685, Close = 90.5257, Volume = 660187068 }, + new ChartData { Date = new DateTime(2012, 04, 09), Open = 89.4471, High = 92, Low = 86.2157, Close = 86.4614, Volume = 912634864 }, + new ChartData { Date = new DateTime(2012, 04, 16), Open = 87.1514, High = 88.6071, Low = 81.4885, Close = 81.8543, Volume = 1221746066 }, + new ChartData { Date = new DateTime(2012, 04, 23), Open = 81.5157, High = 88.2857, Low = 79.2857, Close = 86.1428, Volume = 965935749 }, + new ChartData { Date = new DateTime(2012, 04, 30), Open = 85.4, High = 85.4857, Low = 80.7385, Close = 80.75, Volume = 615249365 }, + new ChartData { Date = new DateTime(2012, 05, 07), Open = 80.2143, High = 82.2685, Low = 79.8185, Close = 80.9585, Volume = 541742692 }, + new ChartData { Date = new DateTime(2012, 05, 14), Open = 80.3671, High = 81.0728, Low = 74.5971, Close = 75.7685, Volume = 708126233 }, + new ChartData { Date = new DateTime(2012, 05, 21), Open = 76.3571, High = 82.3571, Low = 76.2928, Close = 80.3271, Volume = 682076215 }, + new ChartData { Date = new DateTime(2012, 05, 28), Open = 81.5571, High = 83.0714, Low = 80.0743, Close = 80.1414, Volume = 480059584 } }; } @@ -119,7 +117,7 @@ Tooltip label for an axis can be enabled by using [Enable](https://help.syncfus ## Customization -The `Fill` and `TextStyle` property of the `CrosshairTooltip` is used to customize the background color and font style of the crosshair label respectively. Color and Width of the crosshair line can be customized by using the [Line](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartCrosshairSettings.html#Syncfusion_Blazor_Charts_StockChartCrosshairSettings_Line) property in the crosshair. +Customize the crosshair tooltip background and font using the `Fill` and `TextStyle` properties of `CrosshairTooltip`. Customize the crosshair line color and width using the [Line](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartCrosshairSettings.html#Syncfusion_Blazor_Charts_StockChartCrosshairSettings_Line) property in `Crosshair`. ```cshtml @@ -147,7 +145,6 @@ The `Fill` and `TextStyle` property of the `CrosshairTooltip` is used to customi @code { - public class ChartData { public DateTime Date { get; set; } @@ -160,15 +157,15 @@ The `Fill` and `TextStyle` property of the `CrosshairTooltip` is used to customi public List StockDetails = new List { - new ChartData { Date = new DateTime(2012, 04, 02), Open= 85.9757, High = 90.6657,Low = 85.7685, Close = 90.5257,Volume = 660187068}, - new ChartData { Date = new DateTime(2012, 04, 09), Open= 89.4471, High = 92,Low = 86.2157, Close = 86.4614,Volume = 912634864}, - new ChartData { Date = new DateTime(2012, 04, 16), Open= 87.1514, High = 88.6071,Low = 81.4885, Close = 81.8543,Volume = 1221746066}, - new ChartData { Date = new DateTime(2012, 04, 23), Open= 81.5157, High = 88.2857,Low = 79.2857, Close = 86.1428,Volume = 965935749}, - new ChartData { Date = new DateTime(2012, 04, 30), Open= 85.4, High = 85.4857,Low = 80.7385, Close = 80.75,Volume = 615249365}, - new ChartData { Date = new DateTime(2012, 05, 07), Open= 80.2143, High = 82.2685,Low = 79.8185, Close = 80.9585,Volume = 541742692}, - new ChartData { Date = new DateTime(2012, 05, 14), Open= 80.3671, High = 81.0728,Low = 74.5971, Close = 75.7685,Volume = 708126233}, - new ChartData { Date = new DateTime(2012, 05, 21), Open= 76.3571, High = 82.3571,Low = 76.2928, Close = 80.3271,Volume = 682076215}, - new ChartData { Date = new DateTime(2012, 05, 28), Open= 81.5571, High = 83.0714,Low = 80.0743, Close = 80.1414,Volume = 480059584} + new ChartData { Date = new DateTime(2012, 04, 02), Open = 85.9757, High = 90.6657, Low = 85.7685, Close = 90.5257, Volume = 660187068 }, + new ChartData { Date = new DateTime(2012, 04, 09), Open = 89.4471, High = 92, Low = 86.2157, Close = 86.4614, Volume = 912634864 }, + new ChartData { Date = new DateTime(2012, 04, 16), Open = 87.1514, High = 88.6071, Low = 81.4885, Close = 81.8543, Volume = 1221746066 }, + new ChartData { Date = new DateTime(2012, 04, 23), Open = 81.5157, High = 88.2857, Low = 79.2857, Close = 86.1428, Volume = 965935749 }, + new ChartData { Date = new DateTime(2012, 04, 30), Open = 85.4, High = 85.4857, Low = 80.7385, Close = 80.75, Volume = 615249365 }, + new ChartData { Date = new DateTime(2012, 05, 07), Open = 80.2143, High = 82.2685, Low = 79.8185, Close = 80.9585, Volume = 541742692 }, + new ChartData { Date = new DateTime(2012, 05, 14), Open = 80.3671, High = 81.0728, Low = 74.5971, Close = 75.7685, Volume = 708126233 }, + new ChartData { Date = new DateTime(2012, 05, 21), Open = 76.3571, High = 82.3571, Low = 76.2928, Close = 80.3271, Volume = 682076215 }, + new ChartData { Date = new DateTime(2012, 05, 28), Open = 81.5571, High = 83.0714, Low = 80.0743, Close = 80.1414, Volume = 480059584 } }; } @@ -178,9 +175,7 @@ The `Fill` and `TextStyle` property of the `CrosshairTooltip` is used to customi ## Add Trackball -Trackball is used to track a data point closest to the mouse or touch position. Trackball marker indicates the closest point and trackball tooltip displays the information about the point. - -Trackball can be enabled by setting the [Enable](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartCrosshairSettings.html#Syncfusion_Blazor_Charts_StockChartCrosshairSettings_Enable) property of the crosshair to true and `Shared` property in `Tooltip` to true in chart. +Trackball highlights the data point closest to the pointer and shows its details in the tooltip. Enable trackball behavior by setting the crosshair [Enable](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartCrosshairSettings.html#Syncfusion_Blazor_Charts_StockChartCrosshairSettings_Enable) property to true and the `Shared` property in `Tooltip` to true. ```cshtml @@ -197,7 +192,6 @@ Trackball can be enabled by setting the [Enable](https://help.syncfusion.com/cr/ @code { - public class ChartData { public DateTime Date { get; set; } @@ -210,18 +204,18 @@ Trackball can be enabled by setting the [Enable](https://help.syncfusion.com/cr/ public List StockDetails = new List { - new ChartData { Date = new DateTime(2012, 04, 02), Open= 85.9757, High = 90.6657,Low = 85.7685, Close = 90.5257,Volume = 660187068}, - new ChartData { Date = new DateTime(2012, 04, 09), Open= 89.4471, High = 92,Low = 86.2157, Close = 86.4614,Volume = 912634864}, - new ChartData { Date = new DateTime(2012, 04, 16), Open= 87.1514, High = 88.6071,Low = 81.4885, Close = 81.8543,Volume = 1221746066}, - new ChartData { Date = new DateTime(2012, 04, 23), Open= 81.5157, High = 88.2857,Low = 79.2857, Close = 86.1428,Volume = 965935749}, - new ChartData { Date = new DateTime(2012, 04, 30), Open= 85.4, High = 85.4857,Low = 80.7385, Close = 80.75,Volume = 615249365}, - new ChartData { Date = new DateTime(2012, 05, 07), Open= 80.2143, High = 82.2685,Low = 79.8185, Close = 80.9585,Volume = 541742692}, - new ChartData { Date = new DateTime(2012, 05, 14), Open= 80.3671, High = 81.0728,Low = 74.5971, Close = 75.7685,Volume = 708126233}, - new ChartData { Date = new DateTime(2012, 05, 21), Open= 76.3571, High = 82.3571,Low = 76.2928, Close = 80.3271,Volume = 682076215}, - new ChartData { Date = new DateTime(2012, 05, 28), Open= 81.5571, High = 83.0714,Low = 80.0743, Close = 80.1414,Volume = 480059584} + new ChartData { Date = new DateTime(2012, 04, 02), Open = 85.9757, High = 90.6657, Low = 85.7685, Close = 90.5257, Volume = 660187068 }, + new ChartData { Date = new DateTime(2012, 04, 09), Open = 89.4471, High = 92, Low = 86.2157, Close = 86.4614, Volume = 912634864 }, + new ChartData { Date = new DateTime(2012, 04, 16), Open = 87.1514, High = 88.6071, Low = 81.4885, Close = 81.8543, Volume = 1221746066 }, + new ChartData { Date = new DateTime(2012, 04, 23), Open = 81.5157, High = 88.2857, Low = 79.2857, Close = 86.1428, Volume = 965935749 }, + new ChartData { Date = new DateTime(2012, 04, 30), Open = 85.4, High = 85.4857, Low = 80.7385, Close = 80.75, Volume = 615249365 }, + new ChartData { Date = new DateTime(2012, 05, 07), Open = 80.2143, High = 82.2685, Low = 79.8185, Close = 80.9585, Volume = 541742692 }, + new ChartData { Date = new DateTime(2012, 05, 14), Open = 80.3671, High = 81.0728, Low = 74.5971, Close = 75.7685, Volume = 708126233 }, + new ChartData { Date = new DateTime(2012, 05, 21), Open = 76.3571, High = 82.3571, Low = 76.2928, Close = 80.3271, Volume = 682076215 }, + new ChartData { Date = new DateTime(2012, 05, 28), Open = 81.5571, High = 83.0714, Low = 80.0743, Close = 80.1414, Volume = 480059584 } }; } ``` -![Blazor Stock Chart with Trackball](images/common/blazor-stock-chart-trackball.png) \ No newline at end of file +![Blazor Stock Chart with Trackball](images/common/blazor-stock-chart-trackball.png) diff --git a/blazor/stock-chart/events.md b/blazor/stock-chart/events.md index aec6391c23..da17d02d69 100644 --- a/blazor/stock-chart/events.md +++ b/blazor/stock-chart/events.md @@ -1,7 +1,7 @@ --- layout: post title: Events in Blazor Stock Chart Component | Syncfusion -description: Checkout and learn here all about events in Syncfusion Blazor Stock Chart component and much more details. +description: Check out and learn here all about events in Syncfusion Blazor Stock Chart component and much more details. platform: Blazor control: Stock Chart documentation: ug @@ -9,11 +9,11 @@ documentation: ug # Events in Blazor Stock Chart Component -In this section, the list of events of Stock Chart component is provided which will be triggered for appropriate stock chart actions. The events should be provided to the Stock Chart using **StockChartEvents** component. +This section lists the events of the Stock Chart component that are triggered for corresponding actions. Configure events using the **StockChartEvents** component. -The following are the number of events supported for Stock Chart component. +The Stock Chart supports the following events: -* [OnLoaded](events#Onloaded) +* [OnLoaded](events#onloaded) * [OnPointClick](events#onpointclick) * [PointMoved](events#pointmoved) * [RangeChange](events#rangechange) @@ -25,9 +25,10 @@ The following are the number of events supported for Stock Chart component. ## OnLoaded -[Loaded](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartEvents.html#Syncfusion_Blazor_Charts_StockChartEvents_Loaded) event triggers after stock chart is rendered. +[Loaded](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartEvents.html#Syncfusion_Blazor_Charts_StockChartEvents_Loaded) event triggers after the stock chart is rendered. ```cshtml + @using Syncfusion.Blazor.Charts @@ -39,7 +40,6 @@ The following are the number of events supported for Stock Chart component. @code { - public void StockChartLoaded(StockChartEventArgs args) { // Here you can customize your code @@ -47,30 +47,32 @@ The following are the number of events supported for Stock Chart component. public class ChartData { - public DateTime Date {get; set;} - public Double Y {get; set;} + public DateTime Date { get; set; } + public Double Y { get; set; } } public List StockDetails = new List { - new ChartData { Date = new DateTime(2012, 04, 02), Y= 100}, - new ChartData { Date = new DateTime(2012, 04, 09), Y= 10 }, - new ChartData { Date = new DateTime(2012, 04, 16), Y= 500}, - new ChartData { Date = new DateTime(2012, 04, 23), Y= 80 }, - new ChartData { Date = new DateTime(2012, 04, 30), Y= 200}, - new ChartData { Date = new DateTime(2012, 05, 07), Y= 600}, - new ChartData { Date = new DateTime(2012, 05, 14), Y= 50 }, - new ChartData { Date = new DateTime(2012, 05, 21), Y= 700}, - new ChartData { Date = new DateTime(2012, 05, 28), Y= 90 } + new ChartData { Date = new DateTime(2012, 04, 02), Y = 100 }, + new ChartData { Date = new DateTime(2012, 04, 09), Y = 10 }, + new ChartData { Date = new DateTime(2012, 04, 16), Y = 500 }, + new ChartData { Date = new DateTime(2012, 04, 23), Y = 80 }, + new ChartData { Date = new DateTime(2012, 04, 30), Y = 200 }, + new ChartData { Date = new DateTime(2012, 05, 07), Y = 600 }, + new ChartData { Date = new DateTime(2012, 05, 14), Y = 50 }, + new ChartData { Date = new DateTime(2012, 05, 21), Y = 700 }, + new ChartData { Date = new DateTime(2012, 05, 28), Y = 90 } }; } + ``` ## OnPointClick -[OnPointClick](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartEvents.html#Syncfusion_Blazor_Charts_StockChartEvents_OnPointClick) event triggers when data point is clicked. +[OnPointClick](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartEvents.html#Syncfusion_Blazor_Charts_StockChartEvents_OnPointClick) event triggers when a data point is clicked. ```cshtml + @using Syncfusion.Blazor.Charts @@ -82,7 +84,6 @@ The following are the number of events supported for Stock Chart component. @code { - public void PointClick(StockChartPointEventArgs args) { // Here you can customize your code @@ -90,30 +91,76 @@ The following are the number of events supported for Stock Chart component. public class ChartData { - public DateTime Date {get; set;} - public Double Y {get; set;} + public DateTime Date { get; set; } + public Double Y { get; set; } + } + + public List StockDetails = new List + { + new ChartData { Date = new DateTime(2012, 04, 02), Y = 100 }, + new ChartData { Date = new DateTime(2012, 04, 09), Y = 10 }, + new ChartData { Date = new DateTime(2012, 04, 16), Y = 500 }, + new ChartData { Date = new DateTime(2012, 04, 23), Y = 80 }, + new ChartData { Date = new DateTime(2012, 04, 30), Y = 200 }, + new ChartData { Date = new DateTime(2012, 05, 07), Y = 600 }, + new ChartData { Date = new DateTime(2012, 05, 14), Y = 50 }, + new ChartData { Date = new DateTime(2012, 05, 21), Y = 700 }, + new ChartData { Date = new DateTime(2012, 05, 28), Y = 90 } + }; +} + +``` + +## PointMoved + +[PointMoved](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartEvents.html#Syncfusion_Blazor_Charts_StockChartEvents_PointMoved) event triggers when the mouse moves over a data point. + +```cshtml + +@using Syncfusion.Blazor.Charts + + + + + + + + + +@code { + public void OnPointMoved(StockChartPointEventArgs args) + { + // Handle point move + } + + public class ChartData + { + public DateTime Date { get; set; } + public Double Y { get; set; } } public List StockDetails = new List { - new ChartData { Date = new DateTime(2012, 04, 02), Y= 100}, - new ChartData { Date = new DateTime(2012, 04, 09), Y= 10 }, - new ChartData { Date = new DateTime(2012, 04, 16), Y= 500}, - new ChartData { Date = new DateTime(2012, 04, 23), Y= 80 }, - new ChartData { Date = new DateTime(2012, 04, 30), Y= 200}, - new ChartData { Date = new DateTime(2012, 05, 07), Y= 600}, - new ChartData { Date = new DateTime(2012, 05, 14), Y= 50 }, - new ChartData { Date = new DateTime(2012, 05, 21), Y= 700}, - new ChartData { Date = new DateTime(2012, 05, 28), Y= 90 } + new ChartData { Date = new DateTime(2012, 04, 02), Y = 100 }, + new ChartData { Date = new DateTime(2012, 04, 09), Y = 10 }, + new ChartData { Date = new DateTime(2012, 04, 16), Y = 500 }, + new ChartData { Date = new DateTime(2012, 04, 23), Y = 80 }, + new ChartData { Date = new DateTime(2012, 04, 30), Y = 200 }, + new ChartData { Date = new DateTime(2012, 05, 07), Y = 600 }, + new ChartData { Date = new DateTime(2012, 05, 14), Y = 50 }, + new ChartData { Date = new DateTime(2012, 05, 21), Y = 700 }, + new ChartData { Date = new DateTime(2012, 05, 28), Y = 90 } }; } + ``` ## RangeChange -[RangeChange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartEvents.html#Syncfusion_Blazor_Charts_StockChartEvents_RangeChange) event triggers when range is changed. +[RangeChange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartEvents.html#Syncfusion_Blazor_Charts_StockChartEvents_RangeChange) event triggers when the range is changed. ```cshtml + @using Syncfusion.Blazor.Charts @@ -125,7 +172,6 @@ The following are the number of events supported for Stock Chart component. @code { - public void RangeChanged(StockChartRangeChangeEventArgs args) { // Here you can customize your code @@ -133,21 +179,237 @@ The following are the number of events supported for Stock Chart component. public class ChartData { - public DateTime Date {get; set;} - public Double Y {get; set;} + public DateTime Date { get; set; } + public Double Y { get; set; } } public List StockDetails = new List { - new ChartData { Date = new DateTime(2012, 04, 02), Y= 100}, - new ChartData { Date = new DateTime(2012, 04, 09), Y= 10 }, - new ChartData { Date = new DateTime(2012, 04, 16), Y= 500}, - new ChartData { Date = new DateTime(2012, 04, 23), Y= 80 }, - new ChartData { Date = new DateTime(2012, 04, 30), Y= 200}, - new ChartData { Date = new DateTime(2012, 05, 07), Y= 600}, - new ChartData { Date = new DateTime(2012, 05, 14), Y= 50 }, - new ChartData { Date = new DateTime(2012, 05, 21), Y= 700}, - new ChartData { Date = new DateTime(2012, 05, 28), Y= 90 } + new ChartData { Date = new DateTime(2012, 04, 02), Y = 100 }, + new ChartData { Date = new DateTime(2012, 04, 09), Y = 10 }, + new ChartData { Date = new DateTime(2012, 04, 16), Y = 500 }, + new ChartData { Date = new DateTime(2012, 04, 23), Y = 80 }, + new ChartData { Date = new DateTime(2012, 04, 30), Y = 200 }, + new ChartData { Date = new DateTime(2012, 05, 07), Y = 600 }, + new ChartData { Date = new DateTime(2012, 05, 14), Y = 50 }, + new ChartData { Date = new DateTime(2012, 05, 21), Y = 700 }, + new ChartData { Date = new DateTime(2012, 05, 28), Y = 90 } }; } -``` \ No newline at end of file + +``` + +## OnStockChartMouseClick + +[OnStockChartMouseClick](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartEvents.html#Syncfusion_Blazor_Charts_StockChartEvents_OnStockChartMouseClick) event triggers when a mouse click occurs on the chart surface. + +```cshtml +@using Syncfusion.Blazor.Charts + + + + + + + + + +@code { + public void StockChartMouseClick(StockChartMouseEventArgs args) + { + // Handle chart click + } + + public class ChartData + { + public DateTime Date { get; set; } + public Double Y { get; set; } + } + + public List StockDetails = new List + { + new ChartData { Date = new DateTime(2012, 04, 02), Y = 100 }, + new ChartData { Date = new DateTime(2012, 04, 09), Y = 10 }, + new ChartData { Date = new DateTime(2012, 04, 16), Y = 500 }, + new ChartData { Date = new DateTime(2012, 04, 23), Y = 80 }, + new ChartData { Date = new DateTime(2012, 04, 30), Y = 200 }, + new ChartData { Date = new DateTime(2012, 05, 07), Y = 600 }, + new ChartData { Date = new DateTime(2012, 05, 14), Y = 50 }, + new ChartData { Date = new DateTime(2012, 05, 21), Y = 700 }, + new ChartData { Date = new DateTime(2012, 05, 28), Y = 90 } + }; +} + +``` + +## OnStockChartMouseDown + +[OnStockChartMouseDown](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartEvents.html#Syncfusion_Blazor_Charts_StockChartEvents_OnStockChartMouseDown) event triggers when a mouse button is pressed on the chart. + +```cshtml +@using Syncfusion.Blazor.Charts + + + + + + + + + +@code { + public void StockChartMouseDown(StockChartMouseEventArgs args) + { + // Handle mouse down + } + + public class ChartData + { + public DateTime Date { get; set; } + public Double Y { get; set; } + } + + public List StockDetails = new List + { + new ChartData { Date = new DateTime(2012, 04, 02), Y = 100 }, + new ChartData { Date = new DateTime(2012, 04, 09), Y = 10 }, + new ChartData { Date = new DateTime(2012, 04, 16), Y = 500 }, + new ChartData { Date = new DateTime(2012, 04, 23), Y = 80 }, + new ChartData { Date = new DateTime(2012, 04, 30), Y = 200 }, + new ChartData { Date = new DateTime(2012, 05, 07), Y = 600 }, + new ChartData { Date = new DateTime(2012, 05, 14), Y = 50 }, + new ChartData { Date = new DateTime(2012, 05, 21), Y = 700 }, + new ChartData { Date = new DateTime(2012, 05, 28), Y = 90 } + }; +} + +``` + +## OnStockChartMouseLeave + +[OnStockChartMouseLeave](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartEvents.html#Syncfusion_Blazor_Charts_StockChartEvents_OnStockChartMouseLeave) event triggers when the mouse pointer leaves the chart area. + +```cshtml +@using Syncfusion.Blazor.Charts + + + + + + + + + +@code { + public void StockChartMouseLeave(StockChartMouseEventArgs args) + { + // Handle mouse leave + } + + public class ChartData + { + public DateTime Date { get; set; } + public Double Y { get; set; } + } + + public List StockDetails = new List + { + new ChartData { Date = new DateTime(2012, 04, 02), Y = 100 }, + new ChartData { Date = new DateTime(2012, 04, 09), Y = 10 }, + new ChartData { Date = new DateTime(2012, 04, 16), Y = 500 }, + new ChartData { Date = new DateTime(2012, 04, 23), Y = 80 }, + new ChartData { Date = new DateTime(2012, 04, 30), Y = 200 }, + new ChartData { Date = new DateTime(2012, 05, 07), Y = 600 }, + new ChartData { Date = new DateTime(2012, 05, 14), Y = 50 }, + new ChartData { Date = new DateTime(2012, 05, 21), Y = 700 }, + new ChartData { Date = new DateTime(2012, 05, 28), Y = 90 } + }; +} + +``` + +## OnStockChartMouseMove + +[OnStockChartMouseMove](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartEvents.html#Syncfusion_Blazor_Charts_StockChartEvents_OnStockChartMouseMove) event triggers when the mouse moves over the chart. + +```cshtml +@using Syncfusion.Blazor.Charts + + + + + + + + + +@code { + public void StockChartMouseMove(StockChartMouseEventArgs args) + { + // Handle mouse move + } + + public class ChartData + { + public DateTime Date { get; set; } + public Double Y { get; set; } + } + + public List StockDetails = new List + { + new ChartData { Date = new DateTime(2012, 04, 02), Y = 100 }, + new ChartData { Date = new DateTime(2012, 04, 09), Y = 10 }, + new ChartData { Date = new DateTime(2012, 04, 16), Y = 500 }, + new ChartData { Date = new DateTime(2012, 04, 23), Y = 80 }, + new ChartData { Date = new DateTime(2012, 04, 30), Y = 200 }, + new ChartData { Date = new DateTime(2012, 05, 07), Y = 600 }, + new ChartData { Date = new DateTime(2012, 05, 14), Y = 50 }, + new ChartData { Date = new DateTime(2012, 05, 21), Y = 700 }, + new ChartData { Date = new DateTime(2012, 05, 28), Y = 90 } + }; +} + +``` + +## OnStockChartMouseUp + +[OnStockChartMouseUp](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartEvents.html#Syncfusion_Blazor_Charts_StockChartEvents_OnStockChartMouseUp) event triggers when a pressed mouse button is released over the chart. + +```cshtml +@using Syncfusion.Blazor.Charts + + + + + + + + + +@code { + public void StockChartMouseUp(StockChartMouseEventArgs args) + { + // Handle mouse up + } + + public class ChartData + { + public DateTime Date { get; set; } + public Double Y { get; set; } + } + + public List StockDetails = new List + { + new ChartData { Date = new DateTime(2012, 04, 02), Y = 100 }, + new ChartData { Date = new DateTime(2012, 04, 09), Y = 10 }, + new ChartData { Date = new DateTime(2012, 04, 16), Y = 500 }, + new ChartData { Date = new DateTime(2012, 04, 23), Y = 80 }, + new ChartData { Date = new DateTime(2012, 04, 30), Y = 200 }, + new ChartData { Date = new DateTime(2012, 05, 07), Y = 600 }, + new ChartData { Date = new DateTime(2012, 05, 14), Y = 50 }, + new ChartData { Date = new DateTime(2012, 05, 21), Y = 700 }, + new ChartData { Date = new DateTime(2012, 05, 28), Y = 90 } + }; +} + +``` diff --git a/blazor/stock-chart/export-print.md b/blazor/stock-chart/export-print.md index e42433f70a..8f8167f469 100644 --- a/blazor/stock-chart/export-print.md +++ b/blazor/stock-chart/export-print.md @@ -1,7 +1,7 @@ --- layout: post title: Print and Export in Blazor Stock Chart Component | Syncfusion -description: Checkout and learn here all about print and export in Syncfusion Blazor Stock Chart component and more. +description: Check out and learn how to configure and use print and export feature in the Syncfusion Blazor Stock Chart component. platform: Blazor control: Stock Chart documentation: ug @@ -9,9 +9,9 @@ documentation: ug # Print and Export in Blazor Stock Chart Component -The rendered stock chart can be exported to `JPEG`, `PNG`, `SVG`, `PDF`, `XLSX`, or `CSV` format using the export dropdown button in the period selector toolbar. The required format can be chosen using the export dropdown button in stock-chart. +The rendered stock chart supports exporting to JPEG, PNG, SVG, PDF, XLSX, and CSV through the export dropdown in the period selector toolbar. The required format can be selected from the export dropdown in the stock chart toolbar. -The rendered stock chart can be printed directly using print button in period selector toolbar. +The rendered stock chart can be printed directly using the print button in the period selector toolbar. ```cshtml @@ -31,28 +31,27 @@ The rendered stock chart can be printed directly using print button in period se @code { - public class ChartData { - public DateTime Date {get; set;} - public Double Open {get; set;} - public Double Low {get; set;} - public Double Close {get; set;} - public Double High {get; set;} - public Double Volume {get; set;} + public DateTime Date { get; set; } + public Double Open { get; set; } + public Double Low { get; set; } + public Double Close { get; set; } + public Double High { get; set; } + public Double Volume { get; set;} } public List StockDetails = new List { - new ChartData { Date = new DateTime(2012, 04, 02), Open= 85.9757, High = 90.6657,Low = 85.7685, Close = 90.5257,Volume = 660187068}, - new ChartData { Date = new DateTime(2012, 04, 09), Open= 89.4471, High = 92,Low = 86.2157, Close = 86.4614,Volume = 912634864}, - new ChartData { Date = new DateTime(2012, 04, 16), Open= 87.1514, High = 88.6071,Low = 81.4885, Close = 81.8543,Volume = 1221746066}, - new ChartData { Date = new DateTime(2012, 04, 23), Open= 81.5157, High = 88.2857,Low = 79.2857, Close = 86.1428,Volume = 965935749}, - new ChartData { Date = new DateTime(2012, 04, 30), Open= 85.4, High = 85.4857,Low = 80.7385, Close = 80.75,Volume = 615249365}, - new ChartData { Date = new DateTime(2012, 05, 07), Open= 80.2143, High = 82.2685,Low = 79.8185, Close = 80.9585,Volume = 541742692}, - new ChartData { Date = new DateTime(2012, 05, 14), Open= 80.3671, High = 81.0728,Low = 74.5971, Close = 75.7685,Volume = 708126233}, - new ChartData { Date = new DateTime(2012, 05, 21), Open= 76.3571, High = 82.3571,Low = 76.2928, Close = 80.3271,Volume = 682076215}, - new ChartData { Date = new DateTime(2012, 05, 28), Open= 81.5571, High = 83.0714,Low = 80.0743, Close = 80.1414,Volume = 480059584} + new ChartData { Date = new DateTime(2012, 04, 02), Open = 85.9757, High = 90.6657, Low = 85.7685, Close = 90.5257, Volume = 660187068 }, + new ChartData { Date = new DateTime(2012, 04, 09), Open = 89.4471, High = 92, Low = 86.2157, Close = 86.4614, Volume = 912634864 }, + new ChartData { Date = new DateTime(2012, 04, 16), Open = 87.1514, High = 88.6071, Low = 81.4885, Close = 81.8543, Volume = 1221746066 }, + new ChartData { Date = new DateTime(2012, 04, 23), Open = 81.5157, High = 88.2857, Low = 79.2857, Close = 86.1428, Volume = 965935749 }, + new ChartData { Date = new DateTime(2012, 04, 30), Open = 85.4, High = 85.4857, Low = 80.7385, Close = 80.75, Volume = 615249365 }, + new ChartData { Date = new DateTime(2012, 05, 07), Open = 80.2143, High = 82.2685, Low = 79.8185, Close = 80.9585, Volume = 541742692 }, + new ChartData { Date = new DateTime(2012, 05, 14), Open = 80.3671, High = 81.0728, Low = 74.5971, Close = 75.7685, Volume = 708126233 }, + new ChartData { Date = new DateTime(2012, 05, 21), Open = 76.3571, High = 82.3571, Low = 76.2928, Close = 80.3271, Volume = 682076215 }, + new ChartData { Date = new DateTime(2012, 05, 28), Open = 81.5571, High = 83.0714, Low = 80.0743, Close = 80.1414, Volume = 480059584 } }; } @@ -60,9 +59,9 @@ The rendered stock chart can be printed directly using print button in period se ![Printing in Blazor Stock Chart](images/print/blazor-stock-chart-printing.png) -## Disable Export and print +## Disable export and print -Empty the value of `ExportType` to disable the Export. +Set the `ExportType` property to an empty list to disable export options. ```cshtml @@ -75,28 +74,27 @@ Empty the value of `ExportType` to disable the Export. @code { - public class ChartData { - public DateTime Date {get; set;} - public Double Open {get; set;} - public Double Low {get; set;} - public Double Close {get; set;} - public Double High {get; set;} - public Double Volume {get; set;} + public DateTime Date { get; set; } + public Double Open { get; set; } + public Double Low { get; set; } + public Double Close { get; set; } + public Double High { get; set; } + public Double Volume { get; set;} } public List StockDetails = new List { - new ChartData { Date = new DateTime(2012, 04, 02), Open= 85.9757, High = 90.6657,Low = 85.7685, Close = 90.5257,Volume = 660187068}, - new ChartData { Date = new DateTime(2012, 04, 09), Open= 89.4471, High = 92,Low = 86.2157, Close = 86.4614,Volume = 912634864}, - new ChartData { Date = new DateTime(2012, 04, 16), Open= 87.1514, High = 88.6071,Low = 81.4885, Close = 81.8543,Volume = 1221746066}, - new ChartData { Date = new DateTime(2012, 04, 23), Open= 81.5157, High = 88.2857,Low = 79.2857, Close = 86.1428,Volume = 965935749}, - new ChartData { Date = new DateTime(2012, 04, 30), Open= 85.4, High = 85.4857,Low = 80.7385, Close = 80.75,Volume = 615249365}, - new ChartData { Date = new DateTime(2012, 05, 07), Open= 80.2143, High = 82.2685,Low = 79.8185, Close = 80.9585,Volume = 541742692}, - new ChartData { Date = new DateTime(2012, 05, 14), Open= 80.3671, High = 81.0728,Low = 74.5971, Close = 75.7685,Volume = 708126233}, - new ChartData { Date = new DateTime(2012, 05, 21), Open= 76.3571, High = 82.3571,Low = 76.2928, Close = 80.3271,Volume = 682076215}, - new ChartData { Date = new DateTime(2012, 05, 28), Open= 81.5571, High = 83.0714,Low = 80.0743, Close = 80.1414,Volume = 480059584} + new ChartData { Date = new DateTime(2012, 04, 02), Open = 85.9757, High = 90.6657, Low = 85.7685, Close = 90.5257, Volume = 660187068 }, + new ChartData { Date = new DateTime(2012, 04, 09), Open = 89.4471, High = 92, Low = 86.2157, Close = 86.4614, Volume = 912634864 }, + new ChartData { Date = new DateTime(2012, 04, 16), Open = 87.1514, High = 88.6071, Low = 81.4885, Close = 81.8543, Volume = 1221746066 }, + new ChartData { Date = new DateTime(2012, 04, 23), Open = 81.5157, High = 88.2857, Low = 79.2857, Close = 86.1428, Volume = 965935749 }, + new ChartData { Date = new DateTime(2012, 04, 30), Open = 85.4, High = 85.4857, Low = 80.7385, Close = 80.75, Volume = 615249365 }, + new ChartData { Date = new DateTime(2012, 05, 07), Open = 80.2143, High = 82.2685, Low = 79.8185, Close = 80.9585, Volume = 541742692 }, + new ChartData { Date = new DateTime(2012, 05, 14), Open = 80.3671, High = 81.0728, Low = 74.5971, Close = 75.7685, Volume = 708126233 }, + new ChartData { Date = new DateTime(2012, 05, 21), Open = 76.3571, High = 82.3571, Low = 76.2928, Close = 80.3271, Volume = 682076215 }, + new ChartData { Date = new DateTime(2012, 05, 28), Open = 81.5571, High = 83.0714, Low = 80.0743, Close = 80.1414, Volume = 480059584 } }; } @@ -104,22 +102,23 @@ Empty the value of `ExportType` to disable the Export. ![Disabling Export and Print in Blazor Stock Chart](images/print/blazor-stock-chart-disable-print-export.png) -## Customizing the exported chart using Exporting event +## Customize the exported chart using the Exporting event -The [Exporting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartEvents.html#Syncfusion_Blazor_Charts_StockChartEvents_Exporting) event allows users to customize the exported stock chart before it is generated. The [ChartExportEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartExportEventArgs.html) class provides the following options for customizing the exported stock chart: +The [Exporting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartEvents.html#Syncfusion_Blazor_Charts_StockChartEvents_Exporting) event enables customization of the exported stock chart before file generation. The [ChartExportEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartExportEventArgs.html) class provides the following options: -* `Cancel`: This property cancels the export process when set to **true**. -* `Height`: This property specifies the height of the exported chart. When the value is changed, the chart's height is updated. It is not applicable for **XLSX** and **CSV** formats. -* `Width`: This property specifies the width of the exported chart. Changing the value updates the chart's width. It is not applicable for **XLSX** and **CSV** formats. -* `Workbook`: Represents the workbook generated during export, applicable only for **XLSX** and **CSV** formats. +- `Cancel`: Cancels the export process when set to true. +- `Height`: Specifies the height of the exported chart. Not applicable for XLSX and CSV formats. +- `Width`: Specifies the width of the exported chart. Not applicable for XLSX and CSV formats. +- `Workbook`: Represents the workbook generated during export. Applicable only for XLSX and CSV formats. -### Customizing the exported Excel documents +### Customize the exported Excel documents -The [Workbook](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartExportEventArgs.html#Syncfusion_Blazor_Charts_ChartExportEventArgs_Workbook) property in the event argument of [Exporting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartEvents.html#Syncfusion_Blazor_Charts_StockChartEvents_Exporting) event allows the users to customize the exported Excel sheet by modifying the properties of rows, columns, and cells, such as changing the font color, font size, font name, making the text bold, setting a background color, and center-aligning the text within the cells, before the file is generated. +The [Workbook](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartExportEventArgs.html#Syncfusion_Blazor_Charts_ChartExportEventArgs_Workbook) property in the [Exporting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartEvents.html#Syncfusion_Blazor_Charts_StockChartEvents_Exporting) event arguments allows customization of the exported Excel sheet by modifying rows, columns, and cells. Examples include changing font color, font size, and font name; applying bold text; setting background color; and center‑aligning text before the file is generated. -In the code below, when the stock chart is exported to Excel format, the exported Excel document is customized using the `Exporting` event. If export types other than **XLSX** or **CSV** are selected, the `Workbook` property will be **null**, and the chart's width will be set to **500px**. +In the following example, when the stock chart is exported to Excel format, the exported Excel document is customized using the `Exporting` event. If a type other than XLSX or CSV is selected, the `Workbook` property is null, and the chart width is set to **500px**. ```cshtml + @using Microsoft.AspNetCore.Components.Web; @using Syncfusion.PdfExport; @using Syncfusion.ExcelExport; @@ -140,28 +139,27 @@ In the code below, when the stock chart is exported to Excel format, the exporte @code { - public class ChartData { - public DateTime Date {get; set;} - public Double Open {get; set;} - public Double Low {get; set;} - public Double Close {get; set;} - public Double High {get; set;} - public Double Volume {get; set;} + public DateTime Date { get; set; } + public Double Open { get; set; } + public Double Low { get; set; } + public Double Close { get; set; } + public Double High { get; set; } + public Double Volume { get; set;} } public List StockDetails = new List { - new ChartData { Date = new DateTime(2012, 04, 02), Open= 85.9757, High = 90.6657,Low = 85.7685, Close = 90.5257,Volume = 660187068}, - new ChartData { Date = new DateTime(2012, 04, 09), Open= 89.4471, High = 92,Low = 86.2157, Close = 86.4614,Volume = 912634864}, - new ChartData { Date = new DateTime(2012, 04, 16), Open= 87.1514, High = 88.6071,Low = 81.4885, Close = 81.8543,Volume = 1221746066}, - new ChartData { Date = new DateTime(2012, 04, 23), Open= 81.5157, High = 88.2857,Low = 79.2857, Close = 86.1428,Volume = 965935749}, - new ChartData { Date = new DateTime(2012, 04, 30), Open= 85.4, High = 85.4857,Low = 80.7385, Close = 80.75,Volume = 615249365}, - new ChartData { Date = new DateTime(2012, 05, 07), Open= 80.2143, High = 82.2685,Low = 79.8185, Close = 80.9585,Volume = 541742692}, - new ChartData { Date = new DateTime(2012, 05, 14), Open= 80.3671, High = 81.0728,Low = 74.5971, Close = 75.7685,Volume = 708126233}, - new ChartData { Date = new DateTime(2012, 05, 21), Open= 76.3571, High = 82.3571,Low = 76.2928, Close = 80.3271,Volume = 682076215}, - new ChartData { Date = new DateTime(2012, 05, 28), Open= 81.5571, High = 83.0714,Low = 80.0743, Close = 80.1414,Volume = 480059584} + new ChartData { Date = new DateTime(2012, 04, 02), Open = 85.9757, High = 90.6657, Low = 85.7685, Close = 90.5257, Volume = 660187068 }, + new ChartData { Date = new DateTime(2012, 04, 09), Open = 89.4471, High = 92, Low = 86.2157, Close = 86.4614, Volume = 912634864 }, + new ChartData { Date = new DateTime(2012, 04, 16), Open = 87.1514, High = 88.6071, Low = 81.4885, Close = 81.8543, Volume = 1221746066 }, + new ChartData { Date = new DateTime(2012, 04, 23), Open = 81.5157, High = 88.2857, Low = 79.2857, Close = 86.1428, Volume = 965935749 }, + new ChartData { Date = new DateTime(2012, 04, 30), Open = 85.4, High = 85.4857, Low = 80.7385, Close = 80.75, Volume = 615249365 }, + new ChartData { Date = new DateTime(2012, 05, 07), Open = 80.2143, High = 82.2685, Low = 79.8185, Close = 80.9585, Volume = 541742692 }, + new ChartData { Date = new DateTime(2012, 05, 14), Open = 80.3671, High = 81.0728, Low = 74.5971, Close = 75.7685, Volume = 708126233 }, + new ChartData { Date = new DateTime(2012, 05, 21), Open = 76.3571, High = 82.3571, Low = 76.2928, Close = 80.3271, Volume = 682076215 }, + new ChartData { Date = new DateTime(2012, 05, 28), Open = 81.5571, High = 83.0714, Low = 80.0743, Close = 80.1414, Volume = 480059584 } }; public void BeforeExport(ChartExportEventArgs args) diff --git a/blazor/stock-chart/last-data-label.md b/blazor/stock-chart/last-data-label.md index 572d6f057c..56e61e868e 100644 --- a/blazor/stock-chart/last-data-label.md +++ b/blazor/stock-chart/last-data-label.md @@ -1,7 +1,7 @@ --- layout: post title: Last Data Label in Blazor Stock Chart Component | Syncfusion -description: Checkout and learn here all about Last Data Label in Syncfusion Blazor Stock Chart component and much more. +description: Check out and learn how to enable and customize the Last Data Label in the Syncfusion Blazor Stock Chart component. platform: Blazor control: Stock Chart documentation: ug @@ -9,11 +9,11 @@ documentation: ug # Last Data Label in Blazor Stock Chart Component -The last data label feature highlights the most recent data point in a series by displaying a label along with an indicator line. This enhancement improves visibility and makes it easier to identify the latest value in the stock chart. The label can be enabled and customized using the [StockChartLastDataLabel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartLastDataLabel.html) property. +The last data label highlights the most recent data point in a series by displaying a label with an indicator line. This improves readability and makes the latest value easy to identify in the stock chart. The label is enabled and customized using the [StockChartLastDataLabel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartLastDataLabel.html) configuration. ## Enable last data label -To enable the last data label, set the [ShowLabel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartLastDataLabel.html#Syncfusion_Blazor_Charts_StockChartLastDataLabel_ShowLabel) property of the `StockChartLastDataLabel` configuration to **true** within the series settings. +To enable the last data label, set the [ShowLabel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartLastDataLabel.html#Syncfusion_Blazor_Charts_StockChartLastDataLabel_ShowLabel) property of `StockChartLastDataLabel` to **true** in the series settings. ```cshtml @@ -29,7 +29,6 @@ To enable the last data label, set the [ShowLabel](https://help.syncfusion.com/c @code { - public class ChartData { public DateTime Date { get; set; } @@ -60,21 +59,21 @@ To enable the last data label, set the [ShowLabel](https://help.syncfusion.com/c ## Customization -The appearance of the last data label can be customized using various properties defined across different settings. +The appearance of the last data label can be customized using properties available in the following settings. -In the `StockChartLastDataLabel`: -* [Background](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartLastDataLabel.html#Syncfusion_Blazor_Charts_StockChartLastDataLabel_Background): Sets the background color of the last data label container. +In `StockChartLastDataLabel`: +* [Background](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartLastDataLabel.html#Syncfusion_Blazor_Charts_StockChartLastDataLabel_Background): Sets the background color of the label container. * [LineColor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartLastDataLabel.html#Syncfusion_Blazor_Charts_StockChartLastDataLabel_LineColor): Sets the color of the indicator line. * [LineWidth](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartLastDataLabel.html#Syncfusion_Blazor_Charts_StockChartLastDataLabel_LineWidth): Sets the width of the indicator line. * [DashArray](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartLastDataLabel.html#Syncfusion_Blazor_Charts_StockChartLastDataLabel_DashArray): Defines the dash pattern of the indicator line. * [Rx](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartLastDataLabel.html#Syncfusion_Blazor_Charts_StockChartLastDataLabel_Rx): Sets the horizontal corner radius of the label container. * [Ry](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartLastDataLabel.html#Syncfusion_Blazor_Charts_StockChartLastDataLabel_Ry): Sets the vertical corner radius of the label container. -In the [StockChartLastDataLabelBorder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartLastDataLabelBorder.html): +In [StockChartLastDataLabelBorder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartLastDataLabelBorder.html): * [Color](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartLastDataLabelBorder.html#Syncfusion_Blazor_Charts_StockChartLastDataLabelBorder_Color): Sets the border color of the label container. * [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartLastDataLabelBorder.html#Syncfusion_Blazor_Charts_StockChartLastDataLabelBorder_Width): Sets the border width of the label container. -In the [StockChartLastDataLabelFont](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartLastDataLabelFont.html): +In [StockChartLastDataLabelFont](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartLastDataLabelFont.html): * [Size](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartLastDataLabelFont.html#Syncfusion_Blazor_Charts_StockChartLastDataLabelFont_Size): Sets the font size of the label text. * [Color](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartLastDataLabelFont.html#Syncfusion_Blazor_Charts_StockChartLastDataLabelFont_Color): Sets the font color of the label text. * [FontFamily](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartLastDataLabelFont.html#Syncfusion_Blazor_Charts_StockChartLastDataLabelFont_FontFamily): Specifies the font family of the label text. @@ -98,7 +97,6 @@ In the [StockChartLastDataLabelFont](https://help.syncfusion.com/cr/blazor/Syncf @code { - public class ChartData { public DateTime Date { get; set; } @@ -125,4 +123,4 @@ In the [StockChartLastDataLabelFont](https://help.syncfusion.com/cr/blazor/Syncf ``` -![Last Data Label Customization in Blazor Stock Chart](images/last-value/blazor-stock-chart-last-value-label-customization.png) \ No newline at end of file +![Last Data Label Customization in Blazor Stock Chart](images/last-value/blazor-stock-chart-last-value-label-customization.png) diff --git a/blazor/stock-chart/legend.md b/blazor/stock-chart/legend.md index 797985f4c0..262dddc258 100644 --- a/blazor/stock-chart/legend.md +++ b/blazor/stock-chart/legend.md @@ -1,7 +1,7 @@ --- layout: post title: Legend in Blazor Stock Chart Component | Syncfusion -description: Checkout and learn here all about Legend in Syncfusion Blazor Stock Chart component and much more details. +description: Check out and learn how to configure and customize the Legends in the Syncfusion Blazor Stock Chart component. platform: Blazor control: Stock Chart documentation: ug @@ -9,22 +9,22 @@ documentation: ug # Legend in Blazor Stock Chart Component -Legend provides information about the series rendered in the Stock Chart. Legend can be added to a Stock Chart by enabling the [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartLegendSettings.html#Syncfusion_Blazor_Charts_StockChartLegendSettings_Visible) option in the [StockChartLegendSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartLegendSettings.html). +The legend describes the series rendered in the Stock Chart. Enable the legend by setting the [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartLegendSettings.html#Syncfusion_Blazor_Charts_StockChartLegendSettings_Visible) option in [StockChartLegendSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartLegendSettings.html). ## Enable Legend -To display the legend for the Stock Chart, set the [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartLegendSettings.html#Syncfusion_Blazor_Charts_StockChartLegendSettings_Visible) property in [StockChartLegendSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartLegendSettings.html) to **true**. +To display the legend, set the [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartLegendSettings.html#Syncfusion_Blazor_Charts_StockChartLegendSettings_Visible) property in [StockChartLegendSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartLegendSettings.html) to **true**. ```cshtml + @using Syncfusion.Blazor.Charts - - - - - - - + + + + + + @code { public class ChartData @@ -39,33 +39,32 @@ To display the legend for the Stock Chart, set the [Visible](https://help.syncfu public List StockDetails = new List { - new ChartData { Date = new DateTime(2012, 04, 02), Open= 85.9757, High = 90.6657,Low = 85.7685, Close = 90.5257,Volume = 660187068}, - new ChartData { Date = new DateTime(2012, 04, 09), Open= 89.4471, High = 92,Low = 86.2157, Close = 86.4614,Volume = 912634864}, - new ChartData { Date = new DateTime(2012, 04, 16), Open= 87.1514, High = 88.6071,Low = 81.4885, Close = 81.8543,Volume = 1221746066}, - new ChartData { Date = new DateTime(2012, 04, 23), Open= 81.5157, High = 88.2857,Low = 79.2857, Close = 86.1428,Volume = 965935749}, - new ChartData { Date = new DateTime(2012, 04, 30), Open= 85.4, High = 85.4857,Low = 80.7385, Close = 80.75,Volume = 615249365}, + new ChartData { Date = new DateTime(2012, 04, 02), Open = 85.9757, High = 90.6657, Low = 85.7685, Close = 90.5257, Volume = 660187068 }, + new ChartData { Date = new DateTime(2012, 04, 09), Open = 89.4471, High = 92, Low = 86.2157, Close = 86.4614, Volume = 912634864 }, + new ChartData { Date = new DateTime(2012, 04, 16), Open = 87.1514, High = 88.6071, Low = 81.4885, Close = 81.8543, Volume = 1221746066 }, + new ChartData { Date = new DateTime(2012, 04, 23), Open = 81.5157, High = 88.2857, Low = 79.2857, Close = 86.1428, Volume = 965935749 }, + new ChartData { Date = new DateTime(2012, 04, 30), Open = 85.4, High = 85.4857, Low = 80.7385, Close = 80.75, Volume = 615249365 } }; } + ``` ![Blazor Stock Chart with legend](images/blazor-stock-chart-legend.png) - ## Legend Position -By using the [Position](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartLegendSettings.html#Syncfusion_Blazor_Charts_StockChartLegendSettings_Position) property, legend can be placed at **Left**, **Right**, **Top**, **Bottom** or **Custom** of the Stock Chart. The legend is positioned at the bottom of the Stock Chart, by default. +Use the [Position](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartLegendSettings.html#Syncfusion_Blazor_Charts_StockChartLegendSettings_Position) property to place the legend at the **Left**, **Right**, **Top**, **Bottom**, or **Custom** position. By default, the legend appears at the **Bottom** of the Stock Chart. ```cshtml @using Syncfusion.Blazor.Charts - - - - - - - + + + + + + @code { public class ChartData @@ -80,33 +79,34 @@ By using the [Position](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor. public List StockDetails = new List { - new ChartData { Date = new DateTime(2012, 04, 02), Open= 85.9757, High = 90.6657,Low = 85.7685, Close = 90.5257,Volume = 660187068}, - new ChartData { Date = new DateTime(2012, 04, 09), Open= 89.4471, High = 92,Low = 86.2157, Close = 86.4614,Volume = 912634864}, - new ChartData { Date = new DateTime(2012, 04, 16), Open= 87.1514, High = 88.6071,Low = 81.4885, Close = 81.8543,Volume = 1221746066}, - new ChartData { Date = new DateTime(2012, 04, 23), Open= 81.5157, High = 88.2857,Low = 79.2857, Close = 86.1428,Volume = 965935749}, - new ChartData { Date = new DateTime(2012, 04, 30), Open= 85.4, High = 85.4857,Low = 80.7385, Close = 80.75,Volume = 615249365}, + new ChartData { Date = new DateTime(2012, 04, 02), Open = 85.9757, High = 90.6657, Low = 85.7685, Close = 90.5257, Volume = 660187068 }, + new ChartData { Date = new DateTime(2012, 04, 09), Open = 89.4471, High = 92, Low = 86.2157, Close = 86.4614, Volume = 912634864 }, + new ChartData { Date = new DateTime(2012, 04, 16), Open = 87.1514, High = 88.6071, Low = 81.4885, Close = 81.8543, Volume = 1221746066 }, + new ChartData { Date = new DateTime(2012, 04, 23), Open = 81.5157, High = 88.2857, Low = 79.2857, Close = 86.1428, Volume = 965935749 }, + new ChartData { Date = new DateTime(2012, 04, 30), Open = 85.4, High = 85.4857, Low = 80.7385, Close = 80.75, Volume = 615249365 } }; } + ``` ![Blazor Stock Chart with legend position](images/blazor-stock-chart-legend-position.png) -The **Custom** position helps to position the legend anywhere in the Stock Chart using x and y coordinates. +The **Custom** position allows placing the legend anywhere within the Stock Chart using x and y coordinates. ```cshtml + @using Syncfusion.Blazor.Charts - - - - - - - - - + + + + + + + + + - @code { public class ChartData { @@ -120,39 +120,40 @@ The **Custom** position helps to position the legend anywhere in the Stock Chart public List StockDetails = new List { - new ChartData { Date = new DateTime(2012, 04, 02), Open= 85.9757, High = 90.6657,Low = 85.7685, Close = 90.5257,Volume = 660187068}, - new ChartData { Date = new DateTime(2012, 04, 09), Open= 89.4471, High = 92,Low = 86.2157, Close = 86.4614,Volume = 912634864}, - new ChartData { Date = new DateTime(2012, 04, 16), Open= 87.1514, High = 88.6071,Low = 81.4885, Close = 81.8543,Volume = 1221746066}, - new ChartData { Date = new DateTime(2012, 04, 23), Open= 81.5157, High = 88.2857,Low = 79.2857, Close = 86.1428,Volume = 965935749}, - new ChartData { Date = new DateTime(2012, 04, 30), Open= 85.4, High = 85.4857,Low = 80.7385, Close = 80.75,Volume = 615249365}, + new ChartData { Date = new DateTime(2012, 04, 02), Open = 85.9757, High = 90.6657, Low = 85.7685, Close = 90.5257, Volume = 660187068 }, + new ChartData { Date = new DateTime(2012, 04, 09), Open = 89.4471, High = 92, Low = 86.2157, Close = 86.4614, Volume = 912634864 }, + new ChartData { Date = new DateTime(2012, 04, 16), Open = 87.1514, High = 88.6071, Low = 81.4885, Close = 81.8543, Volume = 1221746066 }, + new ChartData { Date = new DateTime(2012, 04, 23), Open = 81.5157, High = 88.2857, Low = 79.2857, Close = 86.1428, Volume = 965935749 }, + new ChartData { Date = new DateTime(2012, 04, 30), Open = 85.4, High = 85.4857, Low = 80.7385, Close = 80.75, Volume = 615249365 } }; } + ``` ![Blazor Stock Chart with custom legend position](images/blazor-stock-chart-legend-location.png) ## Reverse Legend -You can reverse the order of the legend items by using the [Reversed](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartLegendSettings.html#Syncfusion_Blazor_Charts_StockChartLegendSettings_Reversed) property. By default, legend for the first series in the collection will be placed first. +Reverse the order of legend items using the [Reversed](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartLegendSettings.html#Syncfusion_Blazor_Charts_StockChartLegendSettings_Reversed) property. By default, the legend entry for the first series appears first. ```cshtml + @using Syncfusion.Blazor.Charts - - - - + + + + - + - + - + - - + + - @code { public class ChartData { @@ -166,33 +167,34 @@ You can reverse the order of the legend items by using the [Reversed](https://he public List StockDetails = new List { - new ChartData { Date = new DateTime(2012, 04, 02), Open= 85.9757, High = 90.6657,Low = 85.7685, Close = 90.5257,Volume = 660187068}, - new ChartData { Date = new DateTime(2012, 04, 09), Open= 89.4471, High = 92,Low = 86.2157, Close = 86.4614,Volume = 912634864}, - new ChartData { Date = new DateTime(2012, 04, 16), Open= 87.1514, High = 88.6071,Low = 81.4885, Close = 81.8543,Volume = 1221746066}, - new ChartData { Date = new DateTime(2012, 04, 23), Open= 81.5157, High = 88.2857,Low = 79.2857, Close = 86.1428,Volume = 965935749}, - new ChartData { Date = new DateTime(2012, 04, 30), Open= 85.4, High = 85.4857,Low = 80.7385, Close = 80.75,Volume = 615249365}, + new ChartData { Date = new DateTime(2012, 04, 02), Open = 85.9757, High = 90.6657, Low = 85.7685, Close = 90.5257, Volume = 660187068 }, + new ChartData { Date = new DateTime(2012, 04, 09), Open = 89.4471, High = 92, Low = 86.2157, Close = 86.4614, Volume = 912634864 }, + new ChartData { Date = new DateTime(2012, 04, 16), Open = 87.1514, High = 88.6071, Low = 81.4885, Close = 81.8543, Volume = 1221746066 }, + new ChartData { Date = new DateTime(2012, 04, 23), Open = 81.5157, High = 88.2857, Low = 79.2857, Close = 86.1428, Volume = 965935749 }, + new ChartData { Date = new DateTime(2012, 04, 30), Open = 85.4, High = 85.4857, Low = 80.7385, Close = 80.75, Volume = 615249365 } }; } + ``` ![Blazor Stock Chart with legend reversed](images/blazor-stock-chart-legend-reversed.png) ## Legend Alignment -Using the [Alignment](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartLegendSettings.html#Syncfusion_Blazor_Charts_StockChartLegendSettings_Alignment) property, place the legend in **Centre**, **Far**, or **Near** alignment. +Use the [Alignment](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartLegendSettings.html#Syncfusion_Blazor_Charts_StockChartLegendSettings_Alignment) property to align the legend to **Center**, **Far**, or **Near**. ```cshtml + @using Syncfusion.Blazor.Charts - - - - - - - - - + + + + + + + + @code { public class ChartData @@ -207,13 +209,14 @@ Using the [Alignment](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Ch public List StockDetails = new List { - new ChartData { Date = new DateTime(2012, 04, 02), Open= 85.9757, High = 90.6657,Low = 85.7685, Close = 90.5257,Volume = 660187068}, - new ChartData { Date = new DateTime(2012, 04, 09), Open= 89.4471, High = 92,Low = 86.2157, Close = 86.4614,Volume = 912634864}, - new ChartData { Date = new DateTime(2012, 04, 16), Open= 87.1514, High = 88.6071,Low = 81.4885, Close = 81.8543,Volume = 1221746066}, - new ChartData { Date = new DateTime(2012, 04, 23), Open= 81.5157, High = 88.2857,Low = 79.2857, Close = 86.1428,Volume = 965935749}, - new ChartData { Date = new DateTime(2012, 04, 30), Open= 85.4, High = 85.4857,Low = 80.7385, Close = 80.75,Volume = 615249365}, + new ChartData { Date = new DateTime(2012, 04, 02), Open = 85.9757, High = 90.6657, Low = 85.7685, Close = 90.5257, Volume = 660187068 }, + new ChartData { Date = new DateTime(2012, 04, 09), Open = 89.4471, High = 92, Low = 86.2157, Close = 86.4614, Volume = 912634864 }, + new ChartData { Date = new DateTime(2012, 04, 16), Open = 87.1514, High = 88.6071, Low = 81.4885, Close = 81.8543, Volume = 1221746066 }, + new ChartData { Date = new DateTime(2012, 04, 23), Open = 81.5157, High = 88.2857, Low = 79.2857, Close = 86.1428, Volume = 965935749 }, + new ChartData { Date = new DateTime(2012, 04, 30), Open = 85.4, High = 85.4857, Low = 80.7385, Close = 80.75, Volume = 615249365 } }; } + ``` ![Blazor Stock Chart with legend alignment](images/blazor-stock-chart-legend-alignment.png) @@ -222,21 +225,20 @@ Using the [Alignment](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Ch ### Legend Shape -The [LegendShape](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartSeries.html#Syncfusion_Blazor_Charts_StockChartSeries_LegendShape) property in the [Series](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartSeries.html#properties) can be used to change the shape of the legend icon. The default icon shape for legends is **SeriesType**. - +The [LegendShape](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartSeries.html#Syncfusion_Blazor_Charts_StockChartSeries_LegendShape) property in the [Series](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartSeries.html#properties) changes the legend icon shape. The default icon shape is based on **SeriesType**. ```cshtml + @using Syncfusion.Blazor.Charts - - - - - - - + + + + + + + - @code { public class ChartData { @@ -250,34 +252,35 @@ The [LegendShape](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts public List StockDetails = new List { - new ChartData { Date = new DateTime(2012, 04, 02), Open= 85.9757, High = 90.6657,Low = 85.7685, Close = 90.5257,Volume = 660187068}, - new ChartData { Date = new DateTime(2012, 04, 09), Open= 89.4471, High = 92,Low = 86.2157, Close = 86.4614,Volume = 912634864}, - new ChartData { Date = new DateTime(2012, 04, 16), Open= 87.1514, High = 88.6071,Low = 81.4885, Close = 81.8543,Volume = 1221746066}, - new ChartData { Date = new DateTime(2012, 04, 23), Open= 81.5157, High = 88.2857,Low = 79.2857, Close = 86.1428,Volume = 965935749}, - new ChartData { Date = new DateTime(2012, 04, 30), Open= 85.4, High = 85.4857,Low = 80.7385, Close = 80.75,Volume = 615249365}, + new ChartData { Date = new DateTime(2012, 04, 02), Open = 85.9757, High = 90.6657, Low = 85.7685, Close = 90.5257, Volume = 660187068 }, + new ChartData { Date = new DateTime(2012, 04, 09), Open = 89.4471, High = 92, Low = 86.2157, Close = 86.4614, Volume = 912634864 }, + new ChartData { Date = new DateTime(2012, 04, 16), Open = 87.1514, High = 88.6071, Low = 81.4885, Close = 81.8543, Volume = 1221746066 }, + new ChartData { Date = new DateTime(2012, 04, 23), Open = 81.5157, High = 88.2857, Low = 79.2857, Close = 86.1428, Volume = 965935749 }, + new ChartData { Date = new DateTime(2012, 04, 30), Open = 85.4, High = 85.4857, Low = 80.7385, Close = 80.75, Volume = 615249365 } }; } + ``` ![Blazor Stock Chart with legend shape](images/blazor-stock-chart-legend-shape.png) ### Legend Size -When the legend is placed on the top or bottom of the Stock Chart, it takes up 20% - 25% of the Stock Chart's height, and 20% - 25% of the Stock Chart's width when it is positioned on the left or right side of the Stock Chart. So, the [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartLegendSettings.html#Syncfusion_Blazor_Charts_StockChartLegendSettings_Width) and [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartLegendSettings.html#Syncfusion_Blazor_Charts_StockChartLegendSettings_Height) properties can be used to adjust the default legend size. +When placed at the top or bottom, the legend occupies approximately 20%–25% of the chart height; when positioned at the left or right, it occupies approximately 20%–25% of the chart width. Use the [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartLegendSettings.html#Syncfusion_Blazor_Charts_StockChartLegendSettings_Width) and [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartLegendSettings.html#Syncfusion_Blazor_Charts_StockChartLegendSettings_Height) properties to adjust the legend size. ```cshtml + @using Syncfusion.Blazor.Charts - - - - - - - - - - + + + + + + + + + @code { public class ChartData @@ -292,32 +295,33 @@ When the legend is placed on the top or bottom of the Stock Chart, it takes up 2 public List StockDetails = new List { - new ChartData { Date = new DateTime(2012, 04, 02), Open= 85.9757, High = 90.6657,Low = 85.7685, Close = 90.5257,Volume = 660187068}, - new ChartData { Date = new DateTime(2012, 04, 09), Open= 89.4471, High = 92,Low = 86.2157, Close = 86.4614,Volume = 912634864}, - new ChartData { Date = new DateTime(2012, 04, 16), Open= 87.1514, High = 88.6071,Low = 81.4885, Close = 81.8543,Volume = 1221746066}, - new ChartData { Date = new DateTime(2012, 04, 23), Open= 81.5157, High = 88.2857,Low = 79.2857, Close = 86.1428,Volume = 965935749}, - new ChartData { Date = new DateTime(2012, 04, 30), Open= 85.4, High = 85.4857,Low = 80.7385, Close = 80.75,Volume = 615249365}, + new ChartData { Date = new DateTime(2012, 04, 02), Open = 85.9757, High = 90.6657, Low = 85.7685, Close = 90.5257, Volume = 660187068 }, + new ChartData { Date = new DateTime(2012, 04, 09), Open = 89.4471, High = 92, Low = 86.2157, Close = 86.4614, Volume = 912634864 }, + new ChartData { Date = new DateTime(2012, 04, 16), Open = 87.1514, High = 88.6071, Low = 81.4885, Close = 81.8543, Volume = 1221746066 }, + new ChartData { Date = new DateTime(2012, 04, 23), Open = 81.5157, High = 88.2857, Low = 79.2857, Close = 86.1428, Volume = 965935749 }, + new ChartData { Date = new DateTime(2012, 04, 30), Open = 85.4, High = 85.4857, Low = 80.7385, Close = 80.75, Volume = 615249365 } }; } + ``` ![Blazor Stock Chart with legend size](images/blazor-stock-chart-legend-size.png) ### Legend Shape Size -The [ShapeHeight](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartLegendSettings.html#Syncfusion_Blazor_Charts_StockChartLegendSettings_ShapeHeight) and [ShapeWidth](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartLegendSettings.html#Syncfusion_Blazor_Charts_StockChartLegendSettings_ShapeWidth) properties can be used to adjust the dimensions of the legend shape. +Use the [ShapeHeight](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartLegendSettings.html#Syncfusion_Blazor_Charts_StockChartLegendSettings_ShapeHeight) and [ShapeWidth](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartLegendSettings.html#Syncfusion_Blazor_Charts_StockChartLegendSettings_ShapeWidth) properties to control the legend icon dimensions. ```cshtml + @using Syncfusion.Blazor.Charts - - - - - - - - + + + + + + + @code { public class ChartData @@ -332,34 +336,34 @@ The [ShapeHeight](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts public List StockDetails = new List { - new ChartData { Date = new DateTime(2012, 04, 02), Open= 85.9757, High = 90.6657,Low = 85.7685, Close = 90.5257,Volume = 660187068}, - new ChartData { Date = new DateTime(2012, 04, 09), Open= 89.4471, High = 92,Low = 86.2157, Close = 86.4614,Volume = 912634864}, - new ChartData { Date = new DateTime(2012, 04, 16), Open= 87.1514, High = 88.6071,Low = 81.4885, Close = 81.8543,Volume = 1221746066}, - new ChartData { Date = new DateTime(2012, 04, 23), Open= 81.5157, High = 88.2857,Low = 79.2857, Close = 86.1428,Volume = 965935749}, - new ChartData { Date = new DateTime(2012, 04, 30), Open= 85.4, High = 85.4857,Low = 80.7385, Close = 80.75,Volume = 615249365}, + new ChartData { Date = new DateTime(2012, 04, 02), Open = 85.9757, High = 90.6657, Low = 85.7685, Close = 90.5257, Volume = 660187068 }, + new ChartData { Date = new DateTime(2012, 04, 09), Open = 89.4471, High = 92, Low = 86.2157, Close = 86.4614, Volume = 912634864 }, + new ChartData { Date = new DateTime(2012, 04, 16), Open = 87.1514, High = 88.6071, Low = 81.4885, Close = 81.8543, Volume = 1221746066 }, + new ChartData { Date = new DateTime(2012, 04, 23), Open = 81.5157, High = 88.2857, Low = 79.2857, Close = 86.1428, Volume = 965935749 }, + new ChartData { Date = new DateTime(2012, 04, 30), Open = 85.4, High = 85.4857, Low = 80.7385, Close = 80.75, Volume = 615249365 } }; } + ``` ![Blazor Stock Chart with legend shape size](images/blazor-stock-chart-legend-size-shape.png) - ### Legend Item Padding -The [ItemPadding](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartLegendSettings.html#Syncfusion_Blazor_Charts_StockChartLegendSettings_ItemPadding) property can be used to adjust the space between the legend items. +Use the [ItemPadding](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartLegendSettings.html#Syncfusion_Blazor_Charts_StockChartLegendSettings_ItemPadding) property to adjust spacing between legend items. ```cshtml + @using Syncfusion.Blazor.Charts - - - - - - - - - + + + + + + + + @code { public class ChartData @@ -374,35 +378,36 @@ The [ItemPadding](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts public List StockDetails = new List { - new ChartData { Date = new DateTime(2012, 04, 02), Open= 85.9757, High = 90.6657,Low = 85.7685, Close = 90.5257,Volume = 660187068}, - new ChartData { Date = new DateTime(2012, 04, 09), Open= 89.4471, High = 92,Low = 86.2157, Close = 86.4614,Volume = 912634864}, - new ChartData { Date = new DateTime(2012, 04, 16), Open= 87.1514, High = 88.6071,Low = 81.4885, Close = 81.8543,Volume = 1221746066}, - new ChartData { Date = new DateTime(2012, 04, 23), Open= 81.5157, High = 88.2857,Low = 79.2857, Close = 86.1428,Volume = 965935749}, - new ChartData { Date = new DateTime(2012, 04, 30), Open= 85.4, High = 85.4857,Low = 80.7385, Close = 80.75,Volume = 615249365}, + new ChartData { Date = new DateTime(2012, 04, 02), Open = 85.9757, High = 90.6657, Low = 85.7685, Close = 90.5257, Volume = 660187068 }, + new ChartData { Date = new DateTime(2012, 04, 09), Open = 89.4471, High = 92, Low = 86.2157, Close = 86.4614, Volume = 912634864 }, + new ChartData { Date = new DateTime(2012, 04, 16), Open = 87.1514, High = 88.6071, Low = 81.4885, Close = 81.8543, Volume = 1221746066 }, + new ChartData { Date = new DateTime(2012, 04, 23), Open = 81.5157, High = 88.2857, Low = 79.2857, Close = 86.1428, Volume = 965935749 }, + new ChartData { Date = new DateTime(2012, 04, 30), Open = 85.4, High = 85.4857, Low = 80.7385, Close = 80.75, Volume = 615249365 } }; } + ``` ![Blazor Stock Chart with legend item padding](images/Blazor-stock-chart-legend-itemPadding.png) ### Legend Paging -When the legend items exceed legend bounds, paging will be enabled by default. End user can view each legend item using the navigation buttons to navigate between pages. +When legend items exceed the available bounds, paging is enabled automatically. End users can navigate between pages using the navigation buttons. ```cshtml + @using Syncfusion.Blazor.Charts - - - - - - - - - + + + + + + + + + - @code { public class ChartData { @@ -416,35 +421,35 @@ When the legend items exceed legend bounds, paging will be enabled by default. E public List StockDetails = new List { - new ChartData { Date = new DateTime(2012, 04, 02), Open= 85.9757, High = 90.6657,Low = 85.7685, Close = 90.5257,Volume = 660187068}, - new ChartData { Date = new DateTime(2012, 04, 09), Open= 89.4471, High = 92,Low = 86.2157, Close = 86.4614,Volume = 912634864}, - new ChartData { Date = new DateTime(2012, 04, 16), Open= 87.1514, High = 88.6071,Low = 81.4885, Close = 81.8543,Volume = 1221746066}, - new ChartData { Date = new DateTime(2012, 04, 23), Open= 81.5157, High = 88.2857,Low = 79.2857, Close = 86.1428,Volume = 965935749}, - new ChartData { Date = new DateTime(2012, 04, 30), Open= 85.4, High = 85.4857,Low = 80.7385, Close = 80.75,Volume = 615249365}, + new ChartData { Date = new DateTime(2012, 04, 02), Open = 85.9757, High = 90.6657, Low = 85.7685, Close = 90.5257, Volume = 660187068 }, + new ChartData { Date = new DateTime(2012, 04, 09), Open = 89.4471, High = 92, Low = 86.2157, Close = 86.4614, Volume = 912634864 }, + new ChartData { Date = new DateTime(2012, 04, 16), Open = 87.1514, High = 88.6071, Low = 81.4885, Close = 81.8543, Volume = 1221746066 }, + new ChartData { Date = new DateTime(2012, 04, 23), Open = 81.5157, High = 88.2857, Low = 79.2857, Close = 86.1428, Volume = 965935749 }, + new ChartData { Date = new DateTime(2012, 04, 30), Open = 85.4, High = 85.4857, Low = 80.7385, Close = 80.75, Volume = 615249365 } }; } + ``` ![Blazor Stock Chart with legend paging](images/blazor-stock-chart-legend-paging.png) - ### Legend Text Wrap -When the legend text exceeds the container, the text can be wrapped by using [TextWrap](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartLegendSettings.html#Syncfusion_Blazor_Charts_StockChartLegendSettings_TextWrap) property. End user can also wrap the legend text based on the [MaxLabelWidth](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartLegendSettings.html#Syncfusion_Blazor_Charts_StockChartLegendSettings_MaxLabelWidth) property. +When legend text exceeds the container, enable wrapping using the [TextWrap](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartLegendSettings.html#Syncfusion_Blazor_Charts_StockChartLegendSettings_TextWrap) property. Wrapping can also be controlled using the [MaxLabelWidth](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartLegendSettings.html#Syncfusion_Blazor_Charts_StockChartLegendSettings_MaxLabelWidth) property. ```cshtml + @using Syncfusion.Blazor.Charts - - - - - - - - - - + + + + + + + + + @code { public class ChartData @@ -459,34 +464,35 @@ When the legend text exceeds the container, the text can be wrapped by using [Te public List StockDetails = new List { - new ChartData { Date = new DateTime(2012, 04, 02), Open= 85.9757, High = 90.6657,Low = 85.7685, Close = 90.5257,Volume = 660187068}, - new ChartData { Date = new DateTime(2012, 04, 09), Open= 89.4471, High = 92,Low = 86.2157, Close = 86.4614,Volume = 912634864}, - new ChartData { Date = new DateTime(2012, 04, 16), Open= 87.1514, High = 88.6071,Low = 81.4885, Close = 81.8543,Volume = 1221746066}, - new ChartData { Date = new DateTime(2012, 04, 23), Open= 81.5157, High = 88.2857,Low = 79.2857, Close = 86.1428,Volume = 965935749}, - new ChartData { Date = new DateTime(2012, 04, 30), Open= 85.4, High = 85.4857,Low = 80.7385, Close = 80.75,Volume = 615249365}, + new ChartData { Date = new DateTime(2012, 04, 02), Open = 85.9757, High = 90.6657, Low = 85.7685, Close = 90.5257, Volume = 660187068 }, + new ChartData { Date = new DateTime(2012, 04, 09), Open = 89.4471, High = 92, Low = 86.2157, Close = 86.4614, Volume = 912634864 }, + new ChartData { Date = new DateTime(2012, 04, 16), Open = 87.1514, High = 88.6071, Low = 81.4885, Close = 81.8543, Volume = 1221746066 }, + new ChartData { Date = new DateTime(2012, 04, 23), Open = 81.5157, High = 88.2857, Low = 79.2857, Close = 86.1428, Volume = 965935749 }, + new ChartData { Date = new DateTime(2012, 04, 30), Open = 85.4, High = 85.4857, Low = 80.7385, Close = 80.75, Volume = 615249365 } }; } + ``` ![Blazor Stock Chart with legend text wrap](images/blazor-stock-chart-legend-text-wrap.png) ## Series selection based on legend -By default, when you click on the legend item, the appropriate series visibility is collapsed. On the other hand, [ToggleVisibility](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartLegendSettings.html#Syncfusion_Blazor_Charts_StockChartLegendSettings_ToggleVisibility) property is used to disable such functionality. +By default, clicking a legend item collapses the visibility of the corresponding series. The [ToggleVisibility](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartLegendSettings.html#Syncfusion_Blazor_Charts_StockChartLegendSettings_ToggleVisibility) property disables this behavior when set to false. ```cshtml + @using Syncfusion.Blazor.Charts - - - - - - - - - - + + + + + + + + + @code { public class ChartData @@ -501,34 +507,35 @@ By default, when you click on the legend item, the appropriate series visibility public List StockDetails = new List { - new ChartData { Date = new DateTime(2012, 04, 02), Open= 85.9757, High = 90.6657,Low = 85.7685, Close = 90.5257,Volume = 660187068}, - new ChartData { Date = new DateTime(2012, 04, 09), Open= 89.4471, High = 92,Low = 86.2157, Close = 86.4614,Volume = 912634864}, - new ChartData { Date = new DateTime(2012, 04, 16), Open= 87.1514, High = 88.6071,Low = 81.4885, Close = 81.8543,Volume = 1221746066}, - new ChartData { Date = new DateTime(2012, 04, 23), Open= 81.5157, High = 88.2857,Low = 79.2857, Close = 86.1428,Volume = 965935749}, - new ChartData { Date = new DateTime(2012, 04, 30), Open= 85.4, High = 85.4857,Low = 80.7385, Close = 80.75,Volume = 615249365}, + new ChartData { Date = new DateTime(2012, 04, 02), Open = 85.9757, High = 90.6657, Low = 85.7685, Close = 90.5257, Volume = 660187068 }, + new ChartData { Date = new DateTime(2012, 04, 09), Open = 89.4471, High = 92, Low = 86.2157, Close = 86.4614, Volume = 912634864 }, + new ChartData { Date = new DateTime(2012, 04, 16), Open = 87.1514, High = 88.6071, Low = 81.4885, Close = 81.8543, Volume = 1221746066 }, + new ChartData { Date = new DateTime(2012, 04, 23), Open = 81.5157, High = 88.2857, Low = 79.2857, Close = 86.1428, Volume = 965935749 }, + new ChartData { Date = new DateTime(2012, 04, 30), Open = 85.4, High = 85.4857, Low = 80.7385, Close = 80.75, Volume = 615249365 } }; } + ``` ![Blazor Stock Chart with selection mode](images/blazor-stock-chart-selection-mode.png) ## Hiding legend item -The series [Name](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartSeries.html#Syncfusion_Blazor_Charts_StockChartSeries_Name) will be displayed as the legend text by default. You can skip the legend for particular series by providing an empty string to the series [Name](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartSeries.html#Syncfusion_Blazor_Charts_StockChartSeries_Name) property. +The series [Name](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartSeries.html#Syncfusion_Blazor_Charts_StockChartSeries_Name) is used as the legend text by default. Skip the legend for a specific series by providing an empty string for the [Name](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartSeries.html#Syncfusion_Blazor_Charts_StockChartSeries_Name) property. ```cshtml + @using Syncfusion.Blazor.Charts - - - - - - - - - - + + + + + + + + + @code { public class ChartData @@ -543,13 +550,14 @@ The series [Name](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts public List StockDetails = new List { - new ChartData { Date = new DateTime(2012, 04, 02), Open= 85.9757, High = 90.6657,Low = 85.7685, Close = 90.5257,Volume = 660187068}, - new ChartData { Date = new DateTime(2012, 04, 09), Open= 89.4471, High = 92,Low = 86.2157, Close = 86.4614,Volume = 912634864}, - new ChartData { Date = new DateTime(2012, 04, 16), Open= 87.1514, High = 88.6071,Low = 81.4885, Close = 81.8543,Volume = 1221746066}, - new ChartData { Date = new DateTime(2012, 04, 23), Open= 81.5157, High = 88.2857,Low = 79.2857, Close = 86.1428,Volume = 965935749}, - new ChartData { Date = new DateTime(2012, 04, 30), Open= 85.4, High = 85.4857,Low = 80.7385, Close = 80.75,Volume = 615249365}, + new ChartData { Date = new DateTime(2012, 04, 02), Open = 85.9757, High = 90.6657, Low = 85.7685, Close = 90.5257, Volume = 660187068 }, + new ChartData { Date = new DateTime(2012, 04, 09), Open = 89.4471, High = 92, Low = 86.2157, Close = 86.4614, Volume = 912634864 }, + new ChartData { Date = new DateTime(2012, 04, 16), Open = 87.1514, High = 88.6071, Low = 81.4885, Close = 81.8543, Volume = 1221746066 }, + new ChartData { Date = new DateTime(2012, 04, 23), Open = 81.5157, High = 88.2857, Low = 79.2857, Close = 86.1428, Volume = 965935749 }, + new ChartData { Date = new DateTime(2012, 04, 30), Open = 85.4, High = 85.4857, Low = 80.7385, Close = 80.75, Volume = 615249365 } }; } + ``` -![Blazor Stock Chart hiding legend item](images/blazor-stock-chart-hidding-legend.png) \ No newline at end of file +![Blazor Stock Chart hiding legend item](images/blazor-stock-chart-hidding-legend.png) diff --git a/blazor/stock-chart/panning.md b/blazor/stock-chart/panning.md index 011bee8756..c061109ede 100644 --- a/blazor/stock-chart/panning.md +++ b/blazor/stock-chart/panning.md @@ -1,7 +1,7 @@ --- layout: post title: Panning in Blazor Stock Chart Component | Syncfusion -description: Checkout and learn here all about panning functionality in Syncfusion Blazor Stock Chart component and more. +description: Check out and learn here all about panning functionality in the Syncfusion Blazor Stock Chart component. platform: Blazor control: Stock Chart documentation: ug @@ -9,9 +9,10 @@ documentation: ug # Panning in Blazor Stock Chart Component -By default, panning is enabled in the Stock Chart, ensuring that users can immediately start interacting with the chart upon rendering. This default behavior is controlled by the [EnablePan](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartZoomSettings.html#Syncfusion_Blazor_Charts_StockChartZoomSettings_EnablePan) property, which is set to **true** by default in the [StockChartZoomSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartZoomSettings.html). +Panning is enabled by default in the Stock Chart. This behavior is controlled by the [EnablePan](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartZoomSettings.html#Syncfusion_Blazor_Charts_StockChartZoomSettings_EnablePan) property of [StockChartZoomSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartZoomSettings.html), which defaults to **true**. ```cshtml + @using Syncfusion.Blazor @using Syncfusion.Blazor.Charts @inject NavigationManager NavigationManager @@ -32,7 +33,7 @@ else - + @@ -40,8 +41,8 @@ else - } + @code { private ChartData[] dataSource; @@ -65,4 +66,4 @@ else ![Blazor Stock Chart with Panning](images/panning.gif) -N> Refer to our [Blazor Stock Charts](https://www.syncfusion.com/blazor-components/blazor-stock-chart) feature tour page for its groundbreaking feature representations and also explore our [Blazor Stock Chart Example](https://blazor.syncfusion.com/demos/stock-chart/stock-chart?theme=bootstrap5) to know various stock chart types and how to represent time-dependent data, showing trends at equal intervals. \ No newline at end of file +N> Refer to the [Blazor Stock Chart](https://www.syncfusion.com/blazor-components/blazor-stock-chart) feature tour page for feature representations and explore the [Blazor Stock Chart example](https://blazor.syncfusion.com/demos/stock-chart/stock-chart?theme=bootstrap5) to see various stock chart types and time-dependent data rendered at equal intervals. diff --git a/blazor/stock-chart/period-selector.md b/blazor/stock-chart/period-selector.md index 68ea5b1bfb..e9aa28f309 100644 --- a/blazor/stock-chart/period-selector.md +++ b/blazor/stock-chart/period-selector.md @@ -1,7 +1,7 @@ --- layout: post title: Period Selector in Blazor Stock Chart Component | Syncfusion -description: Checkout and learn here all about period selector in Syncfusion Blazor Stock Chart component and more. +description: Check out and learn here all about period selector in the Syncfusion Blazor Stock Chart component and more. platform: Blazor control: Stock Chart documentation: ug @@ -11,13 +11,13 @@ documentation: ug # Period Selector in Blazor Stock Chart Component -The period selector allows to select a range with specified periods. By default the period selector is enabled in stock chart. +The period selector enables selecting a range with specified periods. The period selector is enabled by default in the stock chart. ## Periods -Periods is an array of objects that allows users to specify the range of [Periods](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartModel.html#Syncfusion_Blazor_Charts_StockChartModel_Periods). The `Interval` property specifies the count value of the button, and the `Text` property specifies the text to be displayed on button. The `IntervalType` property allows users to customize the intervals of the buttons. The `IntervalType` property supports the following interval types: +Periods is an array of objects that defines the range of [Periods](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartModel.html#Syncfusion_Blazor_Charts_StockChartModel_Periods). The `Interval` property specifies the count value of the button, and the `Text` property specifies the text displayed on the button. The `IntervalType` property customizes the intervals of the buttons and supports the following types: * Auto * Years @@ -55,7 +55,6 @@ Periods is an array of objects that allows users to specify the range of [Period @code { - public List IndicatorType = new List() { }; public List TrendlineType = new List() { }; public List ExportType = new List() { }; @@ -73,15 +72,15 @@ Periods is an array of objects that allows users to specify the range of [Period public List StockDetails = new List { - new ChartData { Date = new DateTime(2012, 04, 02), Open= 85.9757, High = 90.6657,Low = 85.7685, Close = 90.5257,Volume = 660187068}, - new ChartData { Date = new DateTime(2012, 04, 09), Open= 89.4471, High = 92,Low = 86.2157, Close = 86.4614,Volume = 912634864}, - new ChartData { Date = new DateTime(2012, 04, 16), Open= 87.1514, High = 88.6071,Low = 81.4885, Close = 81.8543,Volume = 1221746066}, - new ChartData { Date = new DateTime(2012, 04, 23), Open= 81.5157, High = 88.2857,Low = 79.2857, Close = 86.1428,Volume = 965935749}, - new ChartData { Date = new DateTime(2012, 04, 30), Open= 85.4, High = 85.4857,Low = 80.7385, Close = 80.75,Volume = 615249365}, - new ChartData { Date = new DateTime(2012, 05, 07), Open= 80.2143, High = 82.2685,Low = 79.8185, Close = 80.9585,Volume = 541742692}, - new ChartData { Date = new DateTime(2012, 05, 14), Open= 80.3671, High = 81.0728,Low = 74.5971, Close = 75.7685,Volume = 708126233}, - new ChartData { Date = new DateTime(2012, 05, 21), Open= 76.3571, High = 82.3571,Low = 76.2928, Close = 80.3271,Volume = 682076215}, - new ChartData { Date = new DateTime(2012, 05, 28), Open= 81.5571, High = 83.0714,Low = 80.0743, Close = 80.1414,Volume = 480059584} + new ChartData { Date = new DateTime(2012, 04, 02), Open = 85.9757, High = 90.6657, Low = 85.7685, Close = 90.5257, Volume = 660187068 }, + new ChartData { Date = new DateTime(2012, 04, 09), Open = 89.4471, High = 92, Low = 86.2157, Close = 86.4614, Volume = 912634864 }, + new ChartData { Date = new DateTime(2012, 04, 16), Open = 87.1514, High = 88.6071, Low = 81.4885, Close = 81.8543, Volume = 1221746066 }, + new ChartData { Date = new DateTime(2012, 04, 23), Open = 81.5157, High = 88.2857, Low = 79.2857, Close = 86.1428, Volume = 965935749 }, + new ChartData { Date = new DateTime(2012, 04, 30), Open = 85.4, High = 85.4857, Low = 80.7385, Close = 80.75, Volume = 615249365 }, + new ChartData { Date = new DateTime(2012, 05, 07), Open = 80.2143, High = 82.2685, Low = 79.8185, Close = 80.9585, Volume = 541742692 }, + new ChartData { Date = new DateTime(2012, 05, 14), Open = 80.3671, High = 81.0728, Low = 74.5971, Close = 75.7685, Volume = 708126233 }, + new ChartData { Date = new DateTime(2012, 05, 21), Open = 76.3571, High = 82.3571, Low = 76.2928, Close = 80.3271, Volume = 682076215 }, + new ChartData { Date = new DateTime(2012, 05, 28), Open = 81.5571, High = 83.0714, Low = 80.0743, Close = 80.1414, Volume = 480059584 } }; } @@ -92,7 +91,7 @@ Periods is an array of objects that allows users to specify the range of [Period ## Visibility of period selector -The [EnablePeriodSelector](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartModel.html#Syncfusion_Blazor_Charts_StockChartModel_EnablePeriodSelector) property allows users to toggle the visibility of period selector. +The [EnablePeriodSelector](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartModel.html#Syncfusion_Blazor_Charts_StockChartModel_EnablePeriodSelector) property toggles the visibility of the period selector. ```cshtml @@ -105,7 +104,6 @@ The [EnablePeriodSelector](https://help.syncfusion.com/cr/blazor/Syncfusion.Blaz @code { - public class ChartData { public DateTime Date { get; set; } @@ -118,18 +116,18 @@ The [EnablePeriodSelector](https://help.syncfusion.com/cr/blazor/Syncfusion.Blaz public List StockDetails = new List { - new ChartData { Date = new DateTime(2012, 04, 02), Open= 85.9757, High = 90.6657,Low = 85.7685, Close = 90.5257,Volume = 660187068}, - new ChartData { Date = new DateTime(2012, 04, 09), Open= 89.4471, High = 92,Low = 86.2157, Close = 86.4614,Volume = 912634864}, - new ChartData { Date = new DateTime(2012, 04, 16), Open= 87.1514, High = 88.6071,Low = 81.4885, Close = 81.8543,Volume = 1221746066}, - new ChartData { Date = new DateTime(2012, 04, 23), Open= 81.5157, High = 88.2857,Low = 79.2857, Close = 86.1428,Volume = 965935749}, - new ChartData { Date = new DateTime(2012, 04, 30), Open= 85.4, High = 85.4857,Low = 80.7385, Close = 80.75,Volume = 615249365}, - new ChartData { Date = new DateTime(2012, 05, 07), Open= 80.2143, High = 82.2685,Low = 79.8185, Close = 80.9585,Volume = 541742692}, - new ChartData { Date = new DateTime(2012, 05, 14), Open= 80.3671, High = 81.0728,Low = 74.5971, Close = 75.7685,Volume = 708126233}, - new ChartData { Date = new DateTime(2012, 05, 21), Open= 76.3571, High = 82.3571,Low = 76.2928, Close = 80.3271,Volume = 682076215}, - new ChartData { Date = new DateTime(2012, 05, 28), Open= 81.5571, High = 83.0714,Low = 80.0743, Close = 80.1414,Volume = 480059584} + new ChartData { Date = new DateTime(2012, 04, 02), Open = 85.9757, High = 90.6657, Low = 85.7685, Close = 90.5257, Volume = 660187068 }, + new ChartData { Date = new DateTime(2012, 04, 09), Open = 89.4471, High = 92, Low = 86.2157, Close = 86.4614, Volume = 912634864 }, + new ChartData { Date = new DateTime(2012, 04, 16), Open = 87.1514, High = 88.6071, Low = 81.4885, Close = 81.8543, Volume = 1221746066 }, + new ChartData { Date = new DateTime(2012, 04, 23), Open = 81.5157, High = 88.2857, Low = 79.2857, Close = 86.1428, Volume = 965935749 }, + new ChartData { Date = new DateTime(2012, 04, 30), Open = 85.4, High = 85.4857, Low = 80.7385, Close = 80.75, Volume = 615249365 }, + new ChartData { Date = new DateTime(2012, 05, 07), Open = 80.2143, High = 82.2685, Low = 79.8185, Close = 80.9585, Volume = 541742692 }, + new ChartData { Date = new DateTime(2012, 05, 14), Open = 80.3671, High = 81.0728, Low = 74.5971, Close = 75.7685, Volume = 708126233 }, + new ChartData { Date = new DateTime(2012, 05, 21), Open = 76.3571, High = 82.3571, Low = 76.2928, Close = 80.3271, Volume = 682076215 }, + new ChartData { Date = new DateTime(2012, 05, 28), Open = 81.5571, High = 83.0714, Low = 80.0743, Close = 80.1414, Volume = 480059584 } }; } ``` -![Visibility of Period Selector in Blazor Stock Chart](images/common/blazor-stock-chart-visibility-period-selector.png) \ No newline at end of file +![Visibility of Period Selector in Blazor Stock Chart](images/common/blazor-stock-chart-visibility-period-selector.png) diff --git a/blazor/stock-chart/range-selector.md b/blazor/stock-chart/range-selector.md index a6581b592c..fd89d228fb 100644 --- a/blazor/stock-chart/range-selector.md +++ b/blazor/stock-chart/range-selector.md @@ -1,9 +1,9 @@ --- layout: post title: Range Selector in Blazor Stock Chart Component | Syncfusion -description: Checkout and learn here all about range selector in Syncfusion Blazor Stock Chart component and more. +description: Check out and learn how to configure and customize range selector in the Syncfusion Blazor Stock Chart component. platform: Blazor -control: Stock Chart +control: Stock Chart documentation: ug --- @@ -11,17 +11,17 @@ documentation: ug # Range Selector in Blazor Stock Chart Component -The range selector allows to select a range with specified periods. By default, the range selector is enabled in stock chart. +The range selector enables selection of a date range using specified periods. By default, the range selector is enabled in the stock chart. ## Selecting Range -The left and right thumb of RangeNavigator are used to indicate the selected range in the large collection of data. Following are the ways to select a range. +The left and right thumbs of the RangeNavigator indicate the selected range across large datasets. The range can be selected in the following ways. * By dragging the thumbs. -* By tapping on the labels. -* By setting the start and end through Date Range button. +* By tapping the labels. +* By choosing a start and end date using the Date Range button. -Following code example shows the [EnableSelector](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfStockChart.html#Syncfusion_Blazor_Charts_SfStockChart_EnableSelector) property that allows users to toggle the visibility of enable selector. +The following code example shows the [EnableSelector](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfStockChart.html#Syncfusion_Blazor_Charts_SfStockChart_EnableSelector) property used to toggle the visibility of the range selector. ```cshtml @@ -34,7 +34,6 @@ Following code example shows the [EnableSelector](https://help.syncfusion.com/cr @code { - public class ChartData { public DateTime Date {get; set;} @@ -46,19 +45,19 @@ Following code example shows the [EnableSelector](https://help.syncfusion.com/cr } public List StockDetails = new List -{ - new ChartData { Date = new DateTime(2012, 04, 02), Open= 85.9757, High = 90.6657,Low = 85.7685, Close = 90.5257,Volume = 660187068}, - new ChartData { Date = new DateTime(2012, 04, 09), Open= 89.4471, High = 92,Low = 86.2157, Close = 86.4614,Volume = 912634864}, - new ChartData { Date = new DateTime(2012, 04, 16), Open= 87.1514, High = 88.6071,Low = 81.4885, Close = 81.8543,Volume = 1221746066}, - new ChartData { Date = new DateTime(2012, 04, 23), Open= 81.5157, High = 88.2857,Low = 79.2857, Close = 86.1428,Volume = 965935749}, - new ChartData { Date = new DateTime(2012, 04, 30), Open= 85.4, High = 85.4857,Low = 80.7385, Close = 80.75,Volume = 615249365}, - new ChartData { Date = new DateTime(2012, 05, 07), Open= 80.2143, High = 82.2685,Low = 79.8185, Close = 80.9585,Volume = 541742692}, - new ChartData { Date = new DateTime(2012, 05, 14), Open= 80.3671, High = 81.0728,Low = 74.5971, Close = 75.7685,Volume = 708126233}, - new ChartData { Date = new DateTime(2012, 05, 21), Open= 76.3571, High = 82.3571,Low = 76.2928, Close = 80.3271,Volume = 682076215}, - new ChartData { Date = new DateTime(2012, 05, 28), Open= 81.5571, High = 83.0714,Low = 80.0743, Close = 80.1414,Volume = 480059584} + { + new ChartData { Date = new DateTime(2012, 04, 02), Open = 85.9757, High = 90.6657, Low = 85.7685, Close = 90.5257, Volume = 660187068 }, + new ChartData { Date = new DateTime(2012, 04, 09), Open = 89.4471, High = 92, Low = 86.2157, Close = 86.4614, Volume = 912634864 }, + new ChartData { Date = new DateTime(2012, 04, 16), Open = 87.1514, High = 88.6071, Low = 81.4885, Close = 81.8543, Volume = 1221746066 }, + new ChartData { Date = new DateTime(2012, 04, 23), Open = 81.5157, High = 88.2857, Low = 79.2857, Close = 86.1428, Volume = 965935749 }, + new ChartData { Date = new DateTime(2012, 04, 30), Open = 85.4, High = 85.4857, Low = 80.7385, Close = 80.75, Volume = 615249365 }, + new ChartData { Date = new DateTime(2012, 05, 07), Open = 80.2143, High = 82.2685, Low = 79.8185, Close = 80.9585, Volume = 541742692 }, + new ChartData { Date = new DateTime(2012, 05, 14), Open = 80.3671, High = 81.0728, Low = 74.5971, Close = 75.7685, Volume = 708126233 }, + new ChartData { Date = new DateTime(2012, 05, 21), Open = 76.3571, High = 82.3571, Low = 76.2928, Close = 80.3271, Volume = 682076215 }, + new ChartData { Date = new DateTime(2012, 05, 28), Open = 81.5571, High = 83.0714, Low = 80.0743, Close = 80.1414, Volume = 480059584 } }; } ``` -![Range Selection in Blazor Stock Chart](images/common/blazor-stock-chart-range-selection.png) \ No newline at end of file +![Range Selection in Blazor Stock Chart](images/common/blazor-stock-chart-range-selection.png) diff --git a/blazor/stock-chart/series-types.md b/blazor/stock-chart/series-types.md index 430dc6ab69..3d0cdb56d3 100644 --- a/blazor/stock-chart/series-types.md +++ b/blazor/stock-chart/series-types.md @@ -1,7 +1,7 @@ --- layout: post title: Series Types in Blazor Stock Chart Component | Syncfusion -description: Checkout and learn here all about series types in Syncfusion Blazor Stock Chart component and much more. +description: Check out and learn about the supported series types in the Syncfusion Blazor Stock Chart component. platform: Blazor control: Stock Chart documentation: ug @@ -9,13 +9,13 @@ documentation: ug # Series Types in Blazor Stock Chart Component -Stock Chart supports 6 major types of series namely `Line`, `Spline`, `Hilo`, `HiloOpenClose`, `Hollow Candle` and `Candle`. By using the series dropdown button you can navigate between the above listed series types. +The Stock Chart supports six series types: `Line`, `Spline`, `Hilo`, `HiloOpenClose`, `Hollow Candle`, and `Candle`. Use the series selector to switch between these types during interaction. **Line** -To render a line series, use series [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartSeries.html#Syncfusion_Blazor_Charts_StockChartSeries_Type) as `Line`. +To render a line series, set the series [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartSeries.html#Syncfusion_Blazor_Charts_StockChartSeries_Type) to `Line`. ```cshtml @@ -29,7 +29,6 @@ To render a line series, use series [Type](https://help.syncfusion.com/cr/blazor @code { - public class ChartData { public DateTime Date { get; set; } @@ -38,15 +37,15 @@ To render a line series, use series [Type](https://help.syncfusion.com/cr/blazor public List StockDetails = new List { - new ChartData { Date = new DateTime(2012, 04, 02), Y= 100}, - new ChartData { Date = new DateTime(2012, 04, 09), Y= 10}, - new ChartData { Date = new DateTime(2012, 04, 16), Y= 500}, - new ChartData { Date = new DateTime(2012, 04, 23), Y= 80}, - new ChartData { Date = new DateTime(2012, 04, 30), Y= 200}, - new ChartData { Date = new DateTime(2012, 05, 07), Y= 600}, - new ChartData { Date = new DateTime(2012, 05, 14), Y= 50}, - new ChartData { Date = new DateTime(2012, 05, 21), Y= 700}, - new ChartData { Date = new DateTime(2012, 05, 28), Y= 90} + new ChartData { Date = new DateTime(2012, 04, 02), Y = 100 }, + new ChartData { Date = new DateTime(2012, 04, 09), Y = 10 }, + new ChartData { Date = new DateTime(2012, 04, 16), Y = 500 }, + new ChartData { Date = new DateTime(2012, 04, 23), Y = 80 }, + new ChartData { Date = new DateTime(2012, 04, 30), Y = 200 }, + new ChartData { Date = new DateTime(2012, 05, 07), Y = 600 }, + new ChartData { Date = new DateTime(2012, 05, 14), Y = 50 }, + new ChartData { Date = new DateTime(2012, 05, 21), Y = 700}, + new ChartData { Date = new DateTime(2012, 05, 28), Y = 90 } }; } @@ -56,7 +55,7 @@ To render a line series, use series [Type](https://help.syncfusion.com/cr/blazor **Spline** -To render a spline series, use series [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartSeries.html#Syncfusion_Blazor_Charts_StockChartSeries_Type) as `Spline`. +To render a spline series, set the series [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartSeries.html#Syncfusion_Blazor_Charts_StockChartSeries_Type) to `Spline`. ```cshtml @@ -70,7 +69,6 @@ To render a spline series, use series [Type](https://help.syncfusion.com/cr/blaz @code { - public class ChartData { public DateTime Date { get; set; } @@ -79,15 +77,15 @@ To render a spline series, use series [Type](https://help.syncfusion.com/cr/blaz public List StockDetails = new List { - new ChartData { Date = new DateTime(2012, 04, 02), Y= 100}, - new ChartData { Date = new DateTime(2012, 04, 09), Y= 10}, - new ChartData { Date = new DateTime(2012, 04, 16), Y= 500}, - new ChartData { Date = new DateTime(2012, 04, 23), Y= 80}, - new ChartData { Date = new DateTime(2012, 04, 30), Y= 200}, - new ChartData { Date = new DateTime(2012, 05, 07), Y= 600}, - new ChartData { Date = new DateTime(2012, 05, 14), Y= 50}, - new ChartData { Date = new DateTime(2012, 05, 21), Y= 700}, - new ChartData { Date = new DateTime(2012, 05, 28), Y= 90} + new ChartData { Date = new DateTime(2012, 04, 02), Y = 100 }, + new ChartData { Date = new DateTime(2012, 04, 09), Y = 10 }, + new ChartData { Date = new DateTime(2012, 04, 16), Y = 500 }, + new ChartData { Date = new DateTime(2012, 04, 23), Y = 80 }, + new ChartData { Date = new DateTime(2012, 04, 30), Y = 200 }, + new ChartData { Date = new DateTime(2012, 05, 07), Y = 600 }, + new ChartData { Date = new DateTime(2012, 05, 14), Y = 50 }, + new ChartData { Date = new DateTime(2012, 05, 21), Y = 700}, + new ChartData { Date = new DateTime(2012, 05, 28), Y = 90 } }; } @@ -97,11 +95,11 @@ To render a spline series, use series [Type](https://help.syncfusion.com/cr/blaz **HollowCandle** -To render a hollow candle series, use series [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartSeries.html#Syncfusion_Blazor_Charts_StockChartSeries_Type) as `Candle` and set `EnableSolidCandle` as false. +To render a hollow candle series, set the series [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartSeries.html#Syncfusion_Blazor_Charts_StockChartSeries_Type) to `Candle` and set `EnableSolidCandle` to `false`. **Hilo** -To render a hilo series, use series [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartSeries.html#Syncfusion_Blazor_Charts_StockChartSeries_Type) as `Hilo`. +To render a hilo series, set the series [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartSeries.html#Syncfusion_Blazor_Charts_StockChartSeries_Type) to `Hilo`. ```cshtml @@ -115,7 +113,6 @@ To render a hilo series, use series [Type](https://help.syncfusion.com/cr/blazor @code { - public class StockChartData { public DateTime Date { get; set; } @@ -128,16 +125,16 @@ To render a hilo series, use series [Type](https://help.syncfusion.com/cr/blazor public List StockDetails = new List { - new StockChartData { Date = new DateTime(2012, 04, 02), Open = 85.9757, High = 90.6657, Low = 85.7685, Close = 90.5257, Volume = 660187068}, - new StockChartData { Date = new DateTime(2012, 04, 09), Open = 89.4471, High = 92, Low = 86.2157, Close = 86.4614, Volume = 912634864}, - new StockChartData { Date = new DateTime(2012, 04, 16), Open = 87.1514, High = 88.6071, Low = 81.4885, Close = 81.8543, Volume = 1221746066}, - new StockChartData { Date = new DateTime(2012, 04, 23), Open = 81.5157, High = 88.2857, Low = 79.2857, Close = 86.1428, Volume = 965935749}, - new StockChartData { Date = new DateTime(2012, 04, 30), Open = 85.4, High = 85.4857, Low = 80.7385, Close = 80.75, Volume = 615249365}, - new StockChartData { Date = new DateTime(2012, 05, 07), Open = 80.2143, High = 82.2685, Low = 79.8185, Close = 80.9585, Volume = 541742692}, - new StockChartData { Date = new DateTime(2012, 05, 14), Open = 80.3671, High = 81.0728, Low = 74.5971, Close = 75.7685, Volume = 708126233}, - new StockChartData { Date = new DateTime(2012, 05, 21), Open = 76.3571, High = 82.3571, Low = 76.2928, Close = 80.3271, Volume = 682076215}, - new StockChartData { Date = new DateTime(2012, 05, 28), Open = 81.5571, High = 83.0714, Low = 80.0743, Close = 80.1414, Volume = 480059584}, - }; + new StockChartData { Date = new DateTime(2012, 04, 02), Open = 85.9757, High = 90.6657, Low = 85.7685, Close = 90.5257, Volume = 660187068 }, + new StockChartData { Date = new DateTime(2012, 04, 09), Open = 89.4471, High = 92, Low = 86.2157, Close = 86.4614, Volume = 912634864 }, + new StockChartData { Date = new DateTime(2012, 04, 16), Open = 87.1514, High = 88.6071, Low = 81.4885, Close = 81.8543, Volume = 1221746066 }, + new StockChartData { Date = new DateTime(2012, 04, 23), Open = 81.5157, High = 88.2857, Low = 79.2857, Close = 86.1428, Volume = 965935749 }, + new StockChartData { Date = new DateTime(2012, 04, 30), Open = 85.4, High = 85.4857, Low = 80.7385, Close = 80.75, Volume = 615249365 }, + new StockChartData { Date = new DateTime(2012, 05, 07), Open = 80.2143, High = 82.2685, Low = 79.8185, Close = 80.9585, Volume = 541742692 }, + new StockChartData { Date = new DateTime(2012, 05, 14), Open = 80.3671, High = 81.0728, Low = 74.5971, Close = 75.7685, Volume = 708126233 }, + new StockChartData { Date = new DateTime(2012, 05, 21), Open = 76.3571, High = 82.3571, Low = 76.2928, Close = 80.3271, Volume = 682076215 }, + new StockChartData { Date = new DateTime(2012, 05, 28), Open = 81.5571, High = 83.0714, Low = 80.0743, Close = 80.1414, Volume = 480059584 } + }; } ``` @@ -146,7 +143,7 @@ To render a hilo series, use series [Type](https://help.syncfusion.com/cr/blazor **HiloOpenClose** -To render a HiLoOpenClose series, use series [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartSeries.html#Syncfusion_Blazor_Charts_StockChartSeries_Type) as `HiloOpenClose`. +To render a HiloOpenClose series, set the series [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartSeries.html#Syncfusion_Blazor_Charts_StockChartSeries_Type) to `HiloOpenClose`. ```cshtml @@ -160,7 +157,6 @@ To render a HiLoOpenClose series, use series [Type](https://help.syncfusion.com/ @code { - public class StockChartData { public DateTime Date { get; set; } @@ -173,15 +169,15 @@ To render a HiLoOpenClose series, use series [Type](https://help.syncfusion.com/ public List StockDetails = new List { - new StockChartData { Date = new DateTime(2012, 04, 02), Open = 85.9757, High = 90.6657, Low = 85.7685, Close = 90.5257, Volume = 660187068}, - new StockChartData { Date = new DateTime(2012, 04, 09), Open = 89.4471, High = 92, Low = 86.2157, Close = 86.4614, Volume = 912634864}, - new StockChartData { Date = new DateTime(2012, 04, 16), Open = 87.1514, High = 88.6071, Low = 81.4885, Close = 81.8543, Volume = 1221746066}, - new StockChartData { Date = new DateTime(2012, 04, 23), Open = 81.5157, High = 88.2857, Low = 79.2857, Close = 86.1428, Volume = 965935749}, - new StockChartData { Date = new DateTime(2012, 04, 30), Open = 85.4, High = 85.4857, Low = 80.7385, Close = 80.75, Volume = 615249365}, - new StockChartData { Date = new DateTime(2012, 05, 07), Open = 80.2143, High = 82.2685, Low = 79.8185, Close = 80.9585, Volume = 541742692}, - new StockChartData { Date = new DateTime(2012, 05, 14), Open = 80.3671, High = 81.0728, Low = 74.5971, Close = 75.7685, Volume = 708126233}, - new StockChartData { Date = new DateTime(2012, 05, 21), Open = 76.3571, High = 82.3571, Low = 76.2928, Close = 80.3271, Volume = 682076215}, - new StockChartData { Date = new DateTime(2012, 05, 28), Open = 81.5571, High = 83.0714, Low = 80.0743, Close = 80.1414, Volume = 480059584}, + new StockChartData { Date = new DateTime(2012, 04, 02), Open = 85.9757, High = 90.6657, Low = 85.7685, Close = 90.5257, Volume = 660187068 }, + new StockChartData { Date = new DateTime(2012, 04, 09), Open = 89.4471, High = 92, Low = 86.2157, Close = 86.4614, Volume = 912634864 }, + new StockChartData { Date = new DateTime(2012, 04, 16), Open = 87.1514, High = 88.6071, Low = 81.4885, Close = 81.8543, Volume = 1221746066 }, + new StockChartData { Date = new DateTime(2012, 04, 23), Open = 81.5157, High = 88.2857, Low = 79.2857, Close = 86.1428, Volume = 965935749 }, + new StockChartData { Date = new DateTime(2012, 04, 30), Open = 85.4, High = 85.4857, Low = 80.7385, Close = 80.75, Volume = 615249365 }, + new StockChartData { Date = new DateTime(2012, 05, 07), Open = 80.2143, High = 82.2685, Low = 79.8185, Close = 80.9585, Volume = 541742692 }, + new StockChartData { Date = new DateTime(2012, 05, 14), Open = 80.3671, High = 81.0728, Low = 74.5971, Close = 75.7685, Volume = 708126233 }, + new StockChartData { Date = new DateTime(2012, 05, 21), Open = 76.3571, High = 82.3571, Low = 76.2928, Close = 80.3271, Volume = 682076215 }, + new StockChartData { Date = new DateTime(2012, 05, 28), Open = 81.5571, High = 83.0714, Low = 80.0743, Close = 80.1414, Volume = 480059584 } }; } @@ -191,7 +187,7 @@ To render a HiLoOpenClose series, use series [Type](https://help.syncfusion.com/ **Candle** -To render a candle series, use series [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartSeries.html#Syncfusion_Blazor_Charts_StockChartSeries_Type) as `Candle`. +To render a candle series, set the series [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartSeries.html#Syncfusion_Blazor_Charts_StockChartSeries_Type) to `Candle`. ```cshtml @@ -204,8 +200,7 @@ To render a candle series, use series [Type](https://help.syncfusion.com/cr/blaz @code { - - public class StockChartData + public class StockChartData { public DateTime Date { get; set; } public Double Y { get; set; } @@ -218,18 +213,18 @@ To render a candle series, use series [Type](https://help.syncfusion.com/cr/blaz public List StockDetails = new List { - new StockChartData { Date = new DateTime(2012, 04, 02), Open = 85.9757, High = 90.6657, Low = 85.7685, Close = 90.5257, Volume = 660187068}, - new StockChartData { Date = new DateTime(2012, 04, 09), Open = 89.4471, High = 92, Low = 86.2157, Close = 86.4614, Volume = 912634864}, - new StockChartData { Date = new DateTime(2012, 04, 16), Open = 87.1514, High = 88.6071, Low = 81.4885, Close = 81.8543, Volume = 1221746066}, - new StockChartData { Date = new DateTime(2012, 04, 23), Open = 81.5157, High = 88.2857, Low = 79.2857, Close = 86.1428, Volume = 965935749}, - new StockChartData { Date = new DateTime(2012, 04, 30), Open = 85.4, High = 85.4857, Low = 80.7385, Close = 80.75, Volume = 615249365}, - new StockChartData { Date = new DateTime(2012, 05, 07), Open = 80.2143, High = 82.2685, Low = 79.8185, Close = 80.9585, Volume = 541742692}, - new StockChartData { Date = new DateTime(2012, 05, 14), Open = 80.3671, High = 81.0728, Low = 74.5971, Close = 75.7685, Volume = 708126233}, - new StockChartData { Date = new DateTime(2012, 05, 21), Open = 76.3571, High = 82.3571, Low = 76.2928, Close = 80.3271, Volume = 682076215}, - new StockChartData { Date = new DateTime(2012, 05, 28), Open = 81.5571, High = 83.0714, Low = 80.0743, Close = 80.1414, Volume = 480059584}, + new StockChartData { Date = new DateTime(2012, 04, 02), Open = 85.9757, High = 90.6657, Low = 85.7685, Close = 90.5257, Volume = 660187068 }, + new StockChartData { Date = new DateTime(2012, 04, 09), Open = 89.4471, High = 92, Low = 86.2157, Close = 86.4614, Volume = 912634864 }, + new StockChartData { Date = new DateTime(2012, 04, 16), Open = 87.1514, High = 88.6071, Low = 81.4885, Close = 81.8543, Volume = 1221746066 }, + new StockChartData { Date = new DateTime(2012, 04, 23), Open = 81.5157, High = 88.2857, Low = 79.2857, Close = 86.1428, Volume = 965935749 }, + new StockChartData { Date = new DateTime(2012, 04, 30), Open = 85.4, High = 85.4857, Low = 80.7385, Close = 80.75, Volume = 615249365 }, + new StockChartData { Date = new DateTime(2012, 05, 07), Open = 80.2143, High = 82.2685, Low = 79.8185, Close = 80.9585, Volume = 541742692 }, + new StockChartData { Date = new DateTime(2012, 05, 14), Open = 80.3671, High = 81.0728, Low = 74.5971, Close = 75.7685, Volume = 708126233 }, + new StockChartData { Date = new DateTime(2012, 05, 21), Open = 76.3571, High = 82.3571, Low = 76.2928, Close = 80.3271, Volume = 682076215 }, + new StockChartData { Date = new DateTime(2012, 05, 28), Open = 81.5571, High = 83.0714, Low = 80.0743, Close = 80.1414, Volume = 480059584 } }; } ``` -![Blazor Candle Stock Chart](images/common/blazor-candle-stock-chart.png) \ No newline at end of file +![Blazor Candle Stock Chart](images/common/blazor-candle-stock-chart.png) diff --git a/blazor/stock-chart/stock-events.md b/blazor/stock-chart/stock-events.md index 89356139e8..e245e578f5 100644 --- a/blazor/stock-chart/stock-events.md +++ b/blazor/stock-chart/stock-events.md @@ -1,7 +1,7 @@ --- layout: post title: Stock Events in Blazor Stock Chart Component | Syncfusion -description: Checkout and learn here all about stock events in Syncfusion Blazor Stock Chart component and much more. +description: Check out and learn how to configure and customize stock events in the Syncfusion Blazor Stock Chart component. platform: Blazor control: Stock Chart documentation: ug @@ -9,27 +9,27 @@ documentation: ug # Stock Events in Blazor Stock Chart Component -The stock events are used to mark specific events such as market open and close, highest or lowest price reached, year/quarter start and end on a Chart for a specific date. In this section, **SplineSeries** is used to represent selected data value. One can customize the specific data value using `StockEvents`. +Stock events mark notable occurrences such as market open and close, highest or lowest price, and quarter or year boundaries on specific dates. In this section, **SplineSeries** is used to represent selected data values. Specific data values can be customized using `StockEvents`. ## Date -The [Date](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartStockEvent.html#Syncfusion_Blazor_Charts_StockChartStockEvent_Date) property is used to display the stock event in the Chart at the specified time. For example, Quarter 1 ends on March 31, 2021, and the stock event date must be set to March 31, 2021. More customization options are available in the immediate sections such as **Text**, **Type**, **Description**, and so on. +The [Date](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartStockEvent.html#Syncfusion_Blazor_Charts_StockChartStockEvent_Date) property displays the stock event on the chart at the specified time. For example, when Quarter 1 ends on March 31, 2021, set the stock event date to March 31, 2021. Additional customization options are available in the following sections, including **Text**, **Type**, and **Description**. ## Text -The text acts as a quick and short representation of the stock event, such as **Q1** for Quarter 1 and **High** for highest price over a period; it can be customized separately for each stock event using the [Text](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartStockEvent.html#Syncfusion_Blazor_Charts_StockChartStockEvent_Text) property. +Text provides a concise label for a stock event, such as **Q1** for Quarter 1 or **High** for the highest price over a period. Configure this per event using the [Text](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartStockEvent.html#Syncfusion_Blazor_Charts_StockChartStockEvent_Text) property. ## Type -The [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.FlagType.html) property can be used to set the background shape of a stock event, with options such as **Circle**, **Square**, **Flag**, **Text**, **Sign**, **Triangle**, **InvertedTriangle**, **ArrowUp**, **ArrowDown**, **ArrowLeft**, and **ArrowRight**. +The [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.FlagType.html) property sets the background shape of a stock event. Available options include **Circle**, **Square**, **Flag**, **Text**, **Sign**, **Triangle**, **InvertedTriangle**, **ArrowUp**, **ArrowDown**, **ArrowLeft**, and **ArrowRight**. ## Background -The [Background](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartStockEvent.html#Syncfusion_Blazor_Charts_StockChartStockEvent_Background) property of the stock event is used to customize the color of the background shape, which accepts values in hex and rgba as a valid CSS color string. +The [Background](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartStockEvent.html#Syncfusion_Blazor_Charts_StockChartStockEvent_Background) property customizes the color of the background shape. It accepts valid CSS color strings such as hex or rgba values. ## Description -The [Description](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartStockEvent.html#Syncfusion_Blazor_Charts_StockChartStockEvent_Description) property specifies the content of the stock event tooltip that appears on the Chart when the mouse is moved over the stock event. The description will be displayed as the text of the tooltip. For instance, if [Text](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartStockEvent.html#Syncfusion_Blazor_Charts_StockChartStockEvent_Text) **Q1** contains a [Description](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartStockEvent.html#Syncfusion_Blazor_Charts_StockChartStockEvent_Description) as **Quarter 1**, the tooltip will show **Quarter 1**. +The [Description](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartStockEvent.html#Syncfusion_Blazor_Charts_StockChartStockEvent_Description) property specifies the tooltip content that appears when hovering over a stock event. For example, when [Text](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartStockEvent.html#Syncfusion_Blazor_Charts_StockChartStockEvent_Text) is **Q1** and the [Description](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartStockEvent.html#Syncfusion_Blazor_Charts_StockChartStockEvent_Description) is **Quarter 1**, the tooltip displays **Quarter 1**. ```cshtml @@ -40,6 +40,7 @@ The [Description](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts @using System.Runtime.Serialization @inject NavigationManager NavigationManager @inject HttpClient Http + @if (DataSource != null) { @@ -70,9 +71,7 @@ The [Description](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts } - -@code{ - +@code { public class ChartData { public DateTime date { get; set; } @@ -112,26 +111,25 @@ The [Description](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts { StockEvents = new List() { - new StockEventDetails(){ Date = new DateTime(2011, 03, 01), Text ="Q2", Description = "2012 Quarter2", Type = FlagType.Flag, Background = "#6C6D6D", BorderColor = "#6C6D6D"}, - new StockEventDetails(){ Date = new DateTime(2012, 03, 20), Text ="Open", Description = "Markets opened", Background = "#f48a21", Type = FlagType.Circle, BorderColor = "#f48a21"}, - new StockEventDetails(){ Date = new DateTime(2012, 06, 01), Text ="Q3", Description = "2013 Quarter3", Background = "#6C6D6D", Type = FlagType.Flag, BorderColor = "#6C6D6D"}, - new StockEventDetails(){ Date = new DateTime(2012, 09, 01), Text ="Q4", Description = "2013 Quarter4", Background = "#6C6D6D", Type = FlagType.Flag, BorderColor = "#6C6D6D"}, - new StockEventDetails(){ Date = new DateTime(2013, 07, 30), Text ="G", Description = "Google Stock", Background = "#f48a21", Type = FlagType.Circle, BorderColor = "#f48a21"}, - new StockEventDetails(){ Date = new DateTime(2013, 10, 01), Text ="Y", Description = "Yahoo Stock", Background = "#841391", Type = FlagType.Square, BorderColor = "#841391"}, - new StockEventDetails(){ Date = new DateTime(2013, 12, 04), Text ="Y2", Description = "Year 2013", Background = "#6322e0", Type = FlagType.Pin, BorderColor = "#6322e0", ShowOnSeries = false}, - new StockEventDetails(){ Date = new DateTime(2016, 03, 01), Text ="Q2", Description = "2014 Quarter2", Background = "#6C6D6D", Type = FlagType.Circle, BorderColor = "#6C6D6D"}, - new StockEventDetails(){ Date = new DateTime(2016, 06, 01), Text ="Q3", Description = "2014 Quarter3", Background = "#f48a21", Type = FlagType.Circle, BorderColor = "#f48a21"}, - new StockEventDetails(){ Date = new DateTime(2016, 09, 01), Text ="Q4", Description = "2014 Quarter4", Background = "#f48a21", Type = FlagType.Flag, BorderColor = "#f48a21"}, - new StockEventDetails(){ Date = new DateTime(2016, 12, 01), Text ="Y4", Description = "Year 2015", Background = "#6322e0", Type = FlagType.Pin, BorderColor = "#6322e0", ShowOnSeries= false}, - new StockEventDetails(){ Date = new DateTime(2016, 02, 02), Text ="End", Description = "Markets closed", Background = "#3ab0f9", Type = FlagType.ArrowDown, BorderColor = "#3ab0f9"}, - new StockEventDetails(){ Date = new DateTime(2017, 01, 07), Text ="A", Description = "Amazon Stock", Background = "#f48a21", Type = FlagType.Circle, BorderColor = "#f48a21"}, - new StockEventDetails(){ Date = new DateTime(2017, 01, 02), Text ="Q1", Description = "AAPL Stock", Background = "#dd3c9f", Type = FlagType.Text, BorderColor = "#dd3c9f"}, - new StockEventDetails(){ Date = new DateTime(2017, 02, 12), Text ="Close", Description = "Markets closed", Background = "#f48a21", Type = FlagType.Circle, BorderColor = "#f48a21"} + new StockEventDetails() { Date = new DateTime(2011, 03, 01), Text ="Q2", Description = "2012 Quarter2", Type = FlagType.Flag, Background = "#6C6D6D", BorderColor = "#6C6D6D" }, + new StockEventDetails() { Date = new DateTime(2012, 03, 20), Text ="Open", Description = "Markets opened", Background = "#f48a21", Type = FlagType.Circle, BorderColor = "#f48a21" }, + new StockEventDetails() { Date = new DateTime(2012, 06, 01), Text ="Q3", Description = "2013 Quarter3", Background = "#6C6D6D", Type = FlagType.Flag, BorderColor = "#6C6D6D" }, + new StockEventDetails() { Date = new DateTime(2012, 09, 01), Text ="Q4", Description = "2013 Quarter4", Background = "#6C6D6D", Type = FlagType.Flag, BorderColor = "#6C6D6D" }, + new StockEventDetails() { Date = new DateTime(2013, 07, 30), Text ="G", Description = "Google Stock", Background = "#f48a21", Type = FlagType.Circle, BorderColor = "#f48a21" }, + new StockEventDetails() { Date = new DateTime(2013, 10, 01), Text ="Y", Description = "Yahoo Stock", Background = "#841391", Type = FlagType.Square, BorderColor = "#841391" }, + new StockEventDetails() { Date = new DateTime(2013, 12, 04), Text ="Y2", Description = "Year 2013", Background = "#6322e0", Type = FlagType.Pin, BorderColor = "#6322e0", ShowOnSeries = false }, + new StockEventDetails() { Date = new DateTime(2016, 03, 01), Text ="Q2", Description = "2014 Quarter2", Background = "#6C6D6D", Type = FlagType.Circle, BorderColor = "#6C6D6D" }, + new StockEventDetails() { Date = new DateTime(2016, 06, 01), Text ="Q3", Description = "2014 Quarter3", Background = "#f48a21", Type = FlagType.Circle, BorderColor = "#f48a21" }, + new StockEventDetails() { Date = new DateTime(2016, 09, 01), Text ="Q4", Description = "2014 Quarter4", Background = "#f48a21", Type = FlagType.Flag, BorderColor = "#f48a21" }, + new StockEventDetails() { Date = new DateTime(2016, 12, 01), Text ="Y4", Description = "Year 2015", Background = "#6322e0", Type = FlagType.Pin, BorderColor = "#6322e0", ShowOnSeries= false }, + new StockEventDetails() { Date = new DateTime(2016, 02, 02), Text ="End", Description = "Markets closed", Background = "#3ab0f9", Type = FlagType.ArrowDown, BorderColor = "#3ab0f9" }, + new StockEventDetails() { Date = new DateTime(2017, 01, 07), Text ="A", Description = "Amazon Stock", Background = "#f48a21", Type = FlagType.Circle, BorderColor = "#f48a21" }, + new StockEventDetails() { Date = new DateTime(2017, 01, 02), Text ="Q1", Description = "AAPL Stock", Background = "#dd3c9f", Type = FlagType.Text, BorderColor = "#dd3c9f" }, + new StockEventDetails() { Date = new DateTime(2017, 02, 12), Text ="Close", Description = "Markets closed", Background = "#f48a21", Type = FlagType.Circle, BorderColor = "#f48a21" } }; } - } ``` -![Events in Blazor Stock Chart](images/blazor-stock-chart-events.png) \ No newline at end of file +![Events in Blazor Stock Chart](images/blazor-stock-chart-events.png) diff --git a/blazor/stock-chart/technical-indicators.md b/blazor/stock-chart/technical-indicators.md index b28c509225..c604f8126c 100644 --- a/blazor/stock-chart/technical-indicators.md +++ b/blazor/stock-chart/technical-indicators.md @@ -1,7 +1,7 @@ --- layout: post title: Technical Indicators in Blazor Stock Chart Component | Syncfusion -description: Checkout and learn here all about technical indicators in Syncfusion Blazor Stock Chart component and more. +description: Check out and learn about technical indicators available in the Syncfusion Blazor Stock Chart component. platform: Blazor control: Stock Chart documentation: ug @@ -11,49 +11,48 @@ documentation: ug # Technical Indicators in Blazor Stock Chart Component -A technical indicator is a mathematical calculation based on historic price, volume or open interest information that aims to forecast financial market direction. +A technical indicator is a mathematical calculation based on historical price, volume, or open interest information that aims to forecast financial market direction. -Stock Chart supports 10 types of technical indicators namely `Accumulation Distribution`, `ATR`, `EMA`, `SMA`, `TMA`, `Momentum`, `MACD`, `RSI`, `Stochastic`, `Bollinger Band`. By using indicator dropdown box, add and remove the required indicators types. +Stock Chart supports 10 types of technical indicators: `Accumulation Distribution`, `ATR`, `EMA`, `SMA`, `TMA`, `Momentum`, `MACD`, `RSI`, `Stochastic`, and `Bollinger Band`. Use the indicator dropdown to add or remove the required indicator types. ## Accumulation Distribution -Accumulation Distribution combines price and volume to show how money may be flowing into or out of stock. To render a Accumulation Distribution Indicator, use indicator [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartIndicator.html#Syncfusion_Blazor_Charts_StockChartIndicator_Type) as `AccumulationDistribution`. To calculate the signal line [Volume](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartIndicator.html#Syncfusion_Blazor_Charts_StockChartIndicator_Volume) field is additionally added with `DataSource`. +Accumulation Distribution combines price and volume to show potential money flow into or out of a stock. To render an Accumulation Distribution indicator, set the indicator [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartIndicator.html#Syncfusion_Blazor_Charts_StockChartIndicator_Type) to `AccumulationDistribution`. To calculate the signal line, the [Volume](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartIndicator.html#Syncfusion_Blazor_Charts_StockChartIndicator_Volume) field must be included in the `DataSource`. ## Average True Range (ATR) -ATR measures the stock volatility by comparing the current value with the previous value. To render a Average True Range (ATR) Indicator, use indicator [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartIndicator.html#Syncfusion_Blazor_Charts_StockChartIndicator_Type) as `Atr` . +ATR measures stock volatility by comparing the current value with the previous value. To render an Average True Range (ATR) indicator, set the indicator [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartIndicator.html#Syncfusion_Blazor_Charts_StockChartIndicator_Type) to `Atr`. ## Exponential Moving Average (EMA) -Moving average indicators are used to define the direction of the trend. To render a EMA indicator, use indicator [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartIndicator.html#Syncfusion_Blazor_Charts_StockChartIndicator_Type) as `Ema` . +Moving average indicators are used to define the direction of the trend. To render an EMA indicator, set the indicator [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartIndicator.html#Syncfusion_Blazor_Charts_StockChartIndicator_Type) to `Ema`. ## Momentum -Momentum shows the speed at which the price of the stock is changing. To render a Momentum indicator, use indicator [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.Charts.ChartIndicator~Type.html) as `Momentum`. Momentum indicator will be represented by two lines (upperLine, signalLine). In momentum indicator the upperBand value is always rendered at the value 100. +Momentum shows the speed at which the stock price is changing. To render a Momentum indicator, set the indicator [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartIndicator.html#Syncfusion_Blazor_Charts_StockChartIndicator_Type) to `Momentum`. The Momentum indicator is represented by two lines (`upperLine`, `signalLine`). In the Momentum indicator, the `upperBand` value is always rendered at 100. ## Moving Average Convergence Divergence (MACD) -MACD is based on the difference between two EMA's. To render a MACD Indicator, use indicator [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartIndicator.html#Syncfusion_Blazor_Charts_StockChartIndicator_Type) as `Macd`. MACD indicator will be represented by MACD line,signal line, MACD histogram. MACD histogram is used to differentiate MACD line and signal line. +MACD is based on the difference between two EMAs. To render a MACD indicator, set the indicator [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartIndicator.html#Syncfusion_Blazor_Charts_StockChartIndicator_Type) to `Macd`. The MACD indicator is represented by the MACD line, signal line, and MACD histogram. The histogram highlights the difference between the MACD line and the signal line. ## Relative Strength Index (RSI) -RSI shows how strongly a stock is moving in its current direction. To render a RSI Indicator, use indicator [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartIndicator.html#Syncfusion_Blazor_Charts_StockChartIndicator_Type) as `Rsi`.RSI indicator will be represented by three lines (upperBand, lowerBand, signalLine). The upperBand and lowerBand values are customized by [OverBought](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartIndicator.html#Syncfusion_Blazor_Charts_StockChartIndicator_OverBought) and [OverSold](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartIndicator.html#Syncfusion_Blazor_Charts_StockChartIndicator_OverSold) properties of indicator and the signalLine is calculated by RSI formula. +RSI shows how strongly a stock is moving in its current direction. To render an RSI indicator, set the indicator [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartIndicator.html#Syncfusion_Blazor_Charts_StockChartIndicator_Type) to `Rsi`. The RSI indicator is represented by three lines (`upperBand`, `lowerBand`, `signalLine`). The `upperBand` and `lowerBand` values are customized by the [OverBought](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartIndicator.html#Syncfusion_Blazor_Charts_StockChartIndicator_OverBought) and [OverSold](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartIndicator.html#Syncfusion_Blazor_Charts_StockChartIndicator_OverSold) properties, and the `signalLine` is calculated using the RSI formula. ## Simple Moving Average (SMA) -Moving average Indicators are used to define the direction of the trend. To render a SMA Indicator, use indicator [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartIndicator.html#Syncfusion_Blazor_Charts_StockChartIndicator_Type) as `Sma` . +Moving average indicators are used to define the direction of the trend. To render an SMA indicator, set the indicator [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartIndicator.html#Syncfusion_Blazor_Charts_StockChartIndicator_Type) to `Sma`. ## Stochastic -It shows how a stock is, when compared to previous state. To render a Stochastic indicator, use indicator [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartIndicator.html#Syncfusion_Blazor_Charts_StockChartIndicator_Type) as `Stochastic`. Stochastic indicator will be represented by four lines (upperLine, lowerLine, periodLine, signalLine). In stochastic indicator the upperBand value and lowerBand value is customized by [OverBought](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartIndicator.html#Syncfusion_Blazor_Charts_StockChartIndicator_OverBought) and [OverSold](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartIndicator.html#Syncfusion_Blazor_Charts_StockChartIndicator_OverSold) properties of indicators and the periodLine and signalLine is render based on stochastic formula. +Stochastic indicates how a stock compares to its previous state. To render a Stochastic indicator, set the indicator [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartIndicator.html#Syncfusion_Blazor_Charts_StockChartIndicator_Type) to `Stochastic`. The Stochastic indicator is represented by four lines (`upperLine`, `lowerLine`, `periodLine`, `signalLine`). The `upperBand` and `lowerBand` values are customized by the [OverBought](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartIndicator.html#Syncfusion_Blazor_Charts_StockChartIndicator_OverBought) and [OverSold](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartIndicator.html#Syncfusion_Blazor_Charts_StockChartIndicator_OverSold) properties, and the `periodLine` and `signalLine` are rendered based on the stochastic formula. ## Triangular Moving Average (TMA) -Moving average Indicators are used to define the direction of the trend. To render a TMA Indicator, use indicator [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartIndicator.html#Syncfusion_Blazor_Charts_StockChartIndicator_Type) as -`Tma` . +Moving average indicators are used to define the direction of the trend. To render a TMA indicator, set the indicator [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartIndicator.html#Syncfusion_Blazor_Charts_StockChartIndicator_Type) to `Tma`. ## Bollinger Band -A Stock Chart overlay that shows the upper and lower limits of normal price movements based on the standard deviation of prices. To render a Bollinger Band, use indicator [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartIndicator.html#Syncfusion_Blazor_Charts_StockChartIndicator_Type) as `BollingerBand`.Bollinger band will be represented by three lines (upperLine, lowerLine, signalLine) and [StandardDeviations](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartIndicator.html#Syncfusion_Blazor_Charts_StockChartIndicator_StandardDeviation) is 2. +A Stock Chart overlay that shows the upper and lower limits of normal price movements based on the standard deviation of prices. To render a Bollinger Band, set the indicator [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartIndicator.html#Syncfusion_Blazor_Charts_StockChartIndicator_Type) to `BollingerBand`. The Bollinger Band is represented by three lines (`upperLine`, `lowerLine`, `signalLine`), and the default [StandardDeviations](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartIndicator.html#Syncfusion_Blazor_Charts_StockChartIndicator_StandardDeviation) value is 2. diff --git a/blazor/stock-chart/tool-tip.md b/blazor/stock-chart/tool-tip.md index e1f8b7f1fc..dedecc8d67 100644 --- a/blazor/stock-chart/tool-tip.md +++ b/blazor/stock-chart/tool-tip.md @@ -1,7 +1,7 @@ --- layout: post title: Tooltip in Blazor Stock Chart Component | Syncfusion -description: Checkout and learn here all about tooltip in Syncfusion Blazor Stock Chart component and much more details. +description: Check out and learn how to configure and customize tooltip in the Syncfusion Blazor Stock Chart component. platform: Blazor control: Stock Chart documentation: ug @@ -11,11 +11,11 @@ documentation: ug -Stock Chart will display details about the points through tooltip, when the mouse is moved over the point. +The Stock Chart displays data point details using a tooltip when the pointer hovers over a point. ## Default tooltip -By default, tooltip is not visible. Enable the tooltip by setting [Enable](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartTooltipSettings.html#Syncfusion_Blazor_Charts_StockChartTooltipSettings_Enable) property to true . +By default, the tooltip is disabled. Enable it by setting the [Enable](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartTooltipSettings.html#Syncfusion_Blazor_Charts_StockChartTooltipSettings_Enable) property to true. ```cshtml @@ -31,7 +31,6 @@ By default, tooltip is not visible. Enable the tooltip by setting [Enable](https @code { - public class ChartData { public DateTime Date { get; set; } @@ -44,19 +43,18 @@ By default, tooltip is not visible. Enable the tooltip by setting [Enable](https public List StockDetails = new List { - new ChartData { Date = new DateTime(2012, 04, 02), Open= 85.9757, High = 90.6657,Low = 85.7685, Close = 90.5257,Volume = 660187068}, - new ChartData { Date = new DateTime(2012, 04, 09), Open= 89.4471, High = 92,Low = 86.2157, Close = 86.4614,Volume = 912634864}, - new ChartData { Date = new DateTime(2012, 04, 16), Open= 87.1514, High = 88.6071,Low = 81.4885, Close = 81.8543,Volume = 1221746066}, - new ChartData { Date = new DateTime(2012, 04, 23), Open= 81.5157, High = 88.2857,Low = 79.2857, Close = 86.1428,Volume = 965935749}, - new ChartData { Date = new DateTime(2012, 04, 30), Open= 85.4, High = 85.4857,Low = 80.7385, Close = 80.75,Volume = 615249365}, - new ChartData { Date = new DateTime(2012, 05, 07), Open= 80.2143, High = 82.2685,Low = 79.8185, Close = 80.9585,Volume = 541742692}, - new ChartData { Date = new DateTime(2012, 05, 14), Open= 80.3671, High = 81.0728,Low = 74.5971, Close = 75.7685,Volume = 708126233}, - new ChartData { Date = new DateTime(2012, 05, 21), Open= 76.3571, High = 82.3571,Low = 76.2928, Close = 80.3271,Volume = 682076215}, - new ChartData { Date = new DateTime(2012, 05, 28), Open= 81.5571, High = 83.0714,Low = 80.0743, Close = 80.1414,Volume = 480059584} + new ChartData { Date = new DateTime(2012, 04, 02), Open = 85.9757, High = 90.6657, Low = 85.7685, Close = 90.5257, Volume = 660187068 }, + new ChartData { Date = new DateTime(2012, 04, 09), Open = 89.4471, High = 92, Low = 86.2157, Close = 86.4614, Volume = 912634864 }, + new ChartData { Date = new DateTime(2012, 04, 16), Open = 87.1514, High = 88.6071, Low = 81.4885, Close = 81.8543, Volume = 1221746066 }, + new ChartData { Date = new DateTime(2012, 04, 23), Open = 81.5157, High = 88.2857, Low = 79.2857, Close = 86.1428, Volume = 965935749 }, + new ChartData { Date = new DateTime(2012, 04, 30), Open = 85.4, High = 85.4857, Low = 80.7385, Close = 80.75, Volume = 615249365 }, + new ChartData { Date = new DateTime(2012, 05, 07), Open = 80.2143, High = 82.2685, Low = 79.8185, Close = 80.9585, Volume = 541742692 }, + new ChartData { Date = new DateTime(2012, 05, 14), Open = 80.3671, High = 81.0728, Low = 74.5971, Close = 75.7685, Volume = 708126233 }, + new ChartData { Date = new DateTime(2012, 05, 21), Open = 76.3571, High = 82.3571, Low = 76.2928, Close = 80.3271, Volume = 682076215 }, + new ChartData { Date = new DateTime(2012, 05, 28), Open = 81.5571, High = 83.0714, Low = 80.0743, Close = 80.1414, Volume = 480059584 } }; } - ``` ![Blazor Stock Chart with Tooltip](images/common/blazor-stock-chart-tooltip.png) @@ -67,7 +65,7 @@ By default, tooltip is not visible. Enable the tooltip by setting [Enable](https -By default, tooltip shows information of x and y value in points. In addition to that, more information can be shown in tooltip. For example the format `${point.x} : ${point.high}` shows point x and high value. +By default, the tooltip shows the x and y values of a point. Additional information can be displayed using a format template. For example, the format `${point.x} : ${point.high}` shows the x-value and the high value. ```cshtml @@ -83,7 +81,6 @@ By default, tooltip shows information of x and y value in points. In addition to @code { - public class ChartData { public DateTime Date { get; set; } @@ -96,24 +93,23 @@ By default, tooltip shows information of x and y value in points. In addition to public List StockDetails = new List { - new ChartData { Date = new DateTime(2012, 04, 02), Open= 85.9757, High = 90.6657,Low = 85.7685, Close = 90.5257,Volume = 660187068}, - new ChartData { Date = new DateTime(2012, 04, 09), Open= 89.4471, High = 92,Low = 86.2157, Close = 86.4614,Volume = 912634864}, - new ChartData { Date = new DateTime(2012, 04, 16), Open= 87.1514, High = 88.6071,Low = 81.4885, Close = 81.8543,Volume = 1221746066}, - new ChartData { Date = new DateTime(2012, 04, 23), Open= 81.5157, High = 88.2857,Low = 79.2857, Close = 86.1428,Volume = 965935749}, - new ChartData { Date = new DateTime(2012, 04, 30), Open= 85.4, High = 85.4857,Low = 80.7385, Close = 80.75,Volume = 615249365}, - new ChartData { Date = new DateTime(2012, 05, 07), Open= 80.2143, High = 82.2685,Low = 79.8185, Close = 80.9585,Volume = 541742692}, - new ChartData { Date = new DateTime(2012, 05, 14), Open= 80.3671, High = 81.0728,Low = 74.5971, Close = 75.7685,Volume = 708126233}, - new ChartData { Date = new DateTime(2012, 05, 21), Open= 76.3571, High = 82.3571,Low = 76.2928, Close = 80.3271,Volume = 682076215}, - new ChartData { Date = new DateTime(2012, 05, 28), Open= 81.5571, High = 83.0714,Low = 80.0743, Close = 80.1414,Volume = 480059584} + new ChartData { Date = new DateTime(2012, 04, 02), Open = 85.9757, High = 90.6657, Low = 85.7685, Close = 90.5257, Volume = 660187068 }, + new ChartData { Date = new DateTime(2012, 04, 09), Open = 89.4471, High = 92, Low = 86.2157, Close = 86.4614, Volume = 912634864 }, + new ChartData { Date = new DateTime(2012, 04, 16), Open = 87.1514, High = 88.6071, Low = 81.4885, Close = 81.8543, Volume = 1221746066 }, + new ChartData { Date = new DateTime(2012, 04, 23), Open = 81.5157, High = 88.2857, Low = 79.2857, Close = 86.1428, Volume = 965935749 }, + new ChartData { Date = new DateTime(2012, 04, 30), Open = 85.4, High = 85.4857, Low = 80.7385, Close = 80.75, Volume = 615249365 }, + new ChartData { Date = new DateTime(2012, 05, 07), Open = 80.2143, High = 82.2685, Low = 79.8185, Close = 80.9585, Volume = 541742692 }, + new ChartData { Date = new DateTime(2012, 05, 14), Open = 80.3671, High = 81.0728, Low = 74.5971, Close = 75.7685, Volume = 708126233 }, + new ChartData { Date = new DateTime(2012, 05, 21), Open = 76.3571, High = 82.3571, Low = 76.2928, Close = 80.3271, Volume = 682076215 }, + new ChartData { Date = new DateTime(2012, 05, 28), Open = 81.5571, High = 83.0714, Low = 80.0743, Close = 80.1414, Volume = 480059584 } }; } - ``` ## Customize the appearance of tooltip -The [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartTooltipSettings.html#Syncfusion_Blazor_Charts_StockChartTooltipSettings_Fill) and [Border](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartTooltipSettings.html#Syncfusion_Blazor_Charts_StockChartTooltipSettings_Border) properties are used to customize the background color and border of the tooltip respectively. The [TextStyle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartTooltipSettings.html#Syncfusion_Blazor_Charts_StockChartTooltipSettings_TextStyle) property in the tooltip is used to customize the font of the tooltip text. +The [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartTooltipSettings.html#Syncfusion_Blazor_Charts_StockChartTooltipSettings_Fill) and [Border](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartTooltipSettings.html#Syncfusion_Blazor_Charts_StockChartTooltipSettings_Border) properties customize the tooltip background and border. The [TextStyle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartTooltipSettings.html#Syncfusion_Blazor_Charts_StockChartTooltipSettings_TextStyle) property customizes the tooltip text font. ```cshtml @@ -129,7 +125,6 @@ The [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockC @code { - public class ChartData { public DateTime Date { get; set; } @@ -142,81 +137,76 @@ The [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockC public List StockDetails = new List { - new ChartData { Date = new DateTime(2012, 04, 02), Open= 85.9757, High = 90.6657,Low = 85.7685, Close = 90.5257,Volume = 660187068}, - new ChartData { Date = new DateTime(2012, 04, 09), Open= 89.4471, High = 92,Low = 86.2157, Close = 86.4614,Volume = 912634864}, - new ChartData { Date = new DateTime(2012, 04, 16), Open= 87.1514, High = 88.6071,Low = 81.4885, Close = 81.8543,Volume = 1221746066}, - new ChartData { Date = new DateTime(2012, 04, 23), Open= 81.5157, High = 88.2857,Low = 79.2857, Close = 86.1428,Volume = 965935749}, - new ChartData { Date = new DateTime(2012, 04, 30), Open= 85.4, High = 85.4857,Low = 80.7385, Close = 80.75,Volume = 615249365}, - new ChartData { Date = new DateTime(2012, 05, 07), Open= 80.2143, High = 82.2685,Low = 79.8185, Close = 80.9585,Volume = 541742692}, - new ChartData { Date = new DateTime(2012, 05, 14), Open= 80.3671, High = 81.0728,Low = 74.5971, Close = 75.7685,Volume = 708126233}, - new ChartData { Date = new DateTime(2012, 05, 21), Open= 76.3571, High = 82.3571,Low = 76.2928, Close = 80.3271,Volume = 682076215}, - new ChartData { Date = new DateTime(2012, 05, 28), Open= 81.5571, High = 83.0714,Low = 80.0743, Close = 80.1414,Volume = 480059584} + new ChartData { Date = new DateTime(2012, 04, 02), Open = 85.9757, High = 90.6657, Low = 85.7685, Close = 90.5257, Volume = 660187068 }, + new ChartData { Date = new DateTime(2012, 04, 09), Open = 89.4471, High = 92, Low = 86.2157, Close = 86.4614, Volume = 912634864 }, + new ChartData { Date = new DateTime(2012, 04, 16), Open = 87.1514, High = 88.6071, Low = 81.4885, Close = 81.8543, Volume = 1221746066 }, + new ChartData { Date = new DateTime(2012, 04, 23), Open = 81.5157, High = 88.2857, Low = 79.2857, Close = 86.1428, Volume = 965935749 }, + new ChartData { Date = new DateTime(2012, 04, 30), Open = 85.4, High = 85.4857, Low = 80.7385, Close = 80.75, Volume = 615249365 }, + new ChartData { Date = new DateTime(2012, 05, 07), Open = 80.2143, High = 82.2685, Low = 79.8185, Close = 80.9585, Volume = 541742692 }, + new ChartData { Date = new DateTime(2012, 05, 14), Open = 80.3671, High = 81.0728, Low = 74.5971, Close = 75.7685, Volume = 708126233 }, + new ChartData { Date = new DateTime(2012, 05, 21), Open = 76.3571, High = 82.3571, Low = 76.2928, Close = 80.3271, Volume = 682076215 }, + new ChartData { Date = new DateTime(2012, 05, 28), Open = 81.5571, High = 83.0714, Low = 80.0743, Close = 80.1414, Volume = 480059584 } }; } - ``` ![Blazor Stock Chart with Custom Tooltip](images/common/blazor-stock-chart-custom-tooltip.png) ## Tooltip position -By default, the tooltip appears on the left side of the stock chart. When moving the mouse pointer across data points, you can move the tooltip along with the mouse by setting `Nearest` to the `TooltipPosition` property in the [StockChartTooltipSetting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartTooltipSettings.html#Syncfusion_Blazor_Charts_StockChartTooltipSettings__ctor). +By default, the tooltip aligns to the left side of the Stock Chart. To move the tooltip with the pointer across data points, set `Nearest` to the `TooltipPosition` property in the [StockChartTooltipSetting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartTooltipSettings.html#Syncfusion_Blazor_Charts_StockChartTooltipSettings__ctor). ```cshtml -@using Syncfusion.Blazor + @using Syncfusion.Blazor.Charts -@inject NavigationManager NavigationManager -@using System.Net.Http.Json -@inject HttpClient Http - -@if (dataSource == null) -{ -
Loading... -
-} -else -{ - - - - - - - - - - - - - - - - - - -} -@code{ - private ChartData[] dataSource; - protected override async Task OnInitializedAsync() - { - dataSource = await Http.GetFromJsonAsync(NavigationManager.BaseUri + "./googl.json"); - } + + + + + + + + + + + + + + + + + + +@code { public class ChartData { - public DateTime x { get; set; } - public double open { get; set; } - public double low { get; set; } - public double close { get; set; } - public double high { get; set; } - public double volume { get; set; } + public DateTime Date { get; set; } + public Double Open { get; set; } + public Double Low { get; set; } + public Double Close { get; set; } + public Double High { get; set; } + public Double Volume { get; set; } } + + public List StockDetails = new List + { + new ChartData { Date = new DateTime(2012, 04, 02), Open = 85.9757, High = 90.6657, Low = 85.7685, Close = 90.5257, Volume = 660187068 }, + new ChartData { Date = new DateTime(2012, 04, 09), Open = 89.4471, High = 92, Low = 86.2157, Close = 86.4614, Volume = 912634864 }, + new ChartData { Date = new DateTime(2012, 04, 16), Open = 87.1514, High = 88.6071, Low = 81.4885, Close = 81.8543, Volume = 1221746066 }, + new ChartData { Date = new DateTime(2012, 04, 23), Open = 81.5157, High = 88.2857, Low = 79.2857, Close = 86.1428, Volume = 965935749 }, + new ChartData { Date = new DateTime(2012, 04, 30), Open = 85.4, High = 85.4857, Low = 80.7385, Close = 80.75, Volume = 615249365 }, + new ChartData { Date = new DateTime(2012, 05, 07), Open = 80.2143, High = 82.2685, Low = 79.8185, Close = 80.9585, Volume = 541742692 }, + new ChartData { Date = new DateTime(2012, 05, 14), Open = 80.3671, High = 81.0728, Low = 74.5971, Close = 75.7685, Volume = 708126233 }, + new ChartData { Date = new DateTime(2012, 05, 21), Open = 76.3571, High = 82.3571, Low = 76.2928, Close = 80.3271, Volume = 682076215 }, + new ChartData { Date = new DateTime(2012, 05, 28), Open = 81.5571, High = 83.0714, Low = 80.0743, Close = 80.1414, Volume = 480059584 } + }; } ``` ![Blazor Stock Chart with moving tooltip](images/common/blazor-stock-chart-moving-tooltip.gif) -N> Refer to our [Blazor Stock Charts](https://www.syncfusion.com/blazor-components/blazor-stock-chart) feature tour page for its groundbreaking feature representations and also explore our [Blazor Stock Chart Example](https://blazor.syncfusion.com/demos/stock-chart/stock-chart?theme=bootstrap5) to know various stock chart types and how to represent time-dependent data, showing trends at equal intervals. +N> Refer to the [Blazor Stock Charts](https://www.syncfusion.com/blazor-components/blazor-stock-chart) feature tour page for a summary of key features and explore the [Blazor Stock Chart example](https://blazor.syncfusion.com/demos/stock-chart/stock-chart?theme=bootstrap5) to learn about chart types and time based data visualization at equal intervals. diff --git a/blazor/stock-chart/trend-lines.md b/blazor/stock-chart/trend-lines.md index e320658d34..e81ba31713 100644 --- a/blazor/stock-chart/trend-lines.md +++ b/blazor/stock-chart/trend-lines.md @@ -1,7 +1,7 @@ --- layout: post title: Trendlines in Blazor Stock Chart Component | Syncfusion -description: Checkout and learn here all about trendlines in Syncfusion Blazor Stock Chart component and much more. +description: Check out and learn how to configure and customize trendlines in the Syncfusion Blazor Stock Chart component. platform: Blazor control: Stock Chart documentation: ug @@ -9,11 +9,11 @@ documentation: ug # Trendlines in Blazor Stock Chart Component -Trendlines are used to show the direction and speed of price. Stock Chart supports 6 types of trendlines namely `Linear`, `Exponential`, `Logarithmic`, `Polynomial`, `Power`, `Moving Average`. By using trendline dropdown button, the required trendline type can be added or removed. +Trendlines illustrate the direction and speed of price movement. The Stock Chart supports six trendline types: `Linear`, `Exponential`, `Logarithmic`, `Polynomial`, `Power`, and `Moving Average`. Using the trendline dropdown button, the required trendline type can be added or removed. ## Linear -A linear trendline is a best fit straight line that is used with simpler data sets. To render a linear trendline, use trendline [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartTrendline.html#Syncfusion_Blazor_Charts_StockChartTrendline_Type) as `Linear`. +A linear trendline is a best‑fit straight line used with simpler data sets. To render a linear trendline, set the trendline [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartTrendline.html#Syncfusion_Blazor_Charts_StockChartTrendline_Type) to `Linear`. ```cshtml @@ -37,7 +37,6 @@ A linear trendline is a best fit straight line that is used with simpler data se @code { - public List Indicator = new List(); public List SeriesType = new List(); public List ExportType = new List(); @@ -54,15 +53,15 @@ A linear trendline is a best fit straight line that is used with simpler data se public List StockDetails = new List { - new StockChartData { Date = new DateTime(2012, 04, 02), Open = 85.9757, High = 90.6657, Low = 85.7685, Close = 90.5257, Volume = 660187068}, - new StockChartData { Date = new DateTime(2012, 04, 09), Open = 89.4471, High = 92, Low = 86.2157, Close = 86.4614, Volume = 912634864}, - new StockChartData { Date = new DateTime(2012, 04, 16), Open = 87.1514, High = 88.6071, Low = 81.4885, Close = 81.8543, Volume = 1221746066}, - new StockChartData { Date = new DateTime(2012, 04, 23), Open = 81.5157, High = 88.2857, Low = 79.2857, Close = 86.1428, Volume = 965935749}, - new StockChartData { Date = new DateTime(2012, 04, 30), Open = 85.4, High = 85.4857, Low = 80.7385, Close = 80.75, Volume = 615249365}, - new StockChartData { Date = new DateTime(2012, 05, 07), Open = 80.2143, High = 82.2685, Low = 79.8185, Close = 80.9585, Volume = 541742692}, - new StockChartData { Date = new DateTime(2012, 05, 14), Open = 80.3671, High = 81.0728, Low = 74.5971, Close = 75.7685, Volume = 708126233}, - new StockChartData { Date = new DateTime(2012, 05, 21), Open = 76.3571, High = 82.3571, Low = 76.2928, Close = 80.3271, Volume = 682076215}, - new StockChartData { Date = new DateTime(2012, 05, 28), Open = 81.5571, High = 83.0714, Low = 80.0743, Close = 80.1414, Volume = 480059584}, + new StockChartData { Date = new DateTime(2012, 04, 02), Open = 85.9757, High = 90.6657, Low = 85.7685, Close = 90.5257, Volume = 660187068 }, + new StockChartData { Date = new DateTime(2012, 04, 09), Open = 89.4471, High = 92, Low = 86.2157, Close = 86.4614, Volume = 912634864 }, + new StockChartData { Date = new DateTime(2012, 04, 16), Open = 87.1514, High = 88.6071, Low = 81.4885, Close = 81.8543, Volume = 1221746066 }, + new StockChartData { Date = new DateTime(2012, 04, 23), Open = 81.5157, High = 88.2857, Low = 79.2857, Close = 86.1428, Volume = 965935749 }, + new StockChartData { Date = new DateTime(2012, 04, 30), Open = 85.4, High = 85.4857, Low = 80.7385, Close = 80.75, Volume = 615249365 }, + new StockChartData { Date = new DateTime(2012, 05, 07), Open = 80.2143, High = 82.2685, Low = 79.8185, Close = 80.9585, Volume = 541742692 }, + new StockChartData { Date = new DateTime(2012, 05, 14), Open = 80.3671, High = 81.0728, Low = 74.5971, Close = 75.7685, Volume = 708126233 }, + new StockChartData { Date = new DateTime(2012, 05, 21), Open = 76.3571, High = 82.3571, Low = 76.2928, Close = 80.3271, Volume = 682076215 }, + new StockChartData { Date = new DateTime(2012, 05, 28), Open = 81.5571, High = 83.0714, Low = 80.0743, Close = 80.1414, Volume = 480059584 } }; } @@ -72,9 +71,9 @@ A linear trendline is a best fit straight line that is used with simpler data se ## Logarithmic -A logarithmic trendline is a best-fit curved line that is most useful when the rate of change in the data increases or decreases quickly and then levels out. A logarithmic trendline can use negative and/or positive values. +A logarithmic trendline is a best fit curved line that is most useful when the rate of change in the data increases or decreases quickly and then levels out. A logarithmic trendline can use negative and positive values. -To render a logarithmic trendline, use trendline [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartTrendline.html#Syncfusion_Blazor_Charts_StockChartTrendline_Type) as `Logarithmic`. +To render a logarithmic trendline, set the trendline [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartTrendline.html#Syncfusion_Blazor_Charts_StockChartTrendline_Type) to `Logarithmic`. ```cshtml @@ -96,8 +95,8 @@ To render a logarithmic trendline, use trendline [Type](https://help.syncfusion. -@code { +@code { public List Indicator = new List(); public List SeriesType = new List(); public List ExportType = new List(); @@ -114,15 +113,15 @@ To render a logarithmic trendline, use trendline [Type](https://help.syncfusion. public List StockDetails = new List { - new StockChartData { Date = new DateTime(2012, 04, 02), Open = 85.9757, High = 90.6657, Low = 85.7685, Close = 90.5257, Volume = 660187068}, - new StockChartData { Date = new DateTime(2012, 04, 09), Open = 89.4471, High = 92, Low = 86.2157, Close = 86.4614, Volume = 912634864}, - new StockChartData { Date = new DateTime(2012, 04, 16), Open = 87.1514, High = 88.6071, Low = 81.4885, Close = 81.8543, Volume = 1221746066}, - new StockChartData { Date = new DateTime(2012, 04, 23), Open = 81.5157, High = 88.2857, Low = 79.2857, Close = 86.1428, Volume = 965935749}, - new StockChartData { Date = new DateTime(2012, 04, 30), Open = 85.4, High = 85.4857, Low = 80.7385, Close = 80.75, Volume = 615249365}, - new StockChartData { Date = new DateTime(2012, 05, 07), Open = 80.2143, High = 82.2685, Low = 79.8185, Close = 80.9585, Volume = 541742692}, - new StockChartData { Date = new DateTime(2012, 05, 14), Open = 80.3671, High = 81.0728, Low = 74.5971, Close = 75.7685, Volume = 708126233}, - new StockChartData { Date = new DateTime(2012, 05, 21), Open = 76.3571, High = 82.3571, Low = 76.2928, Close = 80.3271, Volume = 682076215}, - new StockChartData { Date = new DateTime(2012, 05, 28), Open = 81.5571, High = 83.0714, Low = 80.0743, Close = 80.1414, Volume = 480059584}, + new StockChartData { Date = new DateTime(2012, 04, 02), Open = 85.9757, High = 90.6657, Low = 85.7685, Close = 90.5257, Volume = 660187068 }, + new StockChartData { Date = new DateTime(2012, 04, 09), Open = 89.4471, High = 92, Low = 86.2157, Close = 86.4614, Volume = 912634864 }, + new StockChartData { Date = new DateTime(2012, 04, 16), Open = 87.1514, High = 88.6071, Low = 81.4885, Close = 81.8543, Volume = 1221746066 }, + new StockChartData { Date = new DateTime(2012, 04, 23), Open = 81.5157, High = 88.2857, Low = 79.2857, Close = 86.1428, Volume = 965935749 }, + new StockChartData { Date = new DateTime(2012, 04, 30), Open = 85.4, High = 85.4857, Low = 80.7385, Close = 80.75, Volume = 615249365 }, + new StockChartData { Date = new DateTime(2012, 05, 07), Open = 80.2143, High = 82.2685, Low = 79.8185, Close = 80.9585, Volume = 541742692 }, + new StockChartData { Date = new DateTime(2012, 05, 14), Open = 80.3671, High = 81.0728, Low = 74.5971, Close = 75.7685, Volume = 708126233 }, + new StockChartData { Date = new DateTime(2012, 05, 21), Open = 76.3571, High = 82.3571, Low = 76.2928, Close = 80.3271, Volume = 682076215 }, + new StockChartData { Date = new DateTime(2012, 05, 28), Open = 81.5571, High = 83.0714, Low = 80.0743, Close = 80.1414, Volume = 480059584 } }; } @@ -132,9 +131,9 @@ To render a logarithmic trendline, use trendline [Type](https://help.syncfusion. ## Exponential -An exponential trendline is a curved line that is most useful when data values rise or fall at increasingly higher rates. You cannot create an exponential trendline, if your data contains zero or negative values. +An exponential trendline is a curved line that is most useful when data values rise or fall at increasingly higher rates. An exponential trendline cannot be created if the data contains zero or negative values. -To render a exponential trendline, use trendline [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartTrendline.html#Syncfusion_Blazor_Charts_StockChartTrendline_Type) as `Exponential`. +To render an exponential trendline, set the trendline [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartTrendline.html#Syncfusion_Blazor_Charts_StockChartTrendline_Type) to `Exponential`. ```cshtml @@ -156,8 +155,8 @@ To render a exponential trendline, use trendline [Type](https://help.syncfusion. -@code { +@code { public List Indicator = new List(); public List SeriesType = new List(); public List ExportType = new List(); @@ -174,15 +173,15 @@ To render a exponential trendline, use trendline [Type](https://help.syncfusion. public List StockDetails = new List { - new StockChartData { Date = new DateTime(2012, 04, 02), Open = 85.9757, High = 90.6657, Low = 85.7685, Close = 90.5257, Volume = 660187068}, - new StockChartData { Date = new DateTime(2012, 04, 09), Open = 89.4471, High = 92, Low = 86.2157, Close = 86.4614, Volume = 912634864}, - new StockChartData { Date = new DateTime(2012, 04, 16), Open = 87.1514, High = 88.6071, Low = 81.4885, Close = 81.8543, Volume = 1221746066}, - new StockChartData { Date = new DateTime(2012, 04, 23), Open = 81.5157, High = 88.2857, Low = 79.2857, Close = 86.1428, Volume = 965935749}, - new StockChartData { Date = new DateTime(2012, 04, 30), Open = 85.4, High = 85.4857, Low = 80.7385, Close = 80.75, Volume = 615249365}, - new StockChartData { Date = new DateTime(2012, 05, 07), Open = 80.2143, High = 82.2685, Low = 79.8185, Close = 80.9585, Volume = 541742692}, - new StockChartData { Date = new DateTime(2012, 05, 14), Open = 80.3671, High = 81.0728, Low = 74.5971, Close = 75.7685, Volume = 708126233}, - new StockChartData { Date = new DateTime(2012, 05, 21), Open = 76.3571, High = 82.3571, Low = 76.2928, Close = 80.3271, Volume = 682076215}, - new StockChartData { Date = new DateTime(2012, 05, 28), Open = 81.5571, High = 83.0714, Low = 80.0743, Close = 80.1414, Volume = 480059584}, + new StockChartData { Date = new DateTime(2012, 04, 02), Open = 85.9757, High = 90.6657, Low = 85.7685, Close = 90.5257, Volume = 660187068 }, + new StockChartData { Date = new DateTime(2012, 04, 09), Open = 89.4471, High = 92, Low = 86.2157, Close = 86.4614, Volume = 912634864 }, + new StockChartData { Date = new DateTime(2012, 04, 16), Open = 87.1514, High = 88.6071, Low = 81.4885, Close = 81.8543, Volume = 1221746066 }, + new StockChartData { Date = new DateTime(2012, 04, 23), Open = 81.5157, High = 88.2857, Low = 79.2857, Close = 86.1428, Volume = 965935749 }, + new StockChartData { Date = new DateTime(2012, 04, 30), Open = 85.4, High = 85.4857, Low = 80.7385, Close = 80.75, Volume = 615249365 }, + new StockChartData { Date = new DateTime(2012, 05, 07), Open = 80.2143, High = 82.2685, Low = 79.8185, Close = 80.9585, Volume = 541742692 }, + new StockChartData { Date = new DateTime(2012, 05, 14), Open = 80.3671, High = 81.0728, Low = 74.5971, Close = 75.7685, Volume = 708126233 }, + new StockChartData { Date = new DateTime(2012, 05, 21), Open = 76.3571, High = 82.3571, Low = 76.2928, Close = 80.3271, Volume = 682076215 }, + new StockChartData { Date = new DateTime(2012, 05, 28), Open = 81.5571, High = 83.0714, Low = 80.0743, Close = 80.1414, Volume = 480059584 } }; } @@ -192,7 +191,7 @@ To render a exponential trendline, use trendline [Type](https://help.syncfusion. ## Polynomial -A polynomial trendline is a curved line that is used when data fluctuates. To render a polynomial trendline, use trendline [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartTrendline.html#Syncfusion_Blazor_Charts_StockChartTrendline_Type) as `Polynomial`. `PolynomialOrder` used to define the polynomial value. +A polynomial trendline is a curved line used when data fluctuates. To render a polynomial trendline, set the trendline [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartTrendline.html#Syncfusion_Blazor_Charts_StockChartTrendline_Type) to `Polynomial`. The `PolynomialOrder` property defines the polynomial value. ```cshtml @@ -214,6 +213,7 @@ A polynomial trendline is a curved line that is used when data fluctuates. To re + @code { public List Indicator = new List(); @@ -232,15 +232,15 @@ A polynomial trendline is a curved line that is used when data fluctuates. To re public List StockDetails = new List { - new StockChartData { Date = new DateTime(2012, 04, 02), Open = 85.9757, High = 90.6657, Low = 85.7685, Close = 90.5257, Volume = 660187068}, - new StockChartData { Date = new DateTime(2012, 04, 09), Open = 89.4471, High = 92, Low = 86.2157, Close = 86.4614, Volume = 912634864}, - new StockChartData { Date = new DateTime(2012, 04, 16), Open = 87.1514, High = 88.6071, Low = 81.4885, Close = 81.8543, Volume = 1221746066}, - new StockChartData { Date = new DateTime(2012, 04, 23), Open = 81.5157, High = 88.2857, Low = 79.2857, Close = 86.1428, Volume = 965935749}, - new StockChartData { Date = new DateTime(2012, 04, 30), Open = 85.4, High = 85.4857, Low = 80.7385, Close = 80.75, Volume = 615249365}, - new StockChartData { Date = new DateTime(2012, 05, 07), Open = 80.2143, High = 82.2685, Low = 79.8185, Close = 80.9585, Volume = 541742692}, - new StockChartData { Date = new DateTime(2012, 05, 14), Open = 80.3671, High = 81.0728, Low = 74.5971, Close = 75.7685, Volume = 708126233}, - new StockChartData { Date = new DateTime(2012, 05, 21), Open = 76.3571, High = 82.3571, Low = 76.2928, Close = 80.3271, Volume = 682076215}, - new StockChartData { Date = new DateTime(2012, 05, 28), Open = 81.5571, High = 83.0714, Low = 80.0743, Close = 80.1414, Volume = 480059584}, + new StockChartData { Date = new DateTime(2012, 04, 02), Open = 85.9757, High = 90.6657, Low = 85.7685, Close = 90.5257, Volume = 660187068 }, + new StockChartData { Date = new DateTime(2012, 04, 09), Open = 89.4471, High = 92, Low = 86.2157, Close = 86.4614, Volume = 912634864 }, + new StockChartData { Date = new DateTime(2012, 04, 16), Open = 87.1514, High = 88.6071, Low = 81.4885, Close = 81.8543, Volume = 1221746066 }, + new StockChartData { Date = new DateTime(2012, 04, 23), Open = 81.5157, High = 88.2857, Low = 79.2857, Close = 86.1428, Volume = 965935749 }, + new StockChartData { Date = new DateTime(2012, 04, 30), Open = 85.4, High = 85.4857, Low = 80.7385, Close = 80.75, Volume = 615249365 }, + new StockChartData { Date = new DateTime(2012, 05, 07), Open = 80.2143, High = 82.2685, Low = 79.8185, Close = 80.9585, Volume = 541742692 }, + new StockChartData { Date = new DateTime(2012, 05, 14), Open = 80.3671, High = 81.0728, Low = 74.5971, Close = 75.7685, Volume = 708126233 }, + new StockChartData { Date = new DateTime(2012, 05, 21), Open = 76.3571, High = 82.3571, Low = 76.2928, Close = 80.3271, Volume = 682076215 }, + new StockChartData { Date = new DateTime(2012, 05, 28), Open = 81.5571, High = 83.0714, Low = 80.0743, Close = 80.1414, Volume = 480059584 } }; } @@ -250,13 +250,13 @@ A polynomial trendline is a curved line that is used when data fluctuates. To re ## Power -A power trendline is a curved line that is best used with data sets that compare measurements that increase at a specific rate. To render a power trendline, use trendline [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartTrendline.html#Syncfusion_Blazor_Charts_StockChartTrendline_Type) as `Power`. +A power trendline is a curved line best used with data sets that compare measurements increasing at a specific rate. To render a power trendline, set the trendline [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartTrendline.html#Syncfusion_Blazor_Charts_StockChartTrendline_Type) to `Power`. ## Moving Average -A moving average trendline smoothen out fluctuations in data to show a pattern or trend more clearly. To render a moving average trendline, use trendline [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartTrendline.html#Syncfusion_Blazor_Charts_StockChartTrendline_Type) as `MovingAverage`. +A moving average trendline smooths fluctuations in data to show a pattern or trend more clearly. To render a moving average trendline, set the trendline [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartTrendline.html#Syncfusion_Blazor_Charts_StockChartTrendline_Type) to `MovingAverage`. -`Period` property defines the period to find the moving average. +The `Period` property defines the period used to calculate the moving average. ```cshtml @@ -280,7 +280,6 @@ A moving average trendline smoothen out fluctuations in data to show a pattern o @code { - public List Indicator = new List(); public List SeriesType = new List(); public List ExportType = new List(); @@ -297,15 +296,15 @@ A moving average trendline smoothen out fluctuations in data to show a pattern o public List StockDetails = new List { - new ChartData { Date = new DateTime(2012, 04, 02), Open= 85.9757, High = 90.6657,Low = 85.7685, Close = 90.5257,Volume = 660187068}, - new ChartData { Date = new DateTime(2012, 04, 09), Open= 89.4471, High = 92,Low = 86.2157, Close = 86.4614,Volume = 912634864}, - new ChartData { Date = new DateTime(2012, 04, 16), Open= 87.1514, High = 88.6071,Low = 81.4885, Close = 81.8543,Volume = 1221746066}, - new ChartData { Date = new DateTime(2012, 04, 23), Open= 81.5157, High = 88.2857,Low = 79.2857, Close = 86.1428,Volume = 965935749}, - new ChartData { Date = new DateTime(2012, 04, 30), Open= 85.4, High = 85.4857,Low = 80.7385, Close = 80.75,Volume = 615249365}, - new ChartData { Date = new DateTime(2012, 05, 07), Open= 80.2143, High = 82.2685,Low = 79.8185, Close = 80.9585,Volume = 541742692}, - new ChartData { Date = new DateTime(2012, 05, 14), Open= 80.3671, High = 81.0728,Low = 74.5971, Close = 75.7685,Volume = 708126233}, - new ChartData { Date = new DateTime(2012, 05, 21), Open= 76.3571, High = 82.3571,Low = 76.2928, Close = 80.3271,Volume = 682076215}, - new ChartData { Date = new DateTime(2012, 05, 28), Open= 81.5571, High = 83.0714,Low = 80.0743, Close = 80.1414,Volume = 480059584} + new StockChartData { Date = new DateTime(2012, 04, 02), Open = 85.9757, High = 90.6657, Low = 85.7685, Close = 90.5257, Volume = 660187068 }, + new StockChartData { Date = new DateTime(2012, 04, 09), Open = 89.4471, High = 92, Low = 86.2157, Close = 86.4614, Volume = 912634864 }, + new StockChartData { Date = new DateTime(2012, 04, 16), Open = 87.1514, High = 88.6071, Low = 81.4885, Close = 81.8543, Volume = 1221746066 }, + new StockChartData { Date = new DateTime(2012, 04, 23), Open = 81.5157, High = 88.2857, Low = 79.2857, Close = 86.1428, Volume = 965935749 }, + new StockChartData { Date = new DateTime(2012, 04, 30), Open = 85.4, High = 85.4857, Low = 80.7385, Close = 80.75, Volume = 615249365 }, + new StockChartData { Date = new DateTime(2012, 05, 07), Open = 80.2143, High = 82.2685, Low = 79.8185, Close = 80.9585, Volume = 541742692 }, + new StockChartData { Date = new DateTime(2012, 05, 14), Open = 80.3671, High = 81.0728, Low = 74.5971, Close = 75.7685, Volume = 708126233 }, + new StockChartData { Date = new DateTime(2012, 05, 21), Open = 76.3571, High = 82.3571, Low = 76.2928, Close = 80.3271, Volume = 682076215 }, + new StockChartData { Date = new DateTime(2012, 05, 28), Open = 81.5571, High = 83.0714, Low = 80.0743, Close = 80.1414, Volume = 480059584 } }; } @@ -315,7 +314,7 @@ A moving average trendline smoothen out fluctuations in data to show a pattern o ## Customization of Trendline -The [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartTrendline.html#Syncfusion_Blazor_Charts_StockChartTrendline_Fill) and [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartTrendline.html#Syncfusion_Blazor_Charts_StockChartTrendline_Width) properties are used to customize the appearance of the trendline. +The [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartTrendline.html#Syncfusion_Blazor_Charts_StockChartTrendline_Fill) and [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartTrendline.html#Syncfusion_Blazor_Charts_StockChartTrendline_Width) properties customize the appearance of the trendline. ```cshtml @@ -330,8 +329,8 @@ The [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockC -@code { +@code { public class ChartData { public DateTime Date { get; set; } @@ -344,19 +343,19 @@ The [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockC public List StockDetails = new List { - new ChartData { Date = new DateTime(2012, 04, 02), Open= 85.9757, High = 90.6657,Low = 85.7685, Close = 90.5257,Volume = 660187068}, - new ChartData { Date = new DateTime(2012, 04, 09), Open= 89.4471, High = 92,Low = 86.2157, Close = 86.4614,Volume = 912634864}, - new ChartData { Date = new DateTime(2012, 04, 16), Open= 87.1514, High = 88.6071,Low = 81.4885, Close = 81.8543,Volume = 1221746066}, - new ChartData { Date = new DateTime(2012, 04, 23), Open= 81.5157, High = 88.2857,Low = 79.2857, Close = 86.1428,Volume = 965935749}, - new ChartData { Date = new DateTime(2012, 04, 30), Open= 85.4, High = 85.4857,Low = 80.7385, Close = 80.75,Volume = 615249365}, - new ChartData { Date = new DateTime(2012, 05, 07), Open= 80.2143, High = 82.2685,Low = 79.8185, Close = 80.9585,Volume = 541742692}, - new ChartData { Date = new DateTime(2012, 05, 14), Open= 80.3671, High = 81.0728,Low = 74.5971, Close = 75.7685,Volume = 708126233}, - new ChartData { Date = new DateTime(2012, 05, 21), Open= 76.3571, High = 82.3571,Low = 76.2928, Close = 80.3271,Volume = 682076215}, - new ChartData { Date = new DateTime(2012, 05, 28), Open= 81.5571, High = 83.0714,Low = 80.0743, Close = 80.1414,Volume = 480059584} + new ChartData { Date = new DateTime(2012, 04, 02), Open = 85.9757, High = 90.6657, Low = 85.7685, Close = 90.5257, Volume = 660187068 }, + new ChartData { Date = new DateTime(2012, 04, 09), Open = 89.4471, High = 92, Low = 86.2157, Close = 86.4614, Volume = 912634864 }, + new ChartData { Date = new DateTime(2012, 04, 16), Open = 87.1514, High = 88.6071, Low = 81.4885, Close = 81.8543, Volume = 1221746066 }, + new ChartData { Date = new DateTime(2012, 04, 23), Open = 81.5157, High = 88.2857, Low = 79.2857, Close = 86.1428, Volume = 965935749 }, + new ChartData { Date = new DateTime(2012, 04, 30), Open = 85.4, High = 85.4857, Low = 80.7385, Close = 80.75, Volume = 615249365 }, + new ChartData { Date = new DateTime(2012, 05, 07), Open = 80.2143, High = 82.2685, Low = 79.8185, Close = 80.9585, Volume = 541742692 }, + new ChartData { Date = new DateTime(2012, 05, 14), Open = 80.3671, High = 81.0728, Low = 74.5971, Close = 75.7685, Volume = 708126233 }, + new ChartData { Date = new DateTime(2012, 05, 21), Open = 76.3571, High = 82.3571, Low = 76.2928, Close = 80.3271, Volume = 682076215 }, + new ChartData { Date = new DateTime(2012, 05, 28), Open = 81.5571, High = 83.0714, Low = 80.0743, Close = 80.1414, Volume = 480059584 } }; } ``` -![Blazor Stock Chart with Custom Trendline](images/common/blazor-stock-chart-custom-trendline.png) \ No newline at end of file +![Blazor Stock Chart with Custom Trendline](images/common/blazor-stock-chart-custom-trendline.png) diff --git a/blazor/stock-chart/working-with-data.md b/blazor/stock-chart/working-with-data.md index 12e4a18c30..9e662414b9 100644 --- a/blazor/stock-chart/working-with-data.md +++ b/blazor/stock-chart/working-with-data.md @@ -1,7 +1,7 @@ --- layout: post title: Working with Data in Blazor Stock Chart Component | Syncfusion -description: Checkout and learn here all about working with data in Syncfusion Blazor Stock Chart component and more. +description: Learn how to bind data to the Syncfusion Blazor Stock Chart using lists, Dynamic Objects, and much more. platform: Blazor control: Stock Chart documentation: ug @@ -11,7 +11,7 @@ documentation: ug # Working with Data in Blazor Stock Chart Component -The Stock Chart uses [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html), which supports both RESTful JSON data services binding and IEnumerable binding. The [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_DataSource) value can be set using either [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html) property value or a list of business objects. +The Stock Chart uses [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html), which supports RESTful JSON services and IEnumerable binding. The [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_DataSource) can be set using either the [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html) component or a list of business objects. It supports the following data binding methods: * List binding @@ -19,7 +19,7 @@ It supports the following data binding methods: ## List binding -To do list binding to the stock chart, an IEnumerable object can be assigned to the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_DataSource) property. The list data source can also be provided as an instance of the [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html) or by using SfDataManager component. Now map the fields in list to +To perform list binding, assign an IEnumerable object to the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_DataSource) property. The list data source can also be provided using [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html) or by adding the SfDataManager component. Map the fields in the list to the [XName](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartSeries.html#Syncfusion_Blazor_Charts_StockChartSeries_XName), [High](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartSeries.html#Syncfusion_Blazor_Charts_StockChartSeries_High), [Low](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartSeries.html#Syncfusion_Blazor_Charts_StockChartSeries_Low), [Open](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartSeries.html#Syncfusion_Blazor_Charts_StockChartSeries_Open) and [Close](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartSeries.html#Syncfusion_Blazor_Charts_StockChartSeries_Close) properties. @@ -34,28 +34,27 @@ properties. @code { - public class ChartData { - public DateTime Date {get; set;} - public Double Open {get; set;} - public Double Low {get; set;} - public Double Close {get; set;} - public Double High {get; set;} - public Double Volume{get; set;} + public DateTime Date { get; set; } + public Double Open { get; set; } + public Double Low { get; set; } + public Double Close { get; set; } + public Double High { get; set; } + public Double Volume{ get; set; } } public List StockDetails = new List { - new ChartData { Date = new DateTime(2012, 04, 02), Open= 85.9757, High = 90.6657,Low = 85.7685, Close = 90.5257,Volume = 660187068}, - new ChartData { Date = new DateTime(2012, 04, 09), Open= 89.4471, High = 92,Low = 86.2157, Close = 86.4614,Volume = 912634864}, - new ChartData { Date = new DateTime(2012, 04, 16), Open= 87.1514, High = 88.6071,Low = 81.4885, Close = 81.8543,Volume = 1221746066}, - new ChartData { Date = new DateTime(2012, 04, 23), Open= 81.5157, High = 88.2857,Low = 79.2857, Close = 86.1428,Volume = 965935749}, - new ChartData { Date = new DateTime(2012, 04, 30), Open= 85.4, High = 85.4857,Low = 80.7385, Close = 80.75,Volume = 615249365}, - new ChartData { Date = new DateTime(2012, 05, 07), Open= 80.2143, High = 82.2685,Low = 79.8185, Close = 80.9585,Volume = 541742692}, - new ChartData { Date = new DateTime(2012, 05, 14), Open= 80.3671, High = 81.0728,Low = 74.5971, Close = 75.7685,Volume = 708126233}, - new ChartData { Date = new DateTime(2012, 05, 21), Open= 76.3571, High = 82.3571,Low = 76.2928, Close = 80.3271,Volume = 682076215}, - new ChartData { Date = new DateTime(2012, 05, 28), Open= 81.5571, High = 83.0714,Low = 80.0743, Close = 80.1414,Volume = 480059584} + new ChartData { Date = new DateTime(2012, 04, 02), Open = 85.9757, High = 90.6657, Low = 85.7685, Close = 90.5257, Volume = 660187068 }, + new ChartData { Date = new DateTime(2012, 04, 09), Open = 89.4471, High = 92, Low = 86.2157, Close = 86.4614, Volume = 912634864 }, + new ChartData { Date = new DateTime(2012, 04, 16), Open = 87.1514, High = 88.6071, Low = 81.4885, Close = 81.8543, Volume = 1221746066 }, + new ChartData { Date = new DateTime(2012, 04, 23), Open = 81.5157, High = 88.2857, Low = 79.2857, Close = 86.1428, Volume = 965935749 }, + new ChartData { Date = new DateTime(2012, 04, 30), Open = 85.4, High = 85.4857, Low = 80.7385, Close = 80.75, Volume = 615249365 }, + new ChartData { Date = new DateTime(2012, 05, 07), Open = 80.2143, High = 82.2685, Low = 79.8185, Close = 80.9585, Volume = 541742692 }, + new ChartData { Date = new DateTime(2012, 05, 14), Open = 80.3671, High = 81.0728, Low = 74.5971, Close = 75.7685, Volume = 708126233 }, + new ChartData { Date = new DateTime(2012, 05, 21), Open = 76.3571, High = 82.3571, Low = 76.2928, Close = 80.3271, Volume = 682076215 }, + new ChartData { Date = new DateTime(2012, 05, 28), Open = 81.5571, High = 83.0714, Low = 80.0743, Close = 80.1414, Volume = 480059584 } }; } @@ -63,11 +62,11 @@ properties. ![Binding Local Data in Blazor Stock Chart](images/common/blazor-stock-chart-bind-local-data.png) -N> By default, [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html) uses **BlazorAdaptor** for list data-binding. +N> By default, [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html) uses **BlazorAdaptor** for list data binding. ### ExpandoObject binding -Stock Chart is a generic component which is strongly bound to a model type. There are cases when the model type is unknown during compile time. In such circumstances data can be bound to the Stock chart as a list of **ExpandoObject**. The **ExpandoObject** can be bound to Stock chart by assigning to the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_DataSource) property. +Stock Chart is a generic component strongly bound to a model type. When the model type is unknown at compile time, data can be supplied as a list of **ExpandoObject** and assigned to the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_DataSource) property. ```cshtml @using Syncfusion.Blazor.Charts @@ -79,7 +78,7 @@ Stock Chart is a generic component which is strongly bound to a model type. Ther -@code{ +@code { private List Dates = new List { new DateTime(2005, 01, 01), new DateTime(2006, 01, 01), new DateTime(2007, 01, 01), new DateTime(2008, 01, 01), new DateTime(2009, 01, 01), new DateTime(2010, 01, 01), new DateTime(2011, 01, 01) }; public DateTime[] Value = new DateTime[] { new DateTime(2006, 01, 01), new DateTime(2008, 01, 01) }; @@ -100,13 +99,14 @@ Stock Chart is a generic component which is strongly bound to a model type. Ther }).Cast().ToList(); } } + ``` ![Blazor Stock Chart with ExpandoObject](images/common/blazor-stock-chart-expando.png) ### DynamicObject binding -Stock Chart supports **DynamicObject** data source when the model type is unknown. The **DynamicObject** can be bound to Stock chart by assigning to the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_DataSource) property. +Stock Chart supports **DynamicObject** as a data source when the model type is unknown. Assign the **DynamicObject** list to the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_DataSource) property. ```cshtml @@ -119,12 +119,14 @@ Stock Chart supports **DynamicObject** data source when the model type is unknow -@code{ +@code { private List Dates = new List { new DateTime(2005, 01, 01), new DateTime(2006, 01, 01), new DateTime(2007, 01, 01), new DateTime(2008, 01, 01), new DateTime(2009, 01, 01), new DateTime(2010, 01, 01), new DateTime(2011, 01, 01) }; public DateTime[] Value = new DateTime[] { new DateTime(2006, 01, 01), new DateTime(2008, 01, 01) }; + private Random randomNum = new Random(); public List MedalDetails = new List() { }; + protected override void OnInitialized() { MedalDetails = Enumerable.Range(0, 5).Select((x) => @@ -139,6 +141,7 @@ Stock Chart supports **DynamicObject** data source when the model type is unknow return d; }).Cast().ToList(); } + public class DynamicDictionary : DynamicObject { Dictionary dictionary = new Dictionary(); @@ -148,6 +151,7 @@ Stock Chart supports **DynamicObject** data source when the model type is unknow string name = binder.Name; return dictionary.TryGetValue(name, out result); } + public override bool TrySetMember(SetMemberBinder binder, object value) { dictionary[binder.Name] = value; @@ -160,6 +164,7 @@ Stock Chart supports **DynamicObject** data source when the model type is unknow } } } + ``` ![Blazor Stock Chart with Dynamic Object](images/common/blazor-stock-chart-dynamic.png) @@ -168,7 +173,7 @@ Stock Chart supports **DynamicObject** data source when the model type is unknow ### Binding with OData services -[OData](https://www.odata.org/documentation/odata-version-3-0/) is a standardized protocol for creating and consuming data. You can retrieve data from OData service using the [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html). Refer to the following code example for remote data binding using OData service. +[OData](https://www.odata.org/documentation/odata-version-3-0/) is a standardized protocol for creating and consuming data. Data can be retrieved from an OData service using [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html). The following example demonstrates remote data binding using an OData service. ```cshtml @@ -198,7 +203,7 @@ Stock Chart supports **DynamicObject** data source when the model type is unknow ### Binding with OData v4 services -The [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html) can retrieve and consume OData v4 services, which is an upgraded version of OData protocols. Refer to the [OData documentation](http://docs.oasis-open.org/odata/odata/v4.0/errata03/os/complete/part1-protocol/odata-v4.0-errata03-os-part1-protocol-complete.html#_Toc453752197) for additional information on OData v4 services. To bind an OData v4 service, use the **ODataV4Adaptor**. +The [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html) can retrieve and consume OData v4 services, an upgraded version of the OData protocol. Refer to the [OData documentation](http://docs.oasis-open.org/odata/odata/v4.0/errata03/os/complete/part1-protocol/odata-v4.0-errata03-os-part1-protocol-complete.html#_Toc453752197) for additional information. To bind an OData v4 service, use **ODataV4Adaptor**. ```cshtml @@ -231,6 +236,7 @@ The [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data The [WebApiAdaptor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.WebApiAdaptor.html) can be used to bind a Stock chart to a Web API created using an [OData](https://www.odata.org/documentation/odata-version-3-0/) endpoint. ```cshtml + @using Syncfusion.Blazor.Charts @using Syncfusion.Blazor.Data @@ -257,7 +263,7 @@ The [WebApiAdaptor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data ## Observable collection -The [ObservableCollection](https://learn.microsoft.com/en-us/dotnet/api/system.collections.objectmodel.observablecollection-1?view=net-6.0) (dynamic data collection) provides notifications when items are added, removed, and moved. The implemented [INotifyCollectionChanged](https://learn.microsoft.com/en-us/dotnet/api/system.collections.specialized.inotifycollectionchanged?view=net-6.0) provides notification when the dynamic changes of adding, removing, moving, and clearing the collection occur. +The [ObservableCollection](https://learn.microsoft.com/en-us/dotnet/api/system.collections.objectmodel.observablecollection-1?view=net-6.0) (dynamic data collection) provides notifications when items are added, removed, or moved. The implemented [INotifyCollectionChanged](https://learn.microsoft.com/en-us/dotnet/api/system.collections.specialized.inotifycollectionchanged?view=net-6.0) interface raises notifications for dynamic changes such as add, remove, move, and clear operations. ```cshtml @@ -283,19 +289,20 @@ The [ObservableCollection](https://learn.microsoft.com/en-us/dotnet/api/system.c public double Volume { get; set; } public double Close { get; set; } public double Open { get; set; } + public static ObservableCollection GetData() { ObservableCollection ChartPoints = new ObservableCollection() { - new ChartData { Date = new DateTime(2012, 04, 02), Open= 85.9757, High = 90.6657,Low = 85.7685, Close = 90.5257,Volume = 660187068}, - new ChartData { Date = new DateTime(2012, 04, 09), Open= 89.4471, High = 92,Low = 86.2157, Close = 86.4614,Volume = 912634864}, - new ChartData { Date = new DateTime(2012, 04, 16), Open= 87.1514, High = 88.6071,Low = 81.4885, Close = 81.8543,Volume = 1221746066}, - new ChartData { Date = new DateTime(2012, 04, 23), Open= 81.5157, High = 88.2857,Low = 79.2857, Close = 86.1428,Volume = 965935749}, - new ChartData { Date = new DateTime(2012, 04, 30), Open= 85.4, High = 85.4857,Low = 80.7385, Close = 80.75,Volume = 615249365}, - new ChartData { Date = new DateTime(2012, 05, 07), Open= 80.2143, High = 82.2685,Low = 79.8185, Close = 80.9585,Volume = 541742692}, - new ChartData { Date = new DateTime(2012, 05, 14), Open= 80.3671, High = 81.0728,Low = 74.5971, Close = 75.7685,Volume = 708126233}, - new ChartData { Date = new DateTime(2012, 05, 21), Open= 76.3571, High = 82.3571,Low = 76.2928, Close = 80.3271,Volume = 682076215}, - new ChartData { Date = new DateTime(2012, 05, 28), Open= 81.5571, High = 83.0714,Low = 80.0743, Close = 80.1414,Volume = 480059584} + new ChartData { Date = new DateTime(2012, 04, 02), Open = 85.9757, High = 90.6657, Low = 85.7685, Close = 90.5257, Volume = 660187068 }, + new ChartData { Date = new DateTime(2012, 04, 09), Open = 89.4471, High = 92.0000, Low = 86.2157, Close = 86.4614, Volume = 912634864 }, + new ChartData { Date = new DateTime(2012, 04, 16), Open = 87.1514, High = 88.6071, Low = 81.4885, Close = 81.8543, Volume = 1221746066 }, + new ChartData { Date = new DateTime(2012, 04, 23), Open = 81.5157, High = 88.2857, Low = 79.2857, Close = 86.1428, Volume = 965935749 }, + new ChartData { Date = new DateTime(2012, 04, 30), Open = 85.4000, High = 85.4857, Low = 80.7385, Close = 80.7500, Volume = 615249365 }, + new ChartData { Date = new DateTime(2012, 05, 07), Open = 80.2143, High = 82.2685, Low = 79.8185, Close = 80.9585, Volume = 541742692 }, + new ChartData { Date = new DateTime(2012, 05, 14), Open = 80.3671, High = 81.0728, Low = 74.5971, Close = 75.7685, Volume = 708126233 }, + new ChartData { Date = new DateTime(2012, 05, 21), Open = 76.3571, High = 82.3571, Low = 76.2928, Close = 80.3271, Volume = 682076215 }, + new ChartData { Date = new DateTime(2012, 05, 28), Open = 81.5571, High = 83.0714, Low = 80.0743, Close = 80.1414, Volume = 480059584 } }; return ChartPoints; } @@ -306,19 +313,21 @@ The [ObservableCollection](https://learn.microsoft.com/en-us/dotnet/api/system.c this.ChartPoints = ChartData.GetData(); } } + ``` ![Blazor Chart with Web API Binding](images/common/blazor-stock-chart-observable-collection.png) ## Entity Framework -Entity Framework acts as a modern object-database mapper for .NET. This section explains how to consume data from the **Microsoft SQL Server** database and bind it to the chart component. +Entity Framework acts as a modern object-database mapper for .NET. This section explains how to consume data from Microsoft SQL Server and bind it to the chart component. ### Create DBContext class -The first step is to create a DBContext class called **OrderContext** for establishing connection to a Microsoft SQL Server database. +Create a DBContext class named **OrderContext** to establish a connection to Microsoft SQL Server. ```csharp + using System; using System.Collections.Generic; using System.Linq; @@ -358,9 +367,10 @@ namespace EFChart.Data ### Create data access layer to perform data operation -Now, create a class called **OrderDataAccessLayer**, which acts as a data access layer to retrieve the records from the database table. +Create a class named **OrderDataAccessLayer** to act as a data access layer and retrieve records from the database table. ```csharp + using Microsoft.EntityFrameworkCore; using System; using System.Collections.Generic; @@ -394,9 +404,10 @@ namespace EFChart.Data ### Creating Web API Controller -A Web API Controller must be created which allows the chart to directly consume data from the Entity Framework. +Create a Web API Controller that allows the chart to consume data from Entity Framework. ```csharp + using System; using System.Collections; using System.Collections.Generic; @@ -441,9 +452,10 @@ namespace EFChart.Controller ### Add Web API Controller services in Startup.cs -Open the **Startup.cs** file and add services and endpoints required for Web API Controller as follows. +Open **Startup.cs** and add services and endpoints required for the Web API Controller as follows. ```csharp + using EFChart.Data; using Newtonsoft.Json.Serialization; @@ -480,13 +492,14 @@ namespace BlazorApplication } } } + ``` ### Configure chart component -Configure the chart to bind data using either [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfChart.html#Syncfusion_Blazor_Charts_SfChart_DataSource) property or [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html). +Configure the chart to bind data using either the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfChart.html#Syncfusion_Blazor_Charts_SfChart_DataSource) property or [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html). -For instance, to bind data directly from the data access layer class **OrderDataAccessLayer**, assign the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfChart.html#Syncfusion_Blazor_Charts_SfChart_DataSource) property to be **OrderData.GetAllOrders()**. +For example, to bind data directly from the data access layer class **OrderDataAccessLayer**, assign the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfChart.html#Syncfusion_Blazor_Charts_SfChart_DataSource) property to **OrderData.GetAllOrders()**. ```cshtml @@ -501,14 +514,17 @@ For instance, to bind data directly from the data access layer class **OrderData -@code{ + +@code { } + ``` -On the other hand, to configure the chart using Web API, provide the appropriate endpoint Url within [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html) along with [Adaptor](https://blazor.syncfusion.com/documentation/data/adaptors). Here, use [WebApiAdaptor](https://blazor.syncfusion.com/documentation/data/adaptors?no-cache=1#web-api-adaptor) in-order to interact with the Web API to consume data from the Entity Framework appropriately. +To configure the chart using a Web API, provide the appropriate endpoint URL within [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html) along with an [Adaptor](https://blazor.syncfusion.com/documentation/data/adaptors). Use [WebApiAdaptor](https://blazor.syncfusion.com/documentation/data/adaptors?no-cache=1#web-api-adaptor) to interact with a Web API and consume data from Entity Framework. ```cshtml + @using Syncfusion.Blazor.Charts @using Syncfusion.Blazor.Data @@ -524,16 +540,19 @@ On the other hand, to configure the chart using Web API, provide the appropriate -@code{ + +@code { } + ``` ## Handling No Data -When no data is available to render in the stock chart, the [NoDataTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfStockChart.html#Syncfusion_Blazor_Charts_SfStockChart_NoDataTemplate) property can be used to display a custom layout within the chart area. This layout may include a message indicating the absence of data, a relevant image, or a button to initiate data loading. Styled text, images, or interactive elements can be incorporated to maintain design consistency and improve user guidance. Once data becomes available, the chart automatically updates to display the appropriate visualization. +When no data is available to render in the stock chart, the [NoDataTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfStockChart.html#Syncfusion_Blazor_Charts_SfStockChart_NoDataTemplate) property can be used to display a custom layout within the chart area. This layout may include a message indicating the absence of data, a relevant image, or a button to initiate data loading. Styled text, images, or interactive elements can be incorporated to maintain design consistency and improve guidance. Once data becomes available, the chart automatically updates to display the appropriate visualization. ```cshtml + @using Syncfusion.Blazor.Charts @using Syncfusion.Blazor.Buttons @@ -608,4 +627,4 @@ When no data is available to render in the stock chart, the [NoDataTemplate](htt ## See Also * [Series Types](./series-types) -* [Integrate a Stock Chart Inside Accordion Component](https://support.syncfusion.com/kb/article/21362/how-to-integrate-a-stock-chart-inside-a-blazor-accordion-component) \ No newline at end of file +* [Integrate a Stock Chart Inside Accordion Component](https://support.syncfusion.com/kb/article/21362/how-to-integrate-a-stock-chart-inside-a-blazor-accordion-component) diff --git a/blazor/stock-chart/zooming.md b/blazor/stock-chart/zooming.md index 4cc1fca5e1..65d70c745b 100644 --- a/blazor/stock-chart/zooming.md +++ b/blazor/stock-chart/zooming.md @@ -1,7 +1,7 @@ --- layout: post title: Zooming in Blazor Stock Chart Component | Syncfusion -description: Checkout and learn here all about Zooming functionality in Syncfusion Blazor Stock Chart component and more. +description: Check out and learn here all about Zooming functionality in the Syncfusion Blazor Stock Chart component. platform: Blazor control: Stock Chart documentation: ug @@ -11,13 +11,13 @@ documentation: ug ## Enable zooming -The stock chart can be zoomed in three different ways. +The stock chart supports three zooming interactions: -* Selection - By setting [EnableSelectionZooming](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartZoomSettings.html#Syncfusion_Blazor_Charts_StockChartZoomSettings_EnableSelectionZooming) property to **true** in [StockChartZoomSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartZoomSettings.html), the stock chart can be zoomed using the rubber band selection. -* Mouse Wheel - By setting [EnableMouseWheelZooming](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartZoomSettings.html#Syncfusion_Blazor_Charts_StockChartZoomSettings_EnableMouseWheelZooming) property to **true** in [StockChartZoomSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartZoomSettings.html), the stock chart can be zoomed-in and zoomed-out by scrolling the mouse wheel. -* Pinch - By setting [EnablePinchZooming](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartZoomSettings.html#Syncfusion_Blazor_Charts_StockChartZoomSettings_EnablePinchZooming) property to **true** in [StockChartZoomSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartZoomSettings.html), the stock chart can be zoomed through pinch gesture in touch enabled devices. +* Selection – Set [EnableSelectionZooming](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartZoomSettings.html#Syncfusion_Blazor_Charts_StockChartZoomSettings_EnableSelectionZooming) to **true** in [StockChartZoomSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartZoomSettings.html) to enable rubber-band selection zooming. +* Mouse wheel – Set [EnableMouseWheelZooming](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartZoomSettings.html#Syncfusion_Blazor_Charts_StockChartZoomSettings_EnableMouseWheelZooming) to **true** to zoom in and out using the mouse wheel. +* Pinch – Set [EnablePinchZooming](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartZoomSettings.html#Syncfusion_Blazor_Charts_StockChartZoomSettings_EnablePinchZooming) to **true** to zoom using pinch gestures on touch-enabled devices. - N> Pinch zooming is only usable in browsers that support multi-touch gestures. + N> Pinch zooming is supported only in browsers that enable multi-touch gestures. ```cshtml @@ -26,6 +26,7 @@ The stock chart can be zoomed in three different ways. @using System.Runtime.Serialization @inject NavigationManager NavigationManager @inject HttpClient Http + @if (DataSource != null) { @@ -49,7 +50,7 @@ The stock chart can be zoomed in three different ways. @code { public ChartData[] DataSource{ get; set; } - public class ChartData + public class ChartData { public DateTime date { get; set; } public double open { get; set; } @@ -57,28 +58,29 @@ The stock chart can be zoomed in three different ways. public double close { get; set; } public double high { get; set; } public double volume { get; set; } - } + } + protected override async Task OnInitializedAsync() - { - DataSource = await Http.GetFromJsonAsync(NavigationManager.BaseUri +"./chart-data.json"); - } + { + DataSource = await Http.GetFromJsonAsync(NavigationManager.BaseUri +"./chart-data.json"); + } } ``` ![Zooming in Blazor Stock Chart](images/zooming/stock-chart-zoom.PNG) -A zooming toolbar will show after zooming the stock chart, featuring options for **Zoom**, **Zoom In**, **Zoom Out**, **Pan**, and **Reset**. The **Pan** option allows you to pan the stock chart, while the **Reset** option allows you to reset the zoomed stock chart. +After zooming, the toolbar appears with options for **Zoom**, **Zoom In**, **Zoom Out**, **Pan**, and **Reset**. Pan enables panning of the chart, and Reset restores the original view. ## Modes -The [Mode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartZoomSettings.html#Syncfusion_Blazor_Charts_StockChartZoomSettings_Mode) property in [StockChartZoomSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartZoomSettings.html) determines whether the stock chart can scale along the horizontal or vertical axes. The default value of the mode is XY (both axis). +The [Mode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartZoomSettings.html#Syncfusion_Blazor_Charts_StockChartZoomSettings_Mode) property in [StockChartZoomSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartZoomSettings.html) determines whether scaling occurs along the horizontal axis, vertical axis, or both. The default value is XY (both axes). -There are three types of modes. +There are three modes: -* X - Allows us to zoom the chart horizontally. -* Y - Allows us to zoom the chart vertically. -* XY - Allows us to zoom the chart both vertically and horizontally. +* X – Enables horizontal zooming. +* Y – Enables vertical zooming. +* XY – Enables both horizontal and vertical zooming. ```cshtml @@ -87,6 +89,7 @@ There are three types of modes. @using System.Runtime.Serialization @inject NavigationManager NavigationManager @inject HttpClient Http + @if (DataSource != null) { @@ -122,9 +125,9 @@ There are three types of modes. } protected override async Task OnInitializedAsync() - { - DataSource = await Http.GetFromJsonAsync(NavigationManager.BaseUri +"./chart-data.json"); - } + { + DataSource = await Http.GetFromJsonAsync(NavigationManager.BaseUri +"./chart-data.json"); + } } ``` @@ -133,7 +136,7 @@ There are three types of modes. ## Toolbar -By default, zoom in, zoom out, pan, and reset buttons are available in the toolbar for zoomed stock chart. The [ToolbarItems](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartZoomSettings.html#Syncfusion_Blazor_Charts_StockChartZoomSettings_ToolbarItems) property specifies which tools should be displayed in the toolbar. +By default, Zoom In, Zoom Out, Pan, and Reset buttons appear in the toolbar after zooming. Use the [ToolbarItems](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartZoomSettings.html#Syncfusion_Blazor_Charts_StockChartZoomSettings_ToolbarItems) property to specify which tools to display. ```cshtml @@ -142,6 +145,7 @@ By default, zoom in, zoom out, pan, and reset buttons are available in the toolb @using System.Runtime.Serialization @inject NavigationManager NavigationManager @inject HttpClient Http + @if (DataSource != null) { @@ -179,9 +183,9 @@ By default, zoom in, zoom out, pan, and reset buttons are available in the toolb } protected override async Task OnInitializedAsync() - { - DataSource = await Http.GetFromJsonAsync(NavigationManager.BaseUri +"./chart-data.json"); - } + { + DataSource = await Http.GetFromJsonAsync(NavigationManager.BaseUri +"./chart-data.json"); + } } ``` @@ -190,7 +194,7 @@ By default, zoom in, zoom out, pan, and reset buttons are available in the toolb ## Enable pan -By using the [EnablePan](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartZoomSettings.html#Syncfusion_Blazor_Charts_StockChartZoomSettings_EnablePan) property, one can pan the zoomed stock chart without the help of toolbar items. +Use the [EnablePan](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartZoomSettings.html#Syncfusion_Blazor_Charts_StockChartZoomSettings_EnablePan) property to allow panning on a zoomed stock chart without relying on toolbar items. ```cshtml @@ -199,6 +203,7 @@ By using the [EnablePan](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor @using System.Runtime.Serialization @inject NavigationManager NavigationManager @inject HttpClient Http + @if (DataSource != null) { @@ -221,7 +226,6 @@ By using the [EnablePan](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor } @code { - public ChartData[] DataSource{ get; set; } public class ChartData @@ -235,9 +239,9 @@ By using the [EnablePan](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor } protected override async Task OnInitializedAsync() - { - DataSource = await Http.GetFromJsonAsync(NavigationManager.BaseUri +"./chart-data.json"); - } + { + DataSource = await Http.GetFromJsonAsync(NavigationManager.BaseUri +"./chart-data.json"); + } } ``` @@ -246,7 +250,7 @@ By using the [EnablePan](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor ## Enable scrollbar -The [EnableScrollbar](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartZoomSettings.html#Syncfusion_Blazor_Charts_StockChartZoomSettings_EnableScrollbar) property can be used to add a scrollbar to a zoomed stock chart. The stock chart can be panned or zoomed using this scrollbar. +Use the [EnableScrollbar](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartZoomSettings.html#Syncfusion_Blazor_Charts_StockChartZoomSettings_EnableScrollbar) property to add a scrollbar to a zoomed stock chart. The scrollbar allows panning and further zooming. ```cshtml @@ -255,6 +259,7 @@ The [EnableScrollbar](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Ch @using System.Runtime.Serialization @inject NavigationManager NavigationManager @inject HttpClient Http + @if (DataSource != null) { @@ -278,7 +283,6 @@ The [EnableScrollbar](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Ch } @code { - public ChartData[] DataSource{ get; set; } public class ChartData @@ -292,9 +296,9 @@ The [EnableScrollbar](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Ch } protected override async Task OnInitializedAsync() - { - DataSource = await Http.GetFromJsonAsync(NavigationManager.BaseUri +"./chart-data.json"); - } + { + DataSource = await Http.GetFromJsonAsync(NavigationManager.BaseUri +"./chart-data.json"); + } } ``` @@ -303,7 +307,7 @@ The [EnableScrollbar](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Ch ## Auto interval on zooming -The axis interval will be calculated automatically with respect to the zoomed range, if the [EnableAutoIntervalOnZooming](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartCommonAxis.html#Syncfusion_Blazor_Charts_StockChartCommonAxis_EnableAutoIntervalOnZooming) property is set to **true**. +Set [EnableAutoIntervalOnZooming](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartCommonAxis.html#Syncfusion_Blazor_Charts_StockChartCommonAxis_EnableAutoIntervalOnZooming) to **true** to calculate axis intervals automatically based on the zoomed range. ```cshtml @@ -312,6 +316,7 @@ The axis interval will be calculated automatically with respect to the zoomed ra @using System.Runtime.Serialization @inject NavigationManager NavigationManager @inject HttpClient Http + @if (DataSource != null) { @@ -335,7 +340,6 @@ The axis interval will be calculated automatically with respect to the zoomed ra } @code { - public ChartData[] DataSource{ get; set; } public class ChartData @@ -349,13 +353,13 @@ The axis interval will be calculated automatically with respect to the zoomed ra } protected override async Task OnInitializedAsync() - { - DataSource = await Http.GetFromJsonAsync(NavigationManager.BaseUri +"./chart-data.json"); - } + { + DataSource = await Http.GetFromJsonAsync(NavigationManager.BaseUri +"./chart-data.json"); + } } ``` ![Auto Interval on Zooming in Blazor Area Chart](images/zooming/stock-chart-autointerval.PNG) -N> Refer to our [Blazor Stock Charts](https://www.syncfusion.com/blazor-components/blazor-stock-chart) feature tour page for its groundbreaking feature representations and also explore our [Blazor Stock Chart Example](https://blazor.syncfusion.com/demos/stock-chart/stock-chart?theme=bootstrap5) to know various stock chart types and how to represent time-dependent data, showing trends at equal intervals. \ No newline at end of file +N> Refer to the [Blazor Stock Chart](https://www.syncfusion.com/blazor-components/blazor-stock-chart) feature tour page for feature overviews and the [Blazor Stock Chart example](https://blazor.syncfusion.com/demos/stock-chart/stock-chart?theme=bootstrap5) to explore chart types and time based data representation.