diff --git a/blazor/smith-chart/accessibility.md b/blazor/smith-chart/accessibility.md index 6356a9b3e7..eee28b4997 100644 --- a/blazor/smith-chart/accessibility.md +++ b/blazor/smith-chart/accessibility.md @@ -1,7 +1,7 @@ --- layout: post title: Accessibility in Blazor Smith Chart Component | Syncfusion -description: Checkout and learn here all about Accessibility using Keyboard navigation in Syncfusion Blazor Smith Chart component and more. +description: Check out and learn here all about Accessibility using Keyboard navigation in Syncfusion Blazor Smith Chart component and more. platform: Blazor control: Smith Chart documentation: ug @@ -9,20 +9,22 @@ documentation: ug # Accessibility in Blazor Smith Chart Component -The Blazor Smith 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 Smith Chart component is designed to meet major 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/), and [WAI-ARIA roles](https://www.w3.org/TR/wai-aria/#roles). These standards help ensure the component is usable by everyone, including people with disabilities. -The accessibility compliance for the Blazor Smith Chart component is outlined below. +## Accessibility Compliance + +The table below summarizes the accessibility features supported by the Blazor Smith Chart component: | Accessibility Criteria | Compatibility | | -- | -- | -| [WCAG 2.2 Support](../common/accessibility#accessibility-standards) | Yes | -| [Section 508 Support](../common/accessibility#accessibility-standards) | Yes | -| [Screen Reader Support](../common/accessibility#screen-reader-support) | Yes | -| [Right-To-Left Support](../common/accessibility#right-to-left-support) | Yes | -| [Color Contrast](../common/accessibility#color-contrast) | Yes | -| [Mobile Device Support](../common/accessibility#mobile-device-support) | Yes | -| [Keyboard Navigation Support](../common/accessibility#keyboard-navigation-support) |Yes | -| [Axe-core Accessibility Validation](../common/accessibility#ensuring-accessibility) | Yes | +| [WCAG 2.2 Support](../common/accessibility#accessibility-standards) | Yes | +| [Section 508 Support](../common/accessibility#accessibility-standards) | Yes | +| [Screen Reader Support](../common/accessibility#screen-reader-support) | Yes | +| [Right-To-Left Support](../common/accessibility#right-to-left-support) | Yes | +| [Color Contrast](../common/accessibility#color-contrast) | Yes | +| [Mobile Device Support](../common/accessibility#mobile-device-support) | Yes | +| [Keyboard Navigation Support](../common/accessibility#keyboard-navigation-support) | Yes | +| [Axe-core Accessibility Validation](../common/accessibility#ensuring-accessibility) | Yes | +
Yes - All features of the component meet the requirement.
Intermediate - Some features of the component do not meet the requirement.
@@ -37,40 +40,40 @@ The accessibility compliance for the Blazor Smith Chart component is outlined be
No - The component does not meet the requirement.
-## WAI-ARIA attributes +## WAI-ARIA Attributes -The Blazor Smith 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 Smith Chart component: +The Blazor Smith Chart component implements [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/patterns/alert/) patterns to enhance accessibility. The following ARIA roles and attributes are used: -* img (role) -* button (role) -* region (role) -* aria-label (attribute) -* aria-hidden (attribute) -* aria-pressed (attribute) +- `img` (role) +- `button` (role) +- `region` (role) +- `aria-label` (attribute) +- `aria-hidden` (attribute) +- `aria-pressed` (attribute) -## Keyboard interaction +## Keyboard Interaction -The Blazor Smith 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 Smith Chart component. +The component supports [keyboard interaction](https://www.w3.org/WAI/ARIA/apg/patterns/alert/#keyboardinteraction) guidelines, making it accessible for users who rely on assistive technologies or keyboard navigation. The following keyboard shortcuts are available: | Windows | Mac | Description | | --- | --- | --- | -| Tab | Tab | Moves the focus to the next element in the Smith Chart. | -| Shift + Tab | ⇧ + Tab | Moves the focus to the previous element in the Smith Chart. | -| ↓ | ↓ | Moves the focus to the data point right side from the selected point. | -| ↑ | ↑ | Moves the focus to the data point right side from the selected point. | -| ← | ← | Moves the focus to the next series in our Smith Chart component. | -| → | → | Moves the focus to the previous series in our Smith Chart component. | -| ↓ 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. | -| Enter or Space | Enter or Space | Toggles the visibility of the corresponding series. | -| Ctrl + P | ⌘ + P | Prints the Smith Chart. | +| Tab | Tab | Move focus to the next element in the Smith Chart. | +| Shift + Tab | ⇧ + Tab | Move focus to the previous element in the Smith Chart. | +| ↓ | ↓ | Move focus to the data point to the left of the selected point. | +| ↑ | ↑ | Move focus to the data point to the right of the selected point. | +| ← | ← | Move focus to the next series in the Smith Chart. | +| → | → | Move focus to the previous series in the Smith Chart. | +| ↓ or ← | ↓ or ← | Move focus to the legend to the left of the selected legend. | +| ↑ or → | ↑ or → | Move focus to the legend to the right of the selected legend. | +| Enter or Space | Enter or Space | Toggle the visibility of the corresponding series. | +| Ctrl + P | ⌘ + P | Print the Smith Chart. | -## Ensuring accessibility +## Ensuring Accessibility -The Blazor Smith Chart component's accessibility levels are ensured through an [axe-core](https://www.nuget.org/packages/Deque.AxeCore.Playwright) with playwright tests. +Accessibility is validated using [axe-core](https://www.nuget.org/packages/Deque.AxeCore.Playwright) with Playwright tests. -The accessibility compliance of the Blazor Smith Chart component is shown in the following sample. Open the [sample](https://blazor.syncfusion.com/accessibility/smith-chart) in a new window to evaluate the accessibility of the Blazor Smith Chart component with accessibility tools. +You can evaluate the accessibility of the Blazor Smith Chart component using this [sample](https://blazor.syncfusion.com/accessibility/smith-chart) in a new window with accessibility tools. -## See also +## 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/smith-chart/events.md b/blazor/smith-chart/events.md index 3cab7f19f2..24bde09705 100644 --- a/blazor/smith-chart/events.md +++ b/blazor/smith-chart/events.md @@ -1,7 +1,7 @@ --- layout: post title: Events in Blazor Smith Chart Component | Syncfusion -description: Checkout and learn here all about events in Syncfusion Blazor Smith Chart component and much more details. +description: Check out and learn here all about events in Syncfusion Blazor Smith Chart component and much more details. platform: Blazor control: Smith Chart documentation: ug @@ -9,9 +9,9 @@ documentation: ug # Events in Blazor Smith Chart Component -This section describes about the Smith Chart component's events that will be triggered when appropriate actions are performed. The events should be provided to the Smith Chart through the **SmithChartEvents** component. +This section describes the events triggered by the Smith Chart component when specific actions occur. Events are provided to the Smith Chart through the **SmithChartEvents** component. -The Smith Chart component supports the following events. +The Smith Chart component supports the following events: * [Loaded](#loaded) * [OnPrintComplete](#onprintcomplete) @@ -29,6 +29,7 @@ The Smith Chart component supports the following events. The [Loaded](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartEvents.html#Syncfusion_Blazor_Charts_SmithChartEvents_Loaded) event triggers after the Smith Chart is rendered. ```cshtml + @using Syncfusion.Blazor.Charts @@ -46,19 +47,22 @@ The [Loaded](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.Smit public double? Resistance { get; set; } public double? Reactance { get; set; } }; + public List FirstTransmissionData = new List { - new SmithChartData { Resistance= 10, Reactance= 25 }, - new SmithChartData { Resistance= 6, Reactance= 4.5 }, - new SmithChartData { Resistance= 3.5, Reactance= 1.6 }, - new SmithChartData { Resistance= 2, Reactance= 1.2 }, - new SmithChartData { Resistance= 1, Reactance= 0.8 }, - new SmithChartData { Resistance= 0, Reactance= 0.2 } + new SmithChartData { Resistance = 10, Reactance = 25 }, + new SmithChartData { Resistance = 6, Reactance = 4.5 }, + new SmithChartData { Resistance = 3.5, Reactance = 1.6 }, + new SmithChartData { Resistance = 2, Reactance = 1.2 }, + new SmithChartData { Resistance = 1, Reactance = 0.8 }, + new SmithChartData { Resistance = 0, Reactance = 0.2 } }; + public void SmithChartLoaded(SmithChartLoadedEventArgs args) { // Here you can customize your code. } } + ``` ## OnPrintComplete @@ -66,6 +70,7 @@ The [Loaded](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.Smit The `OnPrintComplete` event triggers after the Smith Chart is printed. ```cshtml + @using Syncfusion.Blazor.Charts @@ -80,28 +85,33 @@ The `OnPrintComplete` event triggers after the Smith Chart is printed. @code { public SfSmithChart SmithChart; + public class SmithChartData { public double? Resistance { get; set; } public double? Reactance { get; set; } }; + public List FirstTransmissionData = new List { - new SmithChartData { Resistance= 10, Reactance= 25 }, - new SmithChartData { Resistance= 6, Reactance= 4.5 }, - new SmithChartData { Resistance= 3.5, Reactance= 1.6 }, - new SmithChartData { Resistance= 2, Reactance= 1.2 }, - new SmithChartData { Resistance= 1, Reactance= 0.8 }, - new SmithChartData { Resistance= 0, Reactance= 0.2 } + new SmithChartData { Resistance = 10, Reactance = 25 }, + new SmithChartData { Resistance = 6, Reactance = 4.5 }, + new SmithChartData { Resistance = 3.5, Reactance = 1.6 }, + new SmithChartData { Resistance = 2, Reactance = 1.2 }, + new SmithChartData { Resistance = 1, Reactance = 0.8 }, + new SmithChartData { Resistance = 0, Reactance = 0.2 } }; + private async Task Print() { await SmithChart.PrintAsync(); } + public void PrintCompleted() { // Here you can customize your code. } } + ``` ## OnExportComplete @@ -109,6 +119,7 @@ The `OnPrintComplete` event triggers after the Smith Chart is printed. The [OnExportComplete](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartEvents.html#Syncfusion_Blazor_Charts_SmithChartEvents_OnExportComplete) event triggers after the Smith Chart is exported. ```cshtml + @using Syncfusion.Blazor.Charts @@ -126,39 +137,45 @@ The [OnExportComplete](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.C @code { public SfSmithChart SmithChart; + public class SmithChartData { public double? Resistance { get; set; } public double? Reactance { get; set; } }; + public List TransmissionData = new List { - new SmithChartData { Resistance= 10, Reactance= 25 }, - new SmithChartData { Resistance= 6, Reactance= 4.5 }, - new SmithChartData { Resistance= 3.5, Reactance= 1.6 }, - new SmithChartData { Resistance= 2, Reactance= 1.2 }, - new SmithChartData { Resistance= 1, Reactance= 0.8 }, - new SmithChartData { Resistance= 0, Reactance= 0.2 } + new SmithChartData { Resistance = 10, Reactance = 25 }, + new SmithChartData { Resistance = 6, Reactance = 4.5 }, + new SmithChartData { Resistance = 3.5, Reactance = 1.6 }, + new SmithChartData { Resistance = 2, Reactance = 1.2 }, + new SmithChartData { Resistance = 1, Reactance = 0.8 }, + new SmithChartData { Resistance = 0, Reactance = 0.2 } }; + private async Task Export() { await SmithChart.ExportAsync(ExportType.PNG, "SmithChart"); } + public void ExportCompleted(SmithChartExportEventArgs args) { // Here you can customize your code. } } + ``` ## AxisLabelRendering -Before rendering each axis label, the [AxisLabelRendering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartEvents.html#Syncfusion_Blazor_Charts_SmithChartEvents_AxisLabelRendering) event is triggered. The following arguments are present in this event: +Before rendering each axis label, the [AxisLabelRendering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartEvents.html#Syncfusion_Blazor_Charts_SmithChartEvents_AxisLabelRendering) event is triggered. Arguments include: * `Text` - Specifies the current axis label text. * `X` - Specifies the current axis label X position. * `Y` - Specifies the current axis label Y position. ```cshtml + @using Syncfusion.Blazor.Charts @@ -176,30 +193,34 @@ Before rendering each axis label, the [AxisLabelRendering](https://help.syncfusi public double? Resistance { get; set; } public double? Reactance { get; set; } }; + public List FirstTransmissionData = new List { - new SmithChartData { Resistance= 10, Reactance= 25 }, - new SmithChartData { Resistance= 6, Reactance= 4.5 }, - new SmithChartData { Resistance= 3.5, Reactance= 1.6 }, - new SmithChartData { Resistance= 2, Reactance= 1.2 }, - new SmithChartData { Resistance= 1, Reactance= 0.8 }, - new SmithChartData { Resistance= 0, Reactance= 0.2 } + new SmithChartData { Resistance = 10, Reactance = 25 }, + new SmithChartData { Resistance = 6, Reactance = 4.5 }, + new SmithChartData { Resistance = 3.5, Reactance = 1.6 }, + new SmithChartData { Resistance = 2, Reactance = 1.2 }, + new SmithChartData { Resistance = 1, Reactance = 0.8 }, + new SmithChartData { Resistance = 0, Reactance = 0.2 } }; + public void AxisLabelCustomization(SmithChartAxisLabelRenderEventArgs args) { // Here you can customize your code } } + ``` ## LegendRendering -Before rendering each legend, the [LegendRendering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartEvents.html#Syncfusion_Blazor_Charts_SmithChartEvents_LegendRendering) event is triggered. The following arguments are present in this event: +Before rendering each legend, the [LegendRendering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartEvents.html#Syncfusion_Blazor_Charts_SmithChartEvents_LegendRendering) event is triggered. Arguments include: * `Text` - Specifies the current legend text. * `Shape` - Customize the shape of the legend. * `Fill` - Specifies the legend shape color. ```cshtml + @using Syncfusion.Blazor.Charts @@ -218,30 +239,34 @@ Before rendering each legend, the [LegendRendering](https://help.syncfusion.com/ public double? Resistance { get; set; } public double? Reactance { get; set; } }; + public List FirstTransmissionData = new List { - new SmithChartData { Resistance= 10, Reactance= 25 }, - new SmithChartData { Resistance= 6, Reactance= 4.5 }, - new SmithChartData { Resistance= 3.5, Reactance= 1.6 }, - new SmithChartData { Resistance= 2, Reactance= 1.2 }, - new SmithChartData { Resistance= 1, Reactance= 0.8 }, - new SmithChartData { Resistance= 0, Reactance= 0.2 } + new SmithChartData { Resistance = 10, Reactance = 25 }, + new SmithChartData { Resistance = 6, Reactance = 4.5 }, + new SmithChartData { Resistance = 3.5, Reactance = 1.6 }, + new SmithChartData { Resistance = 2, Reactance = 1.2 }, + new SmithChartData { Resistance = 1, Reactance = 0.8 }, + new SmithChartData { Resistance = 0, Reactance = 0.2 } }; + public void LegendCustomization(SmithChartLegendRenderEventArgs args) { // Here you can customize your code. } } + ``` ## SeriesRender -Before rendering each series, the [SeriesRender](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartEvents.html#Syncfusion_Blazor_Charts_SmithChartEvents_SeriesRender) event is triggered. The following arguments are present in this event: +Before rendering each series, the [SeriesRender](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartEvents.html#Syncfusion_Blazor_Charts_SmithChartEvents_SeriesRender) event is triggered. Arguments include: * `Text` - Specifies the current series text. * `Index` - Specifies the current series index. * `Fill` - Specifies the current series color. ```cshtml + @using Syncfusion.Blazor.Charts @@ -259,30 +284,34 @@ Before rendering each series, the [SeriesRender](https://help.syncfusion.com/cr/ public double? Resistance { get; set; } public double? Reactance { get; set; } }; + public List FirstTransmissionData = new List { - new SmithChartData { Resistance= 10, Reactance= 25 }, - new SmithChartData { Resistance= 6, Reactance= 4.5 }, - new SmithChartData { Resistance= 3.5, Reactance= 1.6 }, - new SmithChartData { Resistance= 2, Reactance= 1.2 }, - new SmithChartData { Resistance= 1, Reactance= 0.8 }, - new SmithChartData { Resistance= 0, Reactance= 0.2 } + new SmithChartData { Resistance = 10, Reactance = 25 }, + new SmithChartData { Resistance = 6, Reactance = 4.5 }, + new SmithChartData { Resistance = 3.5, Reactance = 1.6 }, + new SmithChartData { Resistance = 2, Reactance = 1.2 }, + new SmithChartData { Resistance = 1, Reactance = 0.8 }, + new SmithChartData { Resistance = 0, Reactance = 0.2 } }; + public void SeriesCustomization(SmithChartSeriesRenderEventArgs args) { // Here you can customize your code. } } + ``` ## TitleRendering -The [TitleRendering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartEvents.html#Syncfusion_Blazor_Charts_SmithChartEvents_TitleRendering) event triggers before the title is rendered. The following arguments are present in this event: +The [TitleRendering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartEvents.html#Syncfusion_Blazor_Charts_SmithChartEvents_TitleRendering) event triggers before the title is rendered. Arguments include: * `Text` - Specifies the current title text. * `X` - Specifies the current title X position. * `Y` - Specifies the current title Y position. ```cshtml + @using Syncfusion.Blazor.Charts @@ -302,30 +331,34 @@ The [TitleRendering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Cha public double? Resistance { get; set; } public double? Reactance { get; set; } }; + public List FirstTransmissionData = new List { - new SmithChartData { Resistance= 10, Reactance= 25 }, - new SmithChartData { Resistance= 6, Reactance= 4.5 }, - new SmithChartData { Resistance= 3.5, Reactance= 1.6 }, - new SmithChartData { Resistance= 2, Reactance= 1.2 }, - new SmithChartData { Resistance= 1, Reactance= 0.8 }, - new SmithChartData { Resistance= 0, Reactance= 0.2 } + new SmithChartData { Resistance = 10, Reactance = 25 }, + new SmithChartData { Resistance = 6, Reactance = 4.5 }, + new SmithChartData { Resistance = 3.5, Reactance = 1.6 }, + new SmithChartData { Resistance = 2, Reactance = 1.2 }, + new SmithChartData { Resistance = 1, Reactance = 0.8 }, + new SmithChartData { Resistance = 0, Reactance = 0.2 } }; + public void TitleCustomization(TitleRenderEventArgs args) { // Here you can customize your code. } } + ``` ## SubtitleRendering -The [SubtitleRendering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartEvents.html#Syncfusion_Blazor_Charts_SmithChartEvents_SubtitleRendering) event triggers before the subtitle is rendered. The following arguments are present in this event: +The [SubtitleRendering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartEvents.html#Syncfusion_Blazor_Charts_SmithChartEvents_SubtitleRendering) event triggers before the subtitle is rendered. Arguments include: * `Text` - Specifies the current subtitle text. * `X` - Specifies the current subtitle X position. * `Y` - Specifies the current subtitle Y position. ```cshtml + @using Syncfusion.Blazor.Charts @@ -346,32 +379,35 @@ The [SubtitleRendering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor. public double? Resistance { get; set; } public double? Reactance { get; set; } }; + public List FirstTransmissionData = new List { - new SmithChartData { Resistance= 10, Reactance= 25 }, - new SmithChartData { Resistance= 6, Reactance= 4.5 }, - new SmithChartData { Resistance= 3.5, Reactance= 1.6 }, - new SmithChartData { Resistance= 2, Reactance= 1.2 }, - new SmithChartData { Resistance= 1, Reactance= 0.8 }, - new SmithChartData { Resistance= 0, Reactance= 0.2 } + new SmithChartData { Resistance = 10, Reactance = 25 }, + new SmithChartData { Resistance = 6, Reactance = 4.5 }, + new SmithChartData { Resistance = 3.5, Reactance = 1.6 }, + new SmithChartData { Resistance = 2, Reactance = 1.2 }, + new SmithChartData { Resistance = 1, Reactance = 0.8 }, + new SmithChartData { Resistance = 0, Reactance = 0.2 } }; + public void SubtitleCustomization(SubTitleRenderEventArgs args) { // Here you can customize your code. } } + ``` ## TextRendering -The [TextRendering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartEvents.html#Syncfusion_Blazor_Charts_SmithChartEvents_TextRendering) event triggers before the datalabel text is rendered. The following arguments are present in this event: +The [TextRendering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartEvents.html#Syncfusion_Blazor_Charts_SmithChartEvents_TextRendering) event triggers before the data label text is rendered. Arguments include: * `Text` - Specifies the current text of the label. -* `X` - Specifies the current datalabel X position. -* `Y` - Specifies the current datalabel Y position. -* `PointIndex` - Specifies the current point index of the datalabel. -* `SeriesIndex` - Specifies the current series index of the datalabel. -* `Border` - Specifies the current datalabel border. -* `Color` - Specifies the current datalabel color. +* `X` - Specifies the current data label X position. +* `Y` - Specifies the current data label Y position. +* `PointIndex` - Specifies the current point index of the data label. +* `SeriesIndex` - Specifies the current series index of the data label. +* `Border` - Specifies the current data label border. +* `Color` - Specifies the current data label color. ```cshtml @using Syncfusion.Blazor.Charts @@ -394,29 +430,33 @@ The [TextRendering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Char public double? Resistance { get; set; } public double? Reactance { get; set; } }; + public List FirstTransmissionData = new List { - new SmithChartData { Resistance= 10, Reactance= 25 }, - new SmithChartData { Resistance= 6, Reactance= 4.5 }, - new SmithChartData { Resistance= 3.5, Reactance= 1.6 }, - new SmithChartData { Resistance= 2, Reactance= 1.2 }, - new SmithChartData { Resistance= 1, Reactance= 0.8 }, - new SmithChartData { Resistance= 0, Reactance= 0.2 } + new SmithChartData { Resistance = 10, Reactance = 25 }, + new SmithChartData { Resistance = 6, Reactance = 4.5 }, + new SmithChartData { Resistance = 3.5, Reactance = 1.6 }, + new SmithChartData { Resistance = 2, Reactance = 1.2 }, + new SmithChartData { Resistance = 1, Reactance = 0.8 }, + new SmithChartData { Resistance = 0, Reactance = 0.2 } }; + public void DataLabelCustomization(SmithChartTextRenderEventArgs args) { // Here you can customize your code. } } + ``` ## SizeChanged -The [SizeChanged](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartEvents.html#Syncfusion_Blazor_Charts_SmithChartEvents_SizeChanged) event triggers when the browser window is resized. The following arguments are present in this event: +The [SizeChanged](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartEvents.html#Syncfusion_Blazor_Charts_SmithChartEvents_SizeChanged) event triggers when the browser window is resized. Arguments include: * `CurrentSize` - Specifies the current size of the Chart. * `PreviousSize` - Specifies the previous size of the Chart. ```cshtml + @using Syncfusion.Blazor.Charts @@ -434,17 +474,20 @@ The [SizeChanged](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts public double? Resistance { get; set; } public double? Reactance { get; set; } }; + public List FirstTransmissionData = new List { - new SmithChartData { Resistance= 10, Reactance= 25 }, - new SmithChartData { Resistance= 6, Reactance= 4.5 }, - new SmithChartData { Resistance= 3.5, Reactance= 1.6 }, - new SmithChartData { Resistance= 2, Reactance= 1.2 }, - new SmithChartData { Resistance= 1, Reactance= 0.8 }, - new SmithChartData { Resistance= 0, Reactance= 0.2 } + new SmithChartData { Resistance = 10, Reactance = 25 }, + new SmithChartData { Resistance = 6, Reactance = 4.5 }, + new SmithChartData { Resistance = 3.5, Reactance = 1.6 }, + new SmithChartData { Resistance = 2, Reactance = 1.2 }, + new SmithChartData { Resistance = 1, Reactance = 0.8 }, + new SmithChartData { Resistance = 0, Reactance = 0.2 } }; + public void Resized(SmithChartResizeEventArgs args) { // Here you can customize your code. } } -``` \ No newline at end of file + +``` diff --git a/blazor/smith-chart/smith-chart-axis.md b/blazor/smith-chart/smith-chart-axis.md index a3bb74a0cc..0153214cfa 100644 --- a/blazor/smith-chart/smith-chart-axis.md +++ b/blazor/smith-chart/smith-chart-axis.md @@ -1,7 +1,7 @@ --- layout: post title: Axis in Blazor Smith Chart Component | Syncfusion -description: Checkout and learn here all about axis in Syncfusion Blazor Smith Chart component and much more details. +description: Check out and learn how to configure and customize axis in Syncfusion Blazor Smith Chart component for better visualization. platform: Blazor control: Smith Chart documentation: ug @@ -9,20 +9,21 @@ documentation: ug # Axis in Blazor Smith Chart Component -Smith Chart supports two different types of axes. They are: -* **Horizontal Axis** - The axis is drawn as a straight line in the horizontal direction of the Smith Chart. -* **Radial Axis** - The axis is drawn as a circular path. +The Smith Chart provides two types of axes: +* **Horizontal Axis** – Drawn as a straight line along the horizontal direction of the Smith Chart. +* **Radial Axis** – Drawn as a circular path. ## Labels Customization -Axis labels are used to indicate what type of data is bound for the Smith Chart. The use of axis labels makes it easy to determine at which interval chart is being rendered. The axis labels for the horizontal and radial axes can be customized using the properties listed as following. +Axis labels indicate the type of data bound to the Smith Chart, making it easier to interpret chart intervals. Labels for both horizontal and radial axes can be customized using the following properties: -* [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartHorizontalAxis.html#Syncfusion_Blazor_Charts_SmithChartHorizontalAxis_Visible) - Used to specify the visibility of the axis. -* [LabelPosition](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartHorizontalAxis.html#Syncfusion_Blazor_Charts_SmithChartHorizontalAxis_LabelPosition) - Used to place labels either inside or outside the axis line. -* [LabelIntersectAction](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartHorizontalAxis.html#Syncfusion_Blazor_Charts_SmithChartHorizontalAxis_LabelIntersectAction) - Used to hide labels when intersecting. -* [SmithChartRadialAxisLabelStyle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartRadialAxisLabelStyle.html) and [SmithChartHorizontalAxisLabelStyle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartHorizontalAxisLabelStyle.html) - Used to customize properties such as [FontFamily](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartCommonFont.html#Syncfusion_Blazor_Charts_SmithChartCommonFont_FontFamily), [FontWeight](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartCommonFont.html#Syncfusion_Blazor_Charts_SmithChartCommonFont_FontWeight), [FontStyle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartCommonFont.html#Syncfusion_Blazor_Charts_SmithChartCommonFont_FontStyle), [Opacity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartCommonFont.html#Syncfusion_Blazor_Charts_SmithChartCommonFont_Opacity), [Color](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartCommonFont.html#Syncfusion_Blazor_Charts_SmithChartCommonFont_Color), and [Size](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartCommonFont.html#Syncfusion_Blazor_Charts_SmithChartCommonFont_Size). +* [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartHorizontalAxis.html#Syncfusion_Blazor_Charts_SmithChartHorizontalAxis_Visible) – Specifies the visibility of the axis. +* [LabelPosition](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartHorizontalAxis.html#Syncfusion_Blazor_Charts_SmithChartHorizontalAxis_LabelPosition) – Places labels inside or outside the axis line. +* [LabelIntersectAction](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartHorizontalAxis.html#Syncfusion_Blazor_Charts_SmithChartHorizontalAxis_LabelIntersectAction) – Hides labels when they intersect. +* [SmithChartRadialAxisLabelStyle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartRadialAxisLabelStyle.html) and [SmithChartHorizontalAxisLabelStyle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartHorizontalAxisLabelStyle.html) – Customize label font properties such as [FontFamily](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartCommonFont.html#Syncfusion_Blazor_Charts_SmithChartCommonFont_FontFamily), [FontWeight](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartCommonFont.html#Syncfusion_Blazor_Charts_SmithChartCommonFont_FontWeight), [FontStyle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartCommonFont.html#Syncfusion_Blazor_Charts_SmithChartCommonFont_FontStyle), [Opacity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartCommonFont.html#Syncfusion_Blazor_Charts_SmithChartCommonFont_Opacity), [Color](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartCommonFont.html#Syncfusion_Blazor_Charts_SmithChartCommonFont_Color), and [Size](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartCommonFont.html#Syncfusion_Blazor_Charts_SmithChartCommonFont_Size). ```cshtml + @using Syncfusion.Blazor.Charts @@ -55,33 +56,36 @@ Axis labels are used to indicate what type of data is bound for the Smith Chart. public double? Resistance { get; set; } public double? Reactance { get; set; } }; + public List TransmissionData = new List { - new SmithChartData { Resistance= 10, Reactance= 25 }, - new SmithChartData { Resistance= 6, Reactance= 4.5 }, - new SmithChartData { Resistance= 3.5, Reactance= 1.6 }, - new SmithChartData { Resistance= 2, Reactance= 1.2 }, - new SmithChartData { Resistance= 1, Reactance= 0.8 }, - new SmithChartData { Resistance= 0, Reactance= 0.2 } + new SmithChartData { Resistance = 10, Reactance = 25 }, + new SmithChartData { Resistance = 6, Reactance = 4.5 }, + new SmithChartData { Resistance = 3.5, Reactance = 1.6 }, + new SmithChartData { Resistance = 2, Reactance = 1.2 }, + new SmithChartData { Resistance = 1, Reactance = 0.8 }, + new SmithChartData { Resistance = 0, Reactance = 0.2 } }; } + ``` ![Blazor Smith Chart Axis with Custom Label](./images/Axis/blazor-smith-chart-axis-with-custom-label.png) ## Gridlines -Gridlines on the horizontal and the radial axes can be used to make data in a chart easier to see. Gridlines extend from any horizontal or radial axis around the plot area of the Smith Chart. Both the horizontal and radial axes support major and minor gridlines. Major gridlines are drawn from the position in which the labels are rendered. Minor gridlines are drawn between two major gridlines using the [Count](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartHorizontalMinorGridLines.html#Syncfusion_Blazor_Charts_SmithChartHorizontalMinorGridLines_Count) property in the minor gridlines. +Gridlines on the horizontal and radial axes improve data readability. Gridlines extend from the axes around the plot area. Both axes support major and minor gridlines. Major gridlines are drawn at label positions, while minor gridlines are drawn between major gridlines using the [Count](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartHorizontalMinorGridLines.html#Syncfusion_Blazor_Charts_SmithChartHorizontalMinorGridLines_Count) property. -The following properties can be customized in both the major and minor gridlines. +The following properties can be customized for both major and minor gridlines: -* [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartHorizontalMinorGridLines.html#Syncfusion_Blazor_Charts_SmithChartHorizontalMinorGridLines_Width) - Used to customize the width of the gridlines. -* [DashArray](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartMinorGridLines.html#Syncfusion_Blazor_Charts_SmithChartMinorGridLines_DashArray) - Used to customize whether the gridline has to render as normal line or dashed line. -* [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartHorizontalMinorGridLines.html#Syncfusion_Blazor_Charts_SmithChartHorizontalMinorGridLines_Visible) - Used to enable or disable the visibility of the gridlines. -* [Opacity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartHorizontalMajorGridLines.html#Syncfusion_Blazor_Charts_SmithChartHorizontalMajorGridLines_Opacity) - Used to customize the opacity of the major gridlines. -* [Color](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartMajorGridLines.html#Syncfusion_Blazor_Charts_SmithChartMajorGridLines_Color) - Used to customize the color of the major gridlines. -* [Count](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartHorizontalMinorGridLines.html#Syncfusion_Blazor_Charts_SmithChartHorizontalMinorGridLines_Count) - Used to customize the count of the minor gridlines. +* [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartHorizontalMinorGridLines.html#Syncfusion_Blazor_Charts_SmithChartHorizontalMinorGridLines_Width) – Sets the gridline width. +* [DashArray](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartMinorGridLines.html#Syncfusion_Blazor_Charts_SmithChartMinorGridLines_DashArray) – Renders gridlines as solid or dashed lines. +* [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartHorizontalMinorGridLines.html#Syncfusion_Blazor_Charts_SmithChartHorizontalMinorGridLines_Visible) – Enables or disables gridline visibility. +* [Opacity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartHorizontalMajorGridLines.html#Syncfusion_Blazor_Charts_SmithChartHorizontalMajorGridLines_Opacity) – Sets the opacity of major gridlines. +* [Color](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartMajorGridLines.html#Syncfusion_Blazor_Charts_SmithChartMajorGridLines_Color) – Sets the color of major gridlines. +* [Count](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartHorizontalMinorGridLines.html#Syncfusion_Blazor_Charts_SmithChartHorizontalMinorGridLines_Count) – Sets the number of minor gridlines. ```cshtml + @using Syncfusion.Blazor.Charts @@ -109,29 +113,32 @@ The following properties can be customized in both the major and minor gridlines public double? Resistance { get; set; } public double? Reactance { get; set; } }; + public List TransmissionData = new List { - new SmithChartData { Resistance= 10, Reactance= 25 }, - new SmithChartData { Resistance= 6, Reactance= 4.5 }, - new SmithChartData { Resistance= 3.5, Reactance= 1.6 }, - new SmithChartData { Resistance= 2, Reactance= 1.2 }, - new SmithChartData { Resistance= 1, Reactance= 0.8 }, - new SmithChartData { Resistance= 0, Reactance= 0.2 } + new SmithChartData { Resistance = 10, Reactance = 25 }, + new SmithChartData { Resistance = 6, Reactance = 4.5 }, + new SmithChartData { Resistance = 3.5, Reactance = 1.6 }, + new SmithChartData { Resistance = 2, Reactance = 1.2 }, + new SmithChartData { Resistance = 1, Reactance = 0.8 }, + new SmithChartData { Resistance = 0, Reactance = 0.2 } }; } + ``` ![Blazor Smith Chart with GridLines](./images/Axis/blazor-smith-chart-with-gridlines.png) ## Axis Line -By default, the visibility of the axis line is **true**. Its visibility can be changed using the [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartHorizontalAxisLine.html#Syncfusion_Blazor_Charts_SmithChartHorizontalAxisLine_Visible) property. Other than the visibility, the following properties can be used to customize the axis line. +The axis line is visible by default. Its visibility can be changed using the [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartHorizontalAxisLine.html#Syncfusion_Blazor_Charts_SmithChartHorizontalAxisLine_Visible) property. The following properties are available for customizing the axis line: -* [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartAxisLine.html#Syncfusion_Blazor_Charts_SmithChartAxisLine_Width) - Used to customize the width of the axis line. -* [DashArray](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartAxisLine.html#Syncfusion_Blazor_Charts_SmithChartAxisLine_DashArray) - Used to render the axis line as dashed line. -* [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartHorizontalAxisLine.html#Syncfusion_Blazor_Charts_SmithChartHorizontalAxisLine_Visible) - Used to enable or disable the visibility of the axis line. -* [Color](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartAxisLine.html#Syncfusion_Blazor_Charts_SmithChartAxisLine_Color) - Used to customize the axis line color. +* [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartAxisLine.html#Syncfusion_Blazor_Charts_SmithChartAxisLine_Width) – Sets the axis line width. +* [DashArray](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartAxisLine.html#Syncfusion_Blazor_Charts_SmithChartAxisLine_DashArray) – Renders the axis line as a dashed line. +* [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartHorizontalAxisLine.html#Syncfusion_Blazor_Charts_SmithChartHorizontalAxisLine_Visible) – Enables or disables axis line visibility. +* [Color](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartAxisLine.html#Syncfusion_Blazor_Charts_SmithChartAxisLine_Color) – Sets the axis line color. ```cshtml + @using Syncfusion.Blazor.Charts @@ -155,15 +162,17 @@ By default, the visibility of the axis line is **true**. Its visibility can be c public double? Resistance { get; set; } public double? Reactance { get; set; } }; + public List TransmissionData = new List { - new SmithChartData { Resistance= 10, Reactance= 25 }, - new SmithChartData { Resistance= 6, Reactance= 4.5 }, - new SmithChartData { Resistance= 3.5, Reactance= 1.6 }, - new SmithChartData { Resistance= 2, Reactance= 1.2 }, - new SmithChartData { Resistance= 1, Reactance= 0.8 }, - new SmithChartData { Resistance= 0, Reactance= 0.2 } + new SmithChartData { Resistance = 10, Reactance = 25 }, + new SmithChartData { Resistance = 6, Reactance = 4.5 }, + new SmithChartData { Resistance = 3.5, Reactance = 1.6 }, + new SmithChartData { Resistance = 2, Reactance = 1.2 }, + new SmithChartData { Resistance = 1, Reactance = 0.8 }, + new SmithChartData { Resistance = 0, Reactance = 0.2 } }; } + ``` -![Blazor Smith Chart with Custom Axis Line](./images/Axis/blazor-smith-chart-custom-axis-line.png) \ No newline at end of file +![Blazor Smith Chart with Custom Axis Line](./images/Axis/blazor-smith-chart-custom-axis-line.png) diff --git a/blazor/smith-chart/smith-chart-dimensions.md b/blazor/smith-chart/smith-chart-dimensions.md index 6de9f4fe65..cc6b7a4202 100644 --- a/blazor/smith-chart/smith-chart-dimensions.md +++ b/blazor/smith-chart/smith-chart-dimensions.md @@ -1,7 +1,7 @@ --- layout: post title: Dimensions in Blazor Smith Chart Component | Syncfusion -description: Checkout and learn here all about dimensions in Syncfusion Blazor Smith Chart component and much more. +description: Check out and learn how to set and customize chart dimensions in Syncfusion Blazor Smith Chart component for optimized layout. platform: Blazor control: Smith Chart documentation: ug @@ -16,9 +16,10 @@ The dimensions of the Smith Chart can be modified in the following ways. ## Using CSS -To set the size using CSS, add an [ID](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfSmithChart.html#Syncfusion_Blazor_Charts_SfSmithChart_ID) to the `SfSmithChart` tag, and set the width and the height of the Smith Chart in the style tag as following. +To set the chart size with CSS, assign an [ID](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfSmithChart.html#Syncfusion_Blazor_Charts_SfSmithChart_ID) to the `SfSmithChart` tag and define the width and height in a style block, as shown below. ```cshtml + @using Syncfusion.Blazor.Charts @@ -41,28 +42,31 @@ To set the size using CSS, add an [ID](https://help.syncfusion.com/cr/blazor/Syn public double? Resistance { get; set; } public double? Reactance { get; set; } }; + public List TransmissionData = new List { - new SmithChartData { Resistance= 10, Reactance= 25 }, - new SmithChartData { Resistance= 6, Reactance= 4.5 }, - new SmithChartData { Resistance= 3.5, Reactance= 1.6 }, - new SmithChartData { Resistance= 2, Reactance= 1.2 }, - new SmithChartData { Resistance= 1, Reactance= 0.8 }, - new SmithChartData { Resistance= 0, Reactance= 0.2 } + new SmithChartData { Resistance = 10, Reactance = 25 }, + new SmithChartData { Resistance = 6, Reactance = 4.5 }, + new SmithChartData { Resistance = 3.5, Reactance = 1.6 }, + new SmithChartData { Resistance = 2, Reactance = 1.2 }, + new SmithChartData { Resistance = 1, Reactance = 0.8 }, + new SmithChartData { Resistance = 0, Reactance = 0.2 } }; } + ``` ![Dimensions in Blazor Smith Chart via CSS](./images/Dimension/blazor-smith-chart-dimensions.png) ## Using API -The width and the height of the Smith Chart can also be set directly using the [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfSmithChart.html#Syncfusion_Blazor_Charts_SfSmithChart_Width) and the [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfSmithChart.html#Syncfusion_Blazor_Charts_SfSmithChart_Height) properties respectively. It can be in pixel or in percentage. +The width and height can also be set directly using the [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfSmithChart.html#Syncfusion_Blazor_Charts_SfSmithChart_Width) and [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfSmithChart.html#Syncfusion_Blazor_Charts_SfSmithChart_Height) properties. These values may be specified in pixels or as a percentage. -### In Pixel +### In Pixels -The [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfSmithChart.html#Syncfusion_Blazor_Charts_SfSmithChart_Width) and the [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfSmithChart.html#Syncfusion_Blazor_Charts_SfSmithChart_Height) properties in the Smith Chart can be directly given in pixels, as following. +Set the `Width` and `Height` properties in pixels to define the exact size of the chart. ```cshtml + @using Syncfusion.Blazor.Charts @@ -78,24 +82,27 @@ The [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfSmi public double? Resistance { get; set; } public double? Reactance { get; set; } }; + public List TransmissionData = new List { - new SmithChartData { Resistance= 10, Reactance= 25 }, - new SmithChartData { Resistance= 6, Reactance= 4.5 }, - new SmithChartData { Resistance= 3.5, Reactance= 1.6 }, - new SmithChartData { Resistance= 2, Reactance= 1.2 }, - new SmithChartData { Resistance= 1, Reactance= 0.8 }, - new SmithChartData { Resistance= 0, Reactance= 0.2 } + new SmithChartData { Resistance = 10, Reactance = 25 }, + new SmithChartData { Resistance = 6, Reactance = 4.5 }, + new SmithChartData { Resistance = 3.5, Reactance = 1.6 }, + new SmithChartData { Resistance = 2, Reactance = 1.2 }, + new SmithChartData { Resistance = 1, Reactance = 0.8 }, + new SmithChartData { Resistance = 0, Reactance = 0.2 } }; } + ``` ![Changing Blazor Smith Chart Dimensions in pixel](./images/Dimension/blazor-smith-chart-dimensions.png) -### In percentage +### In Percentage -The Smith Chart's [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfSmithChart.html#Syncfusion_Blazor_Charts_SfSmithChart_Width) and [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfSmithChart.html#Syncfusion_Blazor_Charts_SfSmithChart_Height) properties can be directly given in percentage, as shown in the following. The component will be rendered as a percentage of its container size. +The `Width` and `Height` properties may also be specified as percentages. In this case, the chart scales relative to its container. ```cshtml + @using Syncfusion.Blazor.Charts
@@ -115,14 +122,15 @@ The Smith Chart's [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazo }; public List FirstTransmissionData = new List { - new SmithChartData { Resistance= 10, Reactance= 25 }, - new SmithChartData { Resistance= 6, Reactance= 4.5 }, - new SmithChartData { Resistance= 3.5, Reactance= 1.6 }, - new SmithChartData { Resistance= 2, Reactance= 1.2 }, - new SmithChartData { Resistance= 1, Reactance= 0.8 }, - new SmithChartData { Resistance= 0, Reactance= 0.2 } + new SmithChartData { Resistance = 10, Reactance = 25 }, + new SmithChartData { Resistance = 6, Reactance = 4.5 }, + new SmithChartData { Resistance = 3.5, Reactance = 1.6 }, + new SmithChartData { Resistance = 2, Reactance = 1.2 }, + new SmithChartData { Resistance = 1, Reactance = 0.8 }, + new SmithChartData { Resistance = 0, Reactance = 0.2 } }; } + ``` -![Changing Blazor Smith Chart Dimensions in Percentage](./images/Dimension/blazor-smith-chart-dimensions.png) \ No newline at end of file +![Changing Blazor Smith Chart Dimensions in Percentage](./images/Dimension/blazor-smith-chart-dimensions.png) diff --git a/blazor/smith-chart/smith-chart-legend.md b/blazor/smith-chart/smith-chart-legend.md index b6929c2294..761c1220bd 100644 --- a/blazor/smith-chart/smith-chart-legend.md +++ b/blazor/smith-chart/smith-chart-legend.md @@ -1,7 +1,7 @@ --- layout: post title: Legend in Blazor Smith Chart Component | Syncfusion -description: Checkout and learn here all about Legend in Syncfusion Blazor Smith Chart component and much more details. +description: Check out and learn how to configure and customize Legend in Syncfusion Blazor Smith Chart component. platform: Blazor control: Smith Chart documentation: ug @@ -9,13 +9,14 @@ documentation: ug # Legend in Blazor Smith Chart Component -In the Smith Chart, a legend is a key containing symbols and descriptions. It can be interpreted in various colors, shapes, or other identifiers based on the data, and it provides valuable information for interpreting what the Smith Chart is displaying. In simple words, the legend is used to denote the series rendered in the Smith Chart. +In the Smith Chart, the legend displays symbols and descriptions that help interpret the chart's data. The legend uses colors, shapes, or other identifiers to represent each series rendered in the Smith Chart. ## Position -By default, the visibility of the legend is **false**. To enable the legend, set the [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartLegendSettings.html#Syncfusion_Blazor_Charts_SmithChartLegendSettings_Visible) property to **true** in the [SmithChartLegendSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartLegendSettings.html). The default position for the legend is **Bottom**. By using the [Position](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartLegendSettings.html#Syncfusion_Blazor_Charts_SmithChartLegendSettings_Position) property, the position of the legend can be changed. The legend can be placed on the Smith Chart's bottom, top, right, or left side. +By default, the legend is not visible. To display the legend, set the [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartLegendSettings.html#Syncfusion_Blazor_Charts_SmithChartLegendSettings_Visible) property to **true** in [SmithChartLegendSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartLegendSettings.html). The default legend position is **Bottom**. Use the [Position](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartLegendSettings.html#Syncfusion_Blazor_Charts_SmithChartLegendSettings_Position) property to place the legend at the bottom, top, right, or left of the Smith Chart. ```cshtml + @using Syncfusion.Blazor.Charts @@ -33,31 +34,35 @@ By default, the visibility of the legend is **false**. To enable the legend, set public double? Resistance { get; set; } public double? Reactance { get; set; } }; + public List FirstTransmissionData = new List { - new SmithChartData { Resistance= 10, Reactance= 25 }, - new SmithChartData { Resistance= 6, Reactance= 4.5 }, - new SmithChartData { Resistance= 3.5, Reactance= 1.6 }, - new SmithChartData { Resistance= 2, Reactance= 1.2 }, - new SmithChartData { Resistance= 1, Reactance= 0.8 }, - new SmithChartData { Resistance= 0, Reactance= 0.2 } + new SmithChartData { Resistance = 10, Reactance = 25 }, + new SmithChartData { Resistance = 6, Reactance = 4.5 }, + new SmithChartData { Resistance = 3.5, Reactance = 1.6 }, + new SmithChartData { Resistance = 2, Reactance = 1.2 }, + new SmithChartData { Resistance = 1, Reactance = 0.8 }, + new SmithChartData { Resistance = 0, Reactance = 0.2 } }; + public List SecondTransmissionData = new List { - new SmithChartData { Resistance= 20, Reactance= -50 }, - new SmithChartData { Resistance= 9, Reactance= -4.5 }, - new SmithChartData { Resistance= 7, Reactance= -2.5 }, - new SmithChartData { Resistance= 5, Reactance= -1 }, - new SmithChartData { Resistance= 2, Reactance= 0.5 }, - new SmithChartData { Resistance= 1, Reactance= 0.4 }, - new SmithChartData { Resistance= 0, Reactance= 0.05 } + new SmithChartData { Resistance = 20, Reactance = -50 }, + new SmithChartData { Resistance = 9, Reactance = -4.5 }, + new SmithChartData { Resistance = 7, Reactance = -2.5 }, + new SmithChartData { Resistance = 5, Reactance = -1 }, + new SmithChartData { Resistance = 2, Reactance = 0.5 }, + new SmithChartData { Resistance = 1, Reactance = 0.4 }, + new SmithChartData { Resistance = 0, Reactance = 0.05 } }; } + ``` ![Changing Legend Position in Blazor Smith Chart](./images/Legend/blazor-smith-chart-legend-position.png) -Other than these positions, the legend can be placed anywhere in the Smith Chart. To achieve this, set the [Position](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartLegendSettings.html#Syncfusion_Blazor_Charts_SmithChartLegendSettings_Position) as **Custom** in the [SmithChartLegendSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartLegendSettings.html) and specify the X and Y coordinates using the [X](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartLegendLocation.html#Syncfusion_Blazor_Charts_SmithChartLegendLocation_X) and [Y](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartLegendLocation.html#Syncfusion_Blazor_Charts_SmithChartLegendLocation_Y) properties in the [SmithChartLegendLocation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartLegendLocation.html). +The legend can also be placed anywhere in the Smith Chart by setting [Position](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartLegendSettings.html#Syncfusion_Blazor_Charts_SmithChartLegendSettings_Position) to **Custom** and specifying [X](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartLegendLocation.html#Syncfusion_Blazor_Charts_SmithChartLegendLocation_X) and [Y](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartLegendLocation.html#Syncfusion_Blazor_Charts_SmithChartLegendLocation_Y) coordinates in [SmithChartLegendLocation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartLegendLocation.html). ```cshtml + @using Syncfusion.Blazor.Charts @@ -76,33 +81,37 @@ Other than these positions, the legend can be placed anywhere in the Smith Chart public double? Resistance { get; set; } public double? Reactance { get; set; } }; + public List FirstTransmissionData = new List { - new SmithChartData { Resistance= 10, Reactance= 25 }, - new SmithChartData { Resistance= 6, Reactance= 4.5 }, - new SmithChartData { Resistance= 3.5, Reactance= 1.6 }, - new SmithChartData { Resistance= 2, Reactance= 1.2 }, - new SmithChartData { Resistance= 1, Reactance= 0.8 }, - new SmithChartData { Resistance= 0, Reactance= 0.2 } + new SmithChartData { Resistance = 10, Reactance = 25 }, + new SmithChartData { Resistance = 6, Reactance = 4.5 }, + new SmithChartData { Resistance = 3.5, Reactance = 1.6 }, + new SmithChartData { Resistance = 2, Reactance = 1.2 }, + new SmithChartData { Resistance = 1, Reactance = 0.8 }, + new SmithChartData { Resistance = 0, Reactance = 0.2 } }; + public List SecondTransmissionData = new List { - new SmithChartData { Resistance= 20, Reactance= -50 }, - new SmithChartData { Resistance= 9, Reactance= -4.5 }, - new SmithChartData { Resistance= 7, Reactance= -2.5 }, - new SmithChartData { Resistance= 5, Reactance= -1 }, - new SmithChartData { Resistance= 2, Reactance= 0.5 }, - new SmithChartData { Resistance= 1, Reactance= 0.4 }, - new SmithChartData { Resistance= 0, Reactance= 0.05 } + new SmithChartData { Resistance = 20, Reactance = -50 }, + new SmithChartData { Resistance = 9, Reactance = -4.5 }, + new SmithChartData { Resistance = 7, Reactance = -2.5 }, + new SmithChartData { Resistance = 5, Reactance = -1 }, + new SmithChartData { Resistance = 2, Reactance = 0.5 }, + new SmithChartData { Resistance = 1, Reactance = 0.4 }, + new SmithChartData { Resistance = 0, Reactance = 0.05 } }; } + ``` ![Blazor Smith Chart Legend with Custom Position](./images/Legend/blazor-smith-chart-legend-with-custom-position.png) ## Legend Alignment -Other than positioning the legend in the Smith Chart, its alignment also can be customized. By default, the legend is aligned in the **Center** position. Using the [Alignment](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartLegendSettings.html#Syncfusion_Blazor_Charts_SmithChartLegendSettings_Alignment) property, the legend can be aligned in the Smith Chart's near, centre, or far locations. +The legend's alignment can be customized. By default, it is centered. Use the [Alignment](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartLegendSettings.html#Syncfusion_Blazor_Charts_SmithChartLegendSettings_Alignment) property to align the legend to the near, center, or far positions of the Smith Chart. ```cshtml + @using Syncfusion.Blazor.Charts @@ -122,24 +131,27 @@ Other than positioning the legend in the Smith Chart, its alignment also can be public double? Resistance { get; set; } public double? Reactance { get; set; } }; + public List FirstTransmissionData = new List { - new SmithChartData { Resistance= 10, Reactance= 25 }, - new SmithChartData { Resistance= 6, Reactance= 4.5 }, - new SmithChartData { Resistance= 3.5, Reactance= 1.6 }, - new SmithChartData { Resistance= 2, Reactance= 1.2 }, - new SmithChartData { Resistance= 1, Reactance= 0.8 }, - new SmithChartData { Resistance= 0, Reactance= 0.2 } + new SmithChartData { Resistance = 10, Reactance = 25 }, + new SmithChartData { Resistance = 6, Reactance = 4.5 }, + new SmithChartData { Resistance = 3.5, Reactance = 1.6 }, + new SmithChartData { Resistance = 2, Reactance = 1.2 }, + new SmithChartData { Resistance = 1, Reactance = 0.8 }, + new SmithChartData { Resistance = 0, Reactance = 0.2 } }; + public List SecondTransmissionData = new List { - new SmithChartData { Resistance= 20, Reactance= -50 }, - new SmithChartData { Resistance= 9, Reactance= -4.5 }, - new SmithChartData { Resistance= 7, Reactance= -2.5 }, - new SmithChartData { Resistance= 5, Reactance= -1 }, - new SmithChartData { Resistance= 2, Reactance= 0.5 }, - new SmithChartData { Resistance= 1, Reactance= 0.4 }, - new SmithChartData { Resistance= 0, Reactance= 0.05 } + new SmithChartData { Resistance = 20, Reactance = -50 }, + new SmithChartData { Resistance = 9, Reactance = -4.5 }, + new SmithChartData { Resistance = 7, Reactance = -2.5 }, + new SmithChartData { Resistance = 5, Reactance = -1 }, + new SmithChartData { Resistance = 2, Reactance = 0.5 }, + new SmithChartData { Resistance = 1, Reactance = 0.4 }, + new SmithChartData { Resistance = 0, Reactance = 0.05 } }; } + ``` ![Changing Legend Alignment in Blazor Smith Chart](./images/Legend/blazor-smith-chart-legend-alignment.png) @@ -148,9 +160,10 @@ Other than positioning the legend in the Smith Chart, its alignment also can be ### Legend Shape -By default, the legend is rendered in **Circle** shape and the color of the shape is as same as the series color in the Smith Chart. Using the property [Shape](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartLegendSettings.html#Syncfusion_Blazor_Charts_SmithChartLegendSettings_Shape) in the legend settings, the shape of the legend can be changed to rectangle, triangle, and so on. +The legend is rendered as a **Circle** by default, matching the series color. Use the [Shape](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartLegendSettings.html#Syncfusion_Blazor_Charts_SmithChartLegendSettings_Shape) property to change the legend shape to rectangle, triangle, or other supported shapes. ```cshtml + @using Syncfusion.Blazor.Charts @@ -170,33 +183,37 @@ By default, the legend is rendered in **Circle** shape and the color of the shap public double? Resistance { get; set; } public double? Reactance { get; set; } }; + public List FirstTransmissionData = new List { - new SmithChartData { Resistance= 10, Reactance= 25 }, - new SmithChartData { Resistance= 6, Reactance= 4.5 }, - new SmithChartData { Resistance= 3.5, Reactance= 1.6 }, - new SmithChartData { Resistance= 2, Reactance= 1.2 }, - new SmithChartData { Resistance= 1, Reactance= 0.8 }, - new SmithChartData { Resistance= 0, Reactance= 0.2 } + new SmithChartData { Resistance = 10, Reactance = 25 }, + new SmithChartData { Resistance = 6, Reactance = 4.5 }, + new SmithChartData { Resistance = 3.5, Reactance = 1.6 }, + new SmithChartData { Resistance = 2, Reactance = 1.2 }, + new SmithChartData { Resistance = 1, Reactance = 0.8 }, + new SmithChartData { Resistance = 0, Reactance = 0.2 } }; + public List SecondTransmissionData = new List { - new SmithChartData { Resistance= 20, Reactance= -50 }, - new SmithChartData { Resistance= 9, Reactance= -4.5 }, - new SmithChartData { Resistance= 7, Reactance= -2.5 }, - new SmithChartData { Resistance= 5, Reactance= -1 }, - new SmithChartData { Resistance= 2, Reactance= 0.5 }, - new SmithChartData { Resistance= 1, Reactance= 0.4 }, - new SmithChartData { Resistance= 0, Reactance= 0.05 } + new SmithChartData { Resistance = 20, Reactance = -50 }, + new SmithChartData { Resistance = 9, Reactance = -4.5 }, + new SmithChartData { Resistance = 7, Reactance = -2.5 }, + new SmithChartData { Resistance = 5, Reactance = -1 }, + new SmithChartData { Resistance = 2, Reactance = 0.5 }, + new SmithChartData { Resistance = 1, Reactance = 0.4 }, + new SmithChartData { Resistance = 0, Reactance = 0.05 } }; } + ``` ![Blazor Smith Chart Legend with Custom Shape](./images/Legend/blazor-smith-chart-legend-custom-shape.png) ### Legend Size -By default, the legend takes 20% - 25% of the Smith Chart's height horizontally when it is placed on the top or the bottom position, and 20% - 25% of the width vertically when it is placed on the left or the right position of the Chart. It can be changed by using the [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartLegendSettings.html#Syncfusion_Blazor_Charts_SmithChartLegendSettings_Width) and the [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartLegendSettings.html#Syncfusion_Blazor_Charts_SmithChartLegendSettings_Height) property of the legend settings. It can be in pixel or in percentage. +By default, the legend occupies 20%–25% of the Smith Chart's height (top/bottom) or width (left/right). Adjust the legend's size using the [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartLegendSettings.html#Syncfusion_Blazor_Charts_SmithChartLegendSettings_Width) and [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartLegendSettings.html#Syncfusion_Blazor_Charts_SmithChartLegendSettings_Height) properties, specified in pixels or percentage. ```cshtml + @using Syncfusion.Blazor.Charts @@ -214,33 +231,37 @@ By default, the legend takes 20% - 25% of the Smith Chart's height horizontally public double? Resistance { get; set; } public double? Reactance { get; set; } }; + public List FirstTransmissionData = new List { - new SmithChartData { Resistance= 10, Reactance= 25 }, - new SmithChartData { Resistance= 6, Reactance= 4.5 }, - new SmithChartData { Resistance= 3.5, Reactance= 1.6 }, - new SmithChartData { Resistance= 2, Reactance= 1.2 }, - new SmithChartData { Resistance= 1, Reactance= 0.8 }, - new SmithChartData { Resistance= 0, Reactance= 0.2 } + new SmithChartData { Resistance = 10, Reactance = 25 }, + new SmithChartData { Resistance = 6, Reactance = 4.5 }, + new SmithChartData { Resistance = 3.5, Reactance = 1.6 }, + new SmithChartData { Resistance = 2, Reactance = 1.2 }, + new SmithChartData { Resistance = 1, Reactance = 0.8 }, + new SmithChartData { Resistance = 0, Reactance = 0.2 } }; + public List SecondTransmissionData = new List { - new SmithChartData { Resistance= 20, Reactance= -50 }, - new SmithChartData { Resistance= 9, Reactance= -4.5 }, - new SmithChartData { Resistance= 7, Reactance= -2.5 }, - new SmithChartData { Resistance= 5, Reactance= -1 }, - new SmithChartData { Resistance= 2, Reactance= 0.5 }, - new SmithChartData { Resistance= 1, Reactance= 0.4 }, - new SmithChartData { Resistance= 0, Reactance= 0.05 } + new SmithChartData { Resistance = 20, Reactance = -50 }, + new SmithChartData { Resistance = 9, Reactance = -4.5 }, + new SmithChartData { Resistance = 7, Reactance = -2.5 }, + new SmithChartData { Resistance = 5, Reactance = -1 }, + new SmithChartData { Resistance = 2, Reactance = 0.5 }, + new SmithChartData { Resistance = 1, Reactance = 0.4 }, + new SmithChartData { Resistance = 0, Reactance = 0.05 } }; } + ``` ![Blazor Smith Chart Legend with Custom Size](./images/Legend/blazor-smith-chart-legend-custom-size.png) ### Padding -The space between two legend items can be customized using the [ItemPadding](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartLegendSettings.html#Syncfusion_Blazor_Charts_SmithChartLegendSettings_ItemPadding) property and, the space between legend shape and text can be customized using the [ShapePadding](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartLegendSettings.html#Syncfusion_Blazor_Charts_SmithChartLegendSettings_ShapePadding) property. +Customize the space between legend items using the [ItemPadding](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartLegendSettings.html#Syncfusion_Blazor_Charts_SmithChartLegendSettings_ItemPadding) property, and the space between the legend shape and text using the [ShapePadding](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartLegendSettings.html#Syncfusion_Blazor_Charts_SmithChartLegendSettings_ShapePadding) property. ```cshtml + @using Syncfusion.Blazor.Charts @@ -261,37 +282,41 @@ The space between two legend items can be customized using the [ItemPadding](htt public double? Resistance { get; set; } public double? Reactance { get; set; } }; + public List FirstTransmissionData = new List { - new SmithChartData { Resistance= 10, Reactance= 25 }, - new SmithChartData { Resistance= 6, Reactance= 4.5 }, - new SmithChartData { Resistance= 3.5, Reactance= 1.6 }, - new SmithChartData { Resistance= 2, Reactance= 1.2 }, - new SmithChartData { Resistance= 1, Reactance= 0.8 }, - new SmithChartData { Resistance= 0, Reactance= 0.2 } + new SmithChartData { Resistance = 10, Reactance = 25 }, + new SmithChartData { Resistance = 6, Reactance = 4.5 }, + new SmithChartData { Resistance = 3.5, Reactance = 1.6 }, + new SmithChartData { Resistance = 2, Reactance = 1.2 }, + new SmithChartData { Resistance = 1, Reactance = 0.8 }, + new SmithChartData { Resistance = 0, Reactance = 0.2 } }; + public List SecondTransmissionData = new List { - new SmithChartData { Resistance= 20, Reactance= -50 }, - new SmithChartData { Resistance= 9, Reactance= -4.5 }, - new SmithChartData { Resistance= 7, Reactance= -2.5 }, - new SmithChartData { Resistance= 5, Reactance= -1 }, - new SmithChartData { Resistance= 2, Reactance= 0.5 }, - new SmithChartData { Resistance= 1, Reactance= 0.4 }, - new SmithChartData { Resistance= 0, Reactance= 0.05 } + new SmithChartData { Resistance = 20, Reactance = -50 }, + new SmithChartData { Resistance = 9, Reactance = -4.5 }, + new SmithChartData { Resistance = 7, Reactance = -2.5 }, + new SmithChartData { Resistance = 5, Reactance = -1 }, + new SmithChartData { Resistance = 2, Reactance = 0.5 }, + new SmithChartData { Resistance = 1, Reactance = 0.4 }, + new SmithChartData { Resistance = 0, Reactance = 0.05 } }; } + ``` ![Blazor Smith Chart Legend with Padding](./images/Legend/blazor-smith-chart-legend-with-padding.png) -### Other customization +### Other Customization -Each legend item's style, border, and text can be customized in the Smith Chart by using the following properties. +Customize each legend item's style, border, and text using the following properties: -* [SmithChartLegendItemStyle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartLegendItemStyle.html) - Used to customize the height and the width of each legend item using the [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartLegendItemStyle.html#Syncfusion_Blazor_Charts_SmithChartLegendItemStyle_Height) and the [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartLegendItemStyle.html#Syncfusion_Blazor_Charts_SmithChartLegendItemStyle_Width) properties. -* [SmithChartLegendBorder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartLegendBorder.html) - Used to customize the border color and the width for legend collection using the [Color](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartCommonBorder.html#Syncfusion_Blazor_Charts_SmithChartCommonBorder_Color) and the [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartCommonBorder.html#Syncfusion_Blazor_Charts_SmithChartCommonBorder_Width) properties. -* [SmithChartLegendTextStyle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartLegendTextStyle.html) - Used to customize the properties such as [FontFamily](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartCommonFont.html#Syncfusion_Blazor_Charts_SmithChartCommonFont_FontFamily), [FontWeight](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartCommonFont.html#Syncfusion_Blazor_Charts_SmithChartCommonFont_FontWeight), [FontStyle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartCommonFont.html#Syncfusion_Blazor_Charts_SmithChartCommonFont_FontStyle), [Opacity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartCommonFont.html#Syncfusion_Blazor_Charts_SmithChartCommonFont_Opacity), [Color](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartCommonFont.html#Syncfusion_Blazor_Charts_SmithChartCommonFont_Color) and [Size](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartCommonFont.html#Syncfusion_Blazor_Charts_SmithChartCommonFont_Size) for each legend text. +* [SmithChartLegendItemStyle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartLegendItemStyle.html) – Set the height and width of each legend item. +* [SmithChartLegendBorder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartLegendBorder.html) – Set the border color and width for the legend collection. +* [SmithChartLegendTextStyle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartLegendTextStyle.html) – Customize font properties such as [FontFamily](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartCommonFont.html#Syncfusion_Blazor_Charts_SmithChartCommonFont_FontFamily), [FontWeight](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartCommonFont.html#Syncfusion_Blazor_Charts_SmithChartCommonFont_FontWeight), [FontStyle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartCommonFont.html#Syncfusion_Blazor_Charts_SmithChartCommonFont_FontStyle), [Opacity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartCommonFont.html#Syncfusion_Blazor_Charts_SmithChartCommonFont_Opacity), [Color](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartCommonFont.html#Syncfusion_Blazor_Charts_SmithChartCommonFont_Color), and [Size](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartLegendTextStyle.html#Syncfusion_Blazor_Charts_SmithChartLegendTextStyle_Size). ```cshtml + @using Syncfusion.Blazor.Charts @@ -312,33 +337,37 @@ Each legend item's style, border, and text can be customized in the Smith Chart public double? Resistance { get; set; } public double? Reactance { get; set; } }; + public List FirstTransmissionData = new List { - new SmithChartData { Resistance= 10, Reactance= 25 }, - new SmithChartData { Resistance= 6, Reactance= 4.5 }, - new SmithChartData { Resistance= 3.5, Reactance= 1.6 }, - new SmithChartData { Resistance= 2, Reactance= 1.2 }, - new SmithChartData { Resistance= 1, Reactance= 0.8 }, - new SmithChartData { Resistance= 0, Reactance= 0.2 } + new SmithChartData { Resistance = 10, Reactance = 25 }, + new SmithChartData { Resistance = 6, Reactance = 4.5 }, + new SmithChartData { Resistance = 3.5, Reactance = 1.6 }, + new SmithChartData { Resistance = 2, Reactance = 1.2 }, + new SmithChartData { Resistance = 1, Reactance = 0.8 }, + new SmithChartData { Resistance = 0, Reactance = 0.2 } }; + public List SecondTransmissionData = new List { - new SmithChartData { Resistance= 20, Reactance= -50 }, - new SmithChartData { Resistance= 9, Reactance= -4.5 }, - new SmithChartData { Resistance= 7, Reactance= -2.5 }, - new SmithChartData { Resistance= 5, Reactance= -1 }, - new SmithChartData { Resistance= 2, Reactance= 0.5 }, - new SmithChartData { Resistance= 1, Reactance= 0.4 }, - new SmithChartData { Resistance= 0, Reactance= 0.05 } + new SmithChartData { Resistance = 20, Reactance = -50 }, + new SmithChartData { Resistance = 9, Reactance = -4.5 }, + new SmithChartData { Resistance = 7, Reactance = -2.5 }, + new SmithChartData { Resistance = 5, Reactance = -1 }, + new SmithChartData { Resistance = 2, Reactance = 0.5 }, + new SmithChartData { Resistance = 1, Reactance = 0.4 }, + new SmithChartData { Resistance = 0, Reactance = 0.05 } }; } + ``` ![Customizing Legend in Blazor Smith Chart](./images/Legend/blazor-smith-chart-custom-legend.png) ## Toggle Visibility -By default, the series name is displayed in the legend. The visibility of the series can be collapsed by clicking the legend of that particular series. The series visibility can be toggled by using the [ToggleVisibility](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartLegendSettings.html#Syncfusion_Blazor_Charts_SmithChartLegendSettings_ToggleVisibility) property. By default, it is **true**. +The legend displays the series name by default. Series visibility can be toggled by clicking the legend item, controlled by the [ToggleVisibility](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartLegendSettings.html#Syncfusion_Blazor_Charts_SmithChartLegendSettings_ToggleVisibility) property, which is **true** by default. ```cshtml + @using Syncfusion.Blazor.Charts @@ -358,31 +387,35 @@ By default, the series name is displayed in the legend. The visibility of the se public double? Resistance { get; set; } public double? Reactance { get; set; } }; + public List FirstTransmissionData = new List { - new SmithChartData { Resistance= 10, Reactance= 25 }, - new SmithChartData { Resistance= 6, Reactance= 4.5 }, - new SmithChartData { Resistance= 3.5, Reactance= 1.6 }, - new SmithChartData { Resistance= 2, Reactance= 1.2 }, - new SmithChartData { Resistance= 1, Reactance= 0.8 }, - new SmithChartData { Resistance= 0, Reactance= 0.2 } + new SmithChartData { Resistance = 10, Reactance = 25 }, + new SmithChartData { Resistance = 6, Reactance = 4.5 }, + new SmithChartData { Resistance = 3.5, Reactance = 1.6 }, + new SmithChartData { Resistance = 2, Reactance = 1.2 }, + new SmithChartData { Resistance = 1, Reactance = 0.8 }, + new SmithChartData { Resistance = 0, Reactance = 0.2 } }; + public List SecondTransmissionData = new List { - new SmithChartData { Resistance= 20, Reactance= -50 }, - new SmithChartData { Resistance= 9, Reactance= -4.5 }, - new SmithChartData { Resistance= 7, Reactance= -2.5 }, - new SmithChartData { Resistance= 5, Reactance= -1 }, - new SmithChartData { Resistance= 2, Reactance= 0.5 }, - new SmithChartData { Resistance= 1, Reactance= 0.4 }, - new SmithChartData { Resistance= 0, Reactance= 0.05 } + new SmithChartData { Resistance = 20, Reactance = -50 }, + new SmithChartData { Resistance = 9, Reactance = -4.5 }, + new SmithChartData { Resistance = 7, Reactance = -2.5 }, + new SmithChartData { Resistance = 5, Reactance = -1 }, + new SmithChartData { Resistance = 2, Reactance = 0.5 }, + new SmithChartData { Resistance = 1, Reactance = 0.4 }, + new SmithChartData { Resistance = 0, Reactance = 0.05 } }; } + ``` -## Row and column +## Row and Column -The legend can also be placed in rows and columns using the [RowCount](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartLegendSettings.html#Syncfusion_Blazor_Charts_SmithChartLegendSettings_RowCount) and the [ColumnCount](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartLegendSettings.html#Syncfusion_Blazor_Charts_SmithChartLegendSettings_ColumnCount) property. By default, their value is **0**. +Arrange the legend in rows and columns using the [RowCount](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartLegendSettings.html#Syncfusion_Blazor_Charts_SmithChartLegendSettings_RowCount) and [ColumnCount](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartLegendSettings.html#Syncfusion_Blazor_Charts_SmithChartLegendSettings_ColumnCount) properties. The default value for both is **0**. ```cshtml + @using Syncfusion.Blazor.Charts @@ -401,38 +434,42 @@ The legend can also be placed in rows and columns using the [RowCount](https://h public double? Resistance { get; set; } public double? Reactance { get; set; } }; + public List FirstTransmissionData = new List { - new SmithChartData { Resistance= 10, Reactance= 25 }, - new SmithChartData { Resistance= 6, Reactance= 4.5 }, - new SmithChartData { Resistance= 3.5, Reactance= 1.6 }, - new SmithChartData { Resistance= 2, Reactance= 1.2 }, - new SmithChartData { Resistance= 1, Reactance= 0.8 }, - new SmithChartData { Resistance= 0, Reactance= 0.2 } + new SmithChartData { Resistance = 10, Reactance = 25 }, + new SmithChartData { Resistance = 6, Reactance = 4.5 }, + new SmithChartData { Resistance = 3.5, Reactance = 1.6 }, + new SmithChartData { Resistance = 2, Reactance = 1.2 }, + new SmithChartData { Resistance = 1, Reactance = 0.8 }, + new SmithChartData { Resistance = 0, Reactance = 0.2 } }; + public List SecondTransmissionData = new List { - new SmithChartData { Resistance= 20, Reactance= -50 }, - new SmithChartData { Resistance= 9, Reactance= -4.5 }, - new SmithChartData { Resistance= 7, Reactance= -2.5 }, - new SmithChartData { Resistance= 5, Reactance= -1 }, - new SmithChartData { Resistance= 2, Reactance= 0.5 }, - new SmithChartData { Resistance= 1, Reactance= 0.4 }, - new SmithChartData { Resistance= 0, Reactance= 0.05 } + new SmithChartData { Resistance = 20, Reactance = -50 }, + new SmithChartData { Resistance = 9, Reactance = -4.5 }, + new SmithChartData { Resistance = 7, Reactance = -2.5 }, + new SmithChartData { Resistance = 5, Reactance = -1 }, + new SmithChartData { Resistance = 2, Reactance = 0.5 }, + new SmithChartData { Resistance = 1, Reactance = 0.4 }, + new SmithChartData { Resistance = 0, Reactance = 0.05 } }; } + ``` ![Blazor Smith Chart with Legend Row and Column](./images/Legend/blazor-smith-chart-legend-row-and-column.png) ## Title -The title depicts the information about the legend collection in the Smith Chart. It can be customized using the following properties in the [SmithChartLegendTitle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartLegendTitle.html). +The legend title provides information about the legend collection. Customize the title using the following properties in [SmithChartLegendTitle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartLegendTitle.html): -* [Text](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartLegendTitle.html#Syncfusion_Blazor_Charts_SmithChartLegendTitle_Text) - Used to customize the legend title text. -* [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartLegendTitle.html#Syncfusion_Blazor_Charts_SmithChartLegendTitle_Visible) - Used to specify the visibility of the legend title. By default, it is **true**. -* [TextAlignment](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartLegendTitle.html#Syncfusion_Blazor_Charts_SmithChartLegendTitle_TextAlignment) - Used to specify the legend title alignment. -* [SmithChartLegendTitleTextStyle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartLegendTitleTextStyle.html) - Used to customize the properties such as [FontFamily](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartCommonFont.html#Syncfusion_Blazor_Charts_SmithChartCommonFont_FontFamily), [FontWeight](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartCommonFont.html#Syncfusion_Blazor_Charts_SmithChartCommonFont_FontWeight), [FontStyle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartCommonFont.html#Syncfusion_Blazor_Charts_SmithChartCommonFont_FontStyle), [Opacity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartCommonFont.html#Syncfusion_Blazor_Charts_SmithChartCommonFont_Opacity), [Color](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartCommonFont.html#Syncfusion_Blazor_Charts_SmithChartCommonFont_Color) and [Size](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartLegendTitleTextStyle.html#Syncfusion_Blazor_Charts_SmithChartLegendTitleTextStyle_Size) for the title text. +* [Text](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartLegendTitle.html#Syncfusion_Blazor_Charts_SmithChartLegendTitle_Text) – Sets the legend title text. +* [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartLegendTitle.html#Syncfusion_Blazor_Charts_SmithChartLegendTitle_Visible) – Specifies the visibility of the legend title. Default is **true**. +* [TextAlignment](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartLegendTitle.html#Syncfusion_Blazor_Charts_SmithChartLegendTitle_TextAlignment) – Sets the legend title alignment. +* [SmithChartLegendTitleTextStyle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartLegendTitleTextStyle.html) – Customize font properties for the title text. ```cshtml + @using Syncfusion.Blazor.Charts @@ -453,24 +490,27 @@ The title depicts the information about the legend collection in the Smith Chart public double? Resistance { get; set; } public double? Reactance { get; set; } }; + public List FirstTransmissionData = new List { - new SmithChartData { Resistance= 10, Reactance= 25 }, - new SmithChartData { Resistance= 6, Reactance= 4.5 }, - new SmithChartData { Resistance= 3.5, Reactance= 1.6 }, - new SmithChartData { Resistance= 2, Reactance= 1.2 }, - new SmithChartData { Resistance= 1, Reactance= 0.8 }, - new SmithChartData { Resistance= 0, Reactance= 0.2 } + new SmithChartData { Resistance = 10, Reactance = 25 }, + new SmithChartData { Resistance = 6, Reactance = 4.5 }, + new SmithChartData { Resistance = 3.5, Reactance = 1.6 }, + new SmithChartData { Resistance = 2, Reactance = 1.2 }, + new SmithChartData { Resistance = 1, Reactance = 0.8 }, + new SmithChartData { Resistance = 0, Reactance = 0.2 } }; + public List SecondTransmissionData = new List { - new SmithChartData { Resistance= 20, Reactance= -50 }, - new SmithChartData { Resistance= 9, Reactance= -4.5 }, - new SmithChartData { Resistance= 7, Reactance= -2.5 }, - new SmithChartData { Resistance= 5, Reactance= -1 }, - new SmithChartData { Resistance= 2, Reactance= 0.5 }, - new SmithChartData { Resistance= 1, Reactance= 0.4 }, - new SmithChartData { Resistance= 0, Reactance= 0.05 } + new SmithChartData { Resistance = 20, Reactance = -50 }, + new SmithChartData { Resistance = 9, Reactance = -4.5 }, + new SmithChartData { Resistance = 7, Reactance = -2.5 }, + new SmithChartData { Resistance = 5, Reactance = -1 }, + new SmithChartData { Resistance = 2, Reactance = 0.5 }, + new SmithChartData { Resistance = 1, Reactance = 0.4 }, + new SmithChartData { Resistance = 0, Reactance = 0.05 } }; } + ``` ![Blazor Smith Chart with Legend Title](./images/Legend/blazor-smith-chart-legend-title.png) diff --git a/blazor/smith-chart/smith-chart-marker.md b/blazor/smith-chart/smith-chart-marker.md index 9a6cbaae4c..c2a077cd92 100644 --- a/blazor/smith-chart/smith-chart-marker.md +++ b/blazor/smith-chart/smith-chart-marker.md @@ -1,21 +1,22 @@ --- layout: post -title: Marker and Data labels in Blazor Smith Chart Component | Syncfusion -description: Checkout and learn here all about marker and data labels in Syncfusion Blazor Smith Chart component and more. +title: Marker and Data Labels in Blazor Smith Chart Component | Syncfusion +description: Check out and learn how to configure and customize marker and data labels in Syncfusion Blazor Smith Chart component and more. platform: Blazor control: Smith Chart documentation: ug --- -# Marker and Data labels in Blazor Smith Chart Component +# Marker and Data Labels in Blazor Smith Chart Component -Markers and data labels are used to provide information about the data points in the series. Both the marker and the datalabel are disabled by default in the Smith Chart. Both can be enabled by making the [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartSeriesMarker.html#Syncfusion_Blazor_Charts_SmithChartSeriesMarker_Visible) property in the marker and the datalabel settings to **true**. +Markers and data labels provide information about data points in the series. Both are disabled by default in the Smith Chart and can be enabled by setting the [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartSeriesMarker.html#Syncfusion_Blazor_Charts_SmithChartSeriesMarker_Visible) property in the marker and data label settings to **true**. ## Marker -By default, the visibility of the marker is **false**. It can be enabled by setting the [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartSeriesMarker.html#Syncfusion_Blazor_Charts_SmithChartSeriesMarker_Visible) property to **true** in the [SmithChartSeriesMarker](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartSeriesMarker.html). This will add a marker for each data point in the series. Using marker setting, it can be customized differently for each series in the Smith Chart. +By default, markers are not visible. Enable them by setting the [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartSeriesMarker.html#Syncfusion_Blazor_Charts_SmithChartSeriesMarker_Visible) property to **true** in [SmithChartSeriesMarker](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartSeriesMarker.html). This adds a marker for each data point in the series. Marker settings can be customized for each series in the Smith Chart. ```cshtml + @using Syncfusion.Blazor.Charts @@ -32,31 +33,34 @@ By default, the visibility of the marker is **false**. It can be enabled by sett public double? Resistance { get; set; } public double? Reactance { get; set; } }; + public List TransmissionData = new List { - new SmithChartData { Resistance= 10, Reactance= 25 }, - new SmithChartData { Resistance= 6, Reactance= 4.5 }, - new SmithChartData { Resistance= 3.5, Reactance= 1.6 }, - new SmithChartData { Resistance= 2, Reactance= 1.2 }, - new SmithChartData { Resistance= 1, Reactance= 0.8 }, - new SmithChartData { Resistance= 0, Reactance= 0.2 } + new SmithChartData { Resistance = 10, Reactance = 25 }, + new SmithChartData { Resistance = 6, Reactance = 4.5 }, + new SmithChartData { Resistance = 3.5, Reactance = 1.6 }, + new SmithChartData { Resistance = 2, Reactance = 1.2 }, + new SmithChartData { Resistance = 1, Reactance = 0.8 }, + new SmithChartData { Resistance = 0, Reactance = 0.2 } }; } + ``` ![Blazor Smith Chart with Marker](./images/Marker/blazor-smith-chart-marker.png) ### Marker Customization -Using the [SmithChartSeriesMarker](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartSeriesMarker.html), the following marker properties can be customized differently for each series in the Smith Chart. +Customize marker properties for each series using [SmithChartSeriesMarker](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartSeriesMarker.html): -* [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartSeriesMarker.html#Syncfusion_Blazor_Charts_SmithChartSeriesMarker_Width) - Used to customize the width of the marker. -* [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartSeriesMarker.html#Syncfusion_Blazor_Charts_SmithChartSeriesMarker_Height) - Used to customize the height of the marker. -* [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartSeriesMarker.html#Syncfusion_Blazor_Charts_SmithChartSeriesMarker_Fill) - Used to customize the fill color of the marker. -* [Opacity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartSeriesMarker.html#Syncfusion_Blazor_Charts_SmithChartSeriesMarker_Opacity) - Used to customize the opacity of the marker. -* [SmithChartSeriesMarkerBorder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartSeriesMarkerBorder.html) - Used to control the width and the color of the marker's border using the [Color](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartSeriesMarkerBorder.html#Syncfusion_Blazor_Charts_SmithChartSeriesMarkerBorder_Color) and the [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartSeriesMarkerBorder.html#Syncfusion_Blazor_Charts_SmithChartSeriesMarkerBorder_Width) properties. -* [Shape](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartSeriesMarker.html#Syncfusion_Blazor_Charts_SmithChartSeriesMarker_Shape) - Used to change the shape of the marker. +* [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartSeriesMarker.html#Syncfusion_Blazor_Charts_SmithChartSeriesMarker_Width) – Sets the marker width. +* [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartSeriesMarker.html#Syncfusion_Blazor_Charts_SmithChartSeriesMarker_Height) – Sets the marker height. +* [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartSeriesMarker.html#Syncfusion_Blazor_Charts_SmithChartSeriesMarker_Fill) – Sets the marker fill color. +* [Opacity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartSeriesMarker.html#Syncfusion_Blazor_Charts_SmithChartSeriesMarker_Opacity) – Sets the marker opacity. +* [SmithChartSeriesMarkerBorder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartSeriesMarkerBorder.html) – Controls the marker border's width and color. +* [Shape](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartSeriesMarker.html#Syncfusion_Blazor_Charts_SmithChartSeriesMarker_Shape) – Changes the marker shape. ```cshtml + @using Syncfusion.Blazor.Charts @@ -81,24 +85,27 @@ Using the [SmithChartSeriesMarker](https://help.syncfusion.com/cr/blazor/Syncfus public double? Resistance { get; set; } public double? Reactance { get; set; } }; + public List TransmissionData = new List { - new SmithChartData { Resistance= 10, Reactance= 25 }, - new SmithChartData { Resistance= 6, Reactance= 4.5 }, - new SmithChartData { Resistance= 3.5, Reactance= 1.6 }, - new SmithChartData { Resistance= 2, Reactance= 1.2 }, - new SmithChartData { Resistance= 1, Reactance= 0.8 }, - new SmithChartData { Resistance= 0, Reactance= 0.2 } + new SmithChartData { Resistance = 10, Reactance = 25 }, + new SmithChartData { Resistance = 6, Reactance = 4.5 }, + new SmithChartData { Resistance = 3.5, Reactance = 1.6 }, + new SmithChartData { Resistance = 2, Reactance = 1.2 }, + new SmithChartData { Resistance = 1, Reactance = 0.8 }, + new SmithChartData { Resistance = 0, Reactance = 0.2 } }; } + ``` ![Blazor Smith Chart with Custom Marker](./images/Marker/blazor-smith-chart-custom-marker.png) -## Data labels +## Data Labels -By default, the data labels are disabled. It can be enabled by setting the [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartSeriesDatalabel.html#Syncfusion_Blazor_Charts_SmithChartSeriesDatalabel_Visible) property to **true** in the [SmithChartSeriesDatalabel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartSeriesDatalabel.html). For each point in the series, a datalabel is created. +Data labels are disabled by default. Enable them by setting the [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartSeriesDatalabel.html#Syncfusion_Blazor_Charts_SmithChartSeriesDatalabel_Visible) property to **true** in [SmithChartSeriesDatalabel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartSeriesDatalabel.html). A data label is created for each point in the series. ```cshtml + @using Syncfusion.Blazor.Charts @@ -117,29 +124,32 @@ By default, the data labels are disabled. It can be enabled by setting the [Visi public double? Resistance { get; set; } public double? Reactance { get; set; } }; + public List TransmissionData = new List { - new SmithChartData { Resistance= 10, Reactance= 25 }, - new SmithChartData { Resistance= 6, Reactance= 4.5 }, - new SmithChartData { Resistance= 3.5, Reactance= 1.6 }, - new SmithChartData { Resistance= 2, Reactance= 1.2 }, - new SmithChartData { Resistance= 1, Reactance= 0.8 }, - new SmithChartData { Resistance= 0, Reactance= 0.2 } + new SmithChartData { Resistance = 10, Reactance = 25 }, + new SmithChartData { Resistance = 6, Reactance = 4.5 }, + new SmithChartData { Resistance = 3.5, Reactance = 1.6 }, + new SmithChartData { Resistance = 2, Reactance = 1.2 }, + new SmithChartData { Resistance = 1, Reactance = 0.8 }, + new SmithChartData { Resistance = 0, Reactance = 0.2 } }; } + ``` ![Blazor Smith Chart with Data Label](./images/Marker/blazor-smith-chart-data-label.png) -### Data labels customization +### Data Labels Customization -The data labels can be customized using the following properties. +Customize data labels using the following properties: -* [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartSeriesDatalabel.html#Syncfusion_Blazor_Charts_SmithChartSeriesDatalabel_Fill) - Used to change the fill color of the data labels. -* [Opacity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartSeriesDatalabel.html#Syncfusion_Blazor_Charts_SmithChartSeriesDatalabel_Opacity) - Used to control the opacity of the data labels. -* [SmithChartSeriesDataLabelBorder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartSeriesDataLabelBorder.html) - Used to customize width and color of the border using the [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartSeriesDataLabelBorder.html#Syncfusion_Blazor_Charts_SmithChartSeriesDataLabelBorder_Width) and the [Color](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartSeriesDataLabelBorder.html#Syncfusion_Blazor_Charts_SmithChartSeriesDataLabelBorder_Color) properties. -* [SmithChartDataLabelTextStyle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartDataLabelTextStyle.html) - Used to customize properties such as [FontFamily](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartCommonFont.html#Syncfusion_Blazor_Charts_SmithChartCommonFont_FontFamily), [FontWeight](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartCommonFont.html#Syncfusion_Blazor_Charts_SmithChartCommonFont_FontWeight), [FontStyle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartCommonFont.html#Syncfusion_Blazor_Charts_SmithChartCommonFont_FontStyle), [Opacity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartCommonFont.html#Syncfusion_Blazor_Charts_SmithChartCommonFont_Opacity), [Color](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartCommonFont.html#Syncfusion_Blazor_Charts_SmithChartCommonFont_Color), and [Size](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartCommonFont.html#Syncfusion_Blazor_Charts_SmithChartCommonFont_Size) for datalabel font. +* [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartSeriesDatalabel.html#Syncfusion_Blazor_Charts_SmithChartSeriesDatalabel_Fill) – Sets the fill color of the data labels. +* [Opacity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartSeriesDatalabel.html#Syncfusion_Blazor_Charts_SmithChartSeriesDatalabel_Opacity) – Controls the opacity of the data labels. +* [SmithChartSeriesDataLabelBorder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartSeriesDataLabelBorder.html) – Customizes the border width and color. +* [SmithChartDataLabelTextStyle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartDataLabelTextStyle.html) – Customizes font properties for the data label text. ```cshtml + @using Syncfusion.Blazor.Charts @@ -162,24 +172,27 @@ The data labels can be customized using the following properties. public double? Resistance { get; set; } public double? Reactance { get; set; } }; + private List TransmissionData = new List { - new SmithChartData { Resistance= 10, Reactance= 25 }, - new SmithChartData { Resistance= 6, Reactance= 4.5 }, - new SmithChartData { Resistance= 3.5, Reactance= 1.6 }, - new SmithChartData { Resistance= 2, Reactance= 1.2 }, - new SmithChartData { Resistance= 1, Reactance= 0.8 }, - new SmithChartData { Resistance= 0, Reactance= 0.2 } + new SmithChartData { Resistance = 10, Reactance = 25 }, + new SmithChartData { Resistance = 6, Reactance = 4.5 }, + new SmithChartData { Resistance = 3.5, Reactance = 1.6 }, + new SmithChartData { Resistance = 2, Reactance = 1.2 }, + new SmithChartData { Resistance = 1, Reactance = 0.8 }, + new SmithChartData { Resistance = 0, Reactance = 0.2 } }; } + ``` ![Blazor Smith Chart with Custom Data Label](./images/Marker/blazor-smith-chart-custom-data-label.png) ### Smart Labels -Data labels can be placed smartly by setting the [EnableSmartLabels](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartSeries.html#Syncfusion_Blazor_Charts_SmithChartSeries_EnableSmartLabels) to **true** in the Smith Chart series. A line will be connected for smartly aligned labels. It's color and width can be customized using the [Color](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartDataLabelConnectorLine.html#Syncfusion_Blazor_Charts_SmithChartDataLabelConnectorLine_Color) and the [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartDataLabelConnectorLine.html#Syncfusion_Blazor_Charts_SmithChartDataLabelConnectorLine_Width) properties in the [SmithChartDataLabelConnectorLine](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartDataLabelConnectorLine.html). +Data labels can be placed smartly by setting the [EnableSmartLabels](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartSeries.html#Syncfusion_Blazor_Charts_SmithChartSeries_EnableSmartLabels) property to **true** in the Smith Chart series. Connector lines for smart labels can be customized using the [Color](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartDataLabelConnectorLine.html#Syncfusion_Blazor_Charts_SmithChartDataLabelConnectorLine_Color) and [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartDataLabelConnectorLine.html#Syncfusion_Blazor_Charts_SmithChartDataLabelConnectorLine_Width) properties in [SmithChartDataLabelConnectorLine](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartDataLabelConnectorLine.html). ```cshtml + @using Syncfusion.Blazor.Charts @@ -200,24 +213,27 @@ Data labels can be placed smartly by setting the [EnableSmartLabels](https://hel public double? Resistance { get; set; } public double? Reactance { get; set; } }; + public List TransmissionData = new List { - new SmithChartData { Resistance= 10, Reactance= 25 }, new SmithChartData { Resistance= 8, Reactance= 6 }, - new SmithChartData { Resistance= 6, Reactance= 4.5 }, new SmithChartData { Resistance= 4.5, Reactance= 2 }, - new SmithChartData { Resistance= 3.5, Reactance= 1.6 }, new SmithChartData { Resistance= 2.5, Reactance= 1.3 }, - new SmithChartData { Resistance= 2, Reactance= 1.2 }, new SmithChartData { Resistance= 1.5, Reactance= 1 }, - new SmithChartData { Resistance= 1, Reactance= 0.8 }, new SmithChartData { Resistance= 0.5, Reactance= 0.4 }, - new SmithChartData { Resistance= 0.3, Reactance= 0.2 }, new SmithChartData { Resistance= 0, Reactance= 0.15 }, + new SmithChartData { Resistance = 10, Reactance = 25 }, new SmithChartData { Resistance = 8, Reactance = 6 }, + new SmithChartData { Resistance = 6, Reactance = 4.5 }, new SmithChartData { Resistance = 4.5, Reactance = 2 }, + new SmithChartData { Resistance = 3.5, Reactance = 1.6 }, new SmithChartData { Resistance = 2.5, Reactance = 1.3 }, + new SmithChartData { Resistance = 2, Reactance = 1.2 }, new SmithChartData { Resistance = 1.5, Reactance = 1 }, + new SmithChartData { Resistance = 1, Reactance = 0.8 }, new SmithChartData { Resistance = 0.5, Reactance = 0.4 }, + new SmithChartData { Resistance = 0.3, Reactance = 0.2 }, new SmithChartData { Resistance = 0, Reactance = 0.15 } }; } + ``` ![Blazor Smith Chart with Smart Data Labels](./images/Marker/blazor-smith-chart-with-smart-data-labels.png) -### Datalabel Template +### Data Label Template -To access the aggregate values inside the template, the implicit named parameter context can be used. The context can be typecast as [SmithChartPoint](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartPoint.html) to get aggregate values inside the template. The datalabel template using the context is shown as following. +To access aggregate values inside the template, use the implicit named parameter `context`, which can be typecast as [SmithChartPoint](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartPoint.html) to retrieve values within the template. ```cshtml + @using Syncfusion.Blazor.Charts @@ -243,15 +259,17 @@ To access the aggregate values inside the template, the implicit named parameter public double? Resistance { get; set; } public double? Reactance { get; set; } }; + public List TransmissionData = new List { - new SmithChartData { Resistance= 10, Reactance= 25 }, - new SmithChartData { Resistance= 6, Reactance= 4.5 }, - new SmithChartData { Resistance= 3.5, Reactance= 1.6 }, - new SmithChartData { Resistance= 2, Reactance= 1.2 }, - new SmithChartData { Resistance= 1, Reactance= 0.8 }, - new SmithChartData { Resistance= 0, Reactance= 0.2 } + new SmithChartData { Resistance = 10, Reactance = 25 }, + new SmithChartData { Resistance = 6, Reactance = 4.5 }, + new SmithChartData { Resistance = 3.5, Reactance = 1.6 }, + new SmithChartData { Resistance = 2, Reactance = 1.2 }, + new SmithChartData { Resistance = 1, Reactance = 0.8 }, + new SmithChartData { Resistance = 0, Reactance = 0.2 } }; } + ``` -![Blazor Smith Chart with Data Label Template](./images/Marker/blazor-smith-chart-data-label-template.png) \ No newline at end of file +![Blazor Smith Chart with Data Label Template](./images/Marker/blazor-smith-chart-data-label-template.png) diff --git a/blazor/smith-chart/smith-chart-print.md b/blazor/smith-chart/smith-chart-print.md index e1df87a32e..6855c54a07 100644 --- a/blazor/smith-chart/smith-chart-print.md +++ b/blazor/smith-chart/smith-chart-print.md @@ -1,7 +1,7 @@ --- layout: post title: Print and Export in Blazor Smith Chart Component | Syncfusion -description: Checkout and learn here all about print and export in Syncfusion Blazor Smith Chart component and more. +description: Check out and learn how to utilize the print and export functionality in Syncfusion Blazor Smith Chart component. platform: Blazor control: Smith Chart documentation: ug @@ -14,6 +14,7 @@ documentation: ug The rendered Smith Chart can be printed directly from the browser by calling the public method `PrintAsync`. ```cshtml + @using Syncfusion.Blazor.Charts @@ -30,35 +31,40 @@ The rendered Smith Chart can be printed directly from the browser by calling the @code { private SfSmithChart smithChart; + public class SmithChartData { public double? Resistance { get; set; } public double? Reactance { get; set; } }; + public List TransmissionData = new List { - new SmithChartData { Resistance= 10, Reactance= 25 }, - new SmithChartData { Resistance= 6, Reactance= 4.5 }, - new SmithChartData { Resistance= 3.5, Reactance= 1.6 }, - new SmithChartData { Resistance= 2, Reactance= 1.2 }, - new SmithChartData { Resistance= 1, Reactance= 0.8 }, - new SmithChartData { Resistance= 0, Reactance= 0.2 } + new SmithChartData { Resistance = 10, Reactance = 25 }, + new SmithChartData { Resistance = 6, Reactance = 4.5 }, + new SmithChartData { Resistance = 3.5, Reactance = 1.6 }, + new SmithChartData { Resistance = 2, Reactance = 1.2 }, + new SmithChartData { Resistance = 1, Reactance = 0.8 }, + new SmithChartData { Resistance = 0, Reactance = 0.2 } }; + private async Task Print() { await smithChart.PrintAsync(); } } + ``` ## Export -The rendered Smith Chart can be exported to **JPEG**, **PNG**, **SVG**, or **PDF** format by using the `ExportAsync` method in the Smith Chart. This method contains the following parameters: +The rendered Smith Chart can be exported to **JPEG**, **PNG**, **SVG**, or **PDF** format using the `ExportAsync` method. This method accepts the following parameters: -* **Type** - To specify the export type. The component can be exported to **JPEG**, **PNG**, **SVG**, or **PDF** format. -* **File name** - To specify the file name to export. -* **Orientation** - To specify the orientation type. This is applicable only for PDF export type. It is an optional parameter. +* **Type** – Specifies the export type: **JPEG**, **PNG**, **SVG**, or **PDF**. +* **File name** – Specifies the file name for the export. +* **Orientation** – Specifies the orientation type (applicable only for PDF export). This parameter is optional. ```cshtml + @using Syncfusion.Blazor.Charts @@ -75,22 +81,26 @@ The rendered Smith Chart can be exported to **JPEG**, **PNG**, **SVG**, or **PDF @code { private SfSmithChart smithChart; + public class SmithChartData { public double? Resistance { get; set; } public double? Reactance { get; set; } }; + public List TransmissionData = new List { - new SmithChartData { Resistance= 10, Reactance= 25 }, - new SmithChartData { Resistance= 6, Reactance= 4.5 }, - new SmithChartData { Resistance= 3.5, Reactance= 1.6 }, - new SmithChartData { Resistance= 2, Reactance= 1.2 }, - new SmithChartData { Resistance= 1, Reactance= 0.8 }, - new SmithChartData { Resistance= 0, Reactance= 0.2 } + new SmithChartData { Resistance = 10, Reactance = 25 }, + new SmithChartData { Resistance = 6, Reactance = 4.5 }, + new SmithChartData { Resistance = 3.5, Reactance = 1.6 }, + new SmithChartData { Resistance = 2, Reactance = 1.2 }, + new SmithChartData { Resistance = 1, Reactance = 0.8 }, + new SmithChartData { Resistance = 0, Reactance = 0.2 } }; + private async Task Export() { await smithChart.ExportAsync(ExportType.PDF, "SmithChart", Syncfusion.PdfExport.PdfPageOrientation.Landscape); } } -``` \ No newline at end of file + +``` diff --git a/blazor/smith-chart/smith-chart-series.md b/blazor/smith-chart/smith-chart-series.md index 0a955a34fb..4921a6df9e 100644 --- a/blazor/smith-chart/smith-chart-series.md +++ b/blazor/smith-chart/smith-chart-series.md @@ -1,7 +1,7 @@ --- layout: post title: Series in Blazor Smith Chart Component | Syncfusion -description: Checkout and learn here all about series in Syncfusion Blazor Smith Chart component and much more details. +description: Check out and learn how to configure and customize series in Syncfusion Blazor Smith Chart component. platform: Blazor control: Smith Chart documentation: ug @@ -9,14 +9,15 @@ documentation: ug # Series in Blazor Smith Chart Component -The [SmithChartSeries](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartSeries.html#properties) is the visual representation of the data. Using the following options in the [SmithChartSeries](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartSeries.html#properties), each series can be customized in the Smith Chart. +The [SmithChartSeries](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartSeries.html#properties) visually represents data in the Smith Chart. Each series can be customized using the following options: -* [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartSeries.html#Syncfusion_Blazor_Charts_SmithChartSeries_Fill) - Used to customize the fill color for the series. -* [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartSeries.html#Syncfusion_Blazor_Charts_SmithChartSeries_Visible) - Used to handle the visibility of the series. -* [Opacity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartSeries.html#Syncfusion_Blazor_Charts_SmithChartSeries_Opacity) - Used to control the opacity of the series line. -* [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartSeries.html#Syncfusion_Blazor_Charts_SmithChartSeries_Width) - Used to customize the width of the series line. +* [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartSeries.html#Syncfusion_Blazor_Charts_SmithChartSeries_Fill) – Sets the fill color for the series. +* [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartSeries.html#Syncfusion_Blazor_Charts_SmithChartSeries_Visible) – Controls the visibility of the series. +* [Opacity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartSeries.html#Syncfusion_Blazor_Charts_SmithChartSeries_Opacity) – Sets the opacity of the series line. +* [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartSeries.html#Syncfusion_Blazor_Charts_SmithChartSeries_Width) – Sets the width of the series line. ```cshtml + @using Syncfusion.Blazor.Charts @@ -39,24 +40,27 @@ The [SmithChartSeries](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.C public double? Resistance { get; set; } public double? Reactance { get; set; } }; + public List TransmissionData = new List { - new SmithChartData { Resistance= 10, Reactance= 25 }, - new SmithChartData { Resistance= 6, Reactance= 4.5 }, - new SmithChartData { Resistance= 3.5, Reactance= 1.6 }, - new SmithChartData { Resistance= 2, Reactance= 1.2 }, - new SmithChartData { Resistance= 1, Reactance= 0.8 }, - new SmithChartData { Resistance= 0, Reactance= 0.2 } + new SmithChartData { Resistance = 10, Reactance = 25 }, + new SmithChartData { Resistance = 6, Reactance = 4.5 }, + new SmithChartData { Resistance = 3.5, Reactance = 1.6 }, + new SmithChartData { Resistance = 2, Reactance = 1.2 }, + new SmithChartData { Resistance = 1, Reactance = 0.8 }, + new SmithChartData { Resistance = 0, Reactance = 0.2 } }; } + ``` ![Blazor Smith Chart with Series](./images/SmithChartSeries/blazor-smith-chart-series.png) ## Animation -Animation for the Smith Chart series can be enabled by using the [EnableAnimation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartSeries.html#Syncfusion_Blazor_Charts_SmithChartSeries_EnableAnimation) property in the [SmithChartSeries](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartSeries.html#properties). By default, the value is **false**. The speed of the animation can be controlled using the [AnimationDuration](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartSeries.html#Syncfusion_Blazor_Charts_SmithChartSeries_AnimationDuration) property. By default, the value of the [AnimationDuration](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartSeries.html#Syncfusion_Blazor_Charts_SmithChartSeries_AnimationDuration) property is **2000** milliseconds. +Enable animation for the Smith Chart series using the [EnableAnimation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartSeries.html#Syncfusion_Blazor_Charts_SmithChartSeries_EnableAnimation) property. By default, animation is disabled. Control the animation speed with the [AnimationDuration](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartSeries.html#Syncfusion_Blazor_Charts_SmithChartSeries_AnimationDuration) property, which defaults to **2000** milliseconds. ```cshtml + @using Syncfusion.Blazor.Charts @@ -76,13 +80,15 @@ Animation for the Smith Chart series can be enabled by using the [EnableAnimatio public double? Resistance { get; set; } public double? Reactance { get; set; } }; + public List TransmissionData = new List { - new SmithChartData { Resistance= 10, Reactance= 25 }, - new SmithChartData { Resistance= 6, Reactance= 4.5 }, - new SmithChartData { Resistance= 3.5, Reactance= 1.6 }, - new SmithChartData { Resistance= 2, Reactance= 1.2 }, - new SmithChartData { Resistance= 1, Reactance= 0.8 }, - new SmithChartData { Resistance= 0, Reactance= 0.2 } + new SmithChartData { Resistance = 10, Reactance = 25 }, + new SmithChartData { Resistance = 6, Reactance = 4.5 }, + new SmithChartData { Resistance = 3.5, Reactance = 1.6 }, + new SmithChartData { Resistance = 2, Reactance = 1.2 }, + new SmithChartData { Resistance = 1, Reactance = 0.8 }, + new SmithChartData { Resistance = 0, Reactance = 0.2 } }; } -``` \ No newline at end of file + +``` diff --git a/blazor/smith-chart/smith-chart-tool-tip.md b/blazor/smith-chart/smith-chart-tool-tip.md index 659e491667..b39256395f 100644 --- a/blazor/smith-chart/smith-chart-tool-tip.md +++ b/blazor/smith-chart/smith-chart-tool-tip.md @@ -1,7 +1,7 @@ --- layout: post title: Tooltip in Blazor Smith Chart Component | Syncfusion -description: Checkout and learn here all about tooltip in Syncfusion Blazor Smith Chart component and much more details. +description: Check out and learn how to configure and customize tooltip in Syncfusion Blazor Smith Chart component. platform: Blazor control: Smith Chart documentation: ug @@ -9,9 +9,10 @@ documentation: ug # Tooltip in Blazor Smith Chart Component -When the mouse is moved over a point in the Smith Chart, a tooltip will appear displaying information about the point. By default, the tooltip is disabled. To enable the tooltip, set the [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartSeriesTooltip.html#Syncfusion_Blazor_Charts_SmithChartSeriesTooltip_Visible) property to **true** in the [SmithChartSeriesTooltip](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartSeriesTooltip.html). +When the mouse pointer hovers over a point in the Smith Chart, a tooltip appears displaying information about that point. By default, the tooltip is disabled. To enable it, set the [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartSeriesTooltip.html#Syncfusion_Blazor_Charts_SmithChartSeriesTooltip_Visible) property to **true** in [SmithChartSeriesTooltip](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartSeriesTooltip.html). ```cshtml + @using Syncfusion.Blazor.Charts @@ -29,28 +30,31 @@ When the mouse is moved over a point in the Smith Chart, a tooltip will appear d public double? Resistance { get; set; } public double? Reactance { get; set; } }; + public List TransmissionData = new List { - new SmithChartData { Resistance= 10, Reactance= 25 }, - new SmithChartData { Resistance= 6, Reactance= 4.5 }, - new SmithChartData { Resistance= 3.5, Reactance= 1.6 }, - new SmithChartData { Resistance= 2, Reactance= 1.2 }, - new SmithChartData { Resistance= 1, Reactance= 0.8 }, - new SmithChartData { Resistance= 0, Reactance= 0.2 } + new SmithChartData { Resistance = 10, Reactance = 25 }, + new SmithChartData { Resistance = 6, Reactance = 4.5 }, + new SmithChartData { Resistance = 3.5, Reactance = 1.6 }, + new SmithChartData { Resistance = 2, Reactance = 1.2 }, + new SmithChartData { Resistance = 1, Reactance = 0.8 }, + new SmithChartData { Resistance = 0, Reactance = 0.2 } }; } + ``` ![Blazor Smith Chart with Tooltip](./images/Tooltip/blazor-smith-chart-tooltip.png) ## Tooltip Customization -The tooltip can be customized for each series using the following properties. +The tooltip can be customized for each series using the following properties: -* [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartSeriesTooltip.html#Syncfusion_Blazor_Charts_SmithChartSeriesTooltip_Fill) - Used to change the fill color of the tooltip. -* [Opacity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartSeriesTooltip.html#Syncfusion_Blazor_Charts_SmithChartSeriesTooltip_Opacity) - Used to control the opacity of the tooltip. -* [SmithChartSeriesTooltipBorder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartSeriesTooltipBorder.html) - Used to customize the width and color of the border using the [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartCommonBorder.html#Syncfusion_Blazor_Charts_SmithChartCommonBorder_Width) and the [Color](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartCommonBorder.html#Syncfusion_Blazor_Charts_SmithChartCommonBorder_Color) properties. +* [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartSeriesTooltip.html#Syncfusion_Blazor_Charts_SmithChartSeriesTooltip_Fill) – Changes the tooltip's fill color. +* [Opacity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartSeriesTooltip.html#Syncfusion_Blazor_Charts_SmithChartSeriesTooltip_Opacity) – Controls the tooltip's opacity. +* [SmithChartSeriesTooltipBorder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartSeriesTooltipBorder.html) – Customizes the border's width and color using [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartCommonBorder.html#Syncfusion_Blazor_Charts_SmithChartCommonBorder_Width) and [Color](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartCommonBorder.html#Syncfusion_Blazor_Charts_SmithChartCommonBorder_Color). ```cshtml + @using Syncfusion.Blazor.Charts @@ -70,24 +74,27 @@ The tooltip can be customized for each series using the following properties. public double? Resistance { get; set; } public double? Reactance { get; set; } }; + public List TransmissionData = new List { - new SmithChartData { Resistance= 10, Reactance= 25 }, - new SmithChartData { Resistance= 6, Reactance= 4.5 }, - new SmithChartData { Resistance= 3.5, Reactance= 1.6 }, - new SmithChartData { Resistance= 2, Reactance= 1.2 }, - new SmithChartData { Resistance= 1, Reactance= 0.8 }, - new SmithChartData { Resistance= 0, Reactance= 0.2 } + new SmithChartData { Resistance = 10, Reactance = 25 }, + new SmithChartData { Resistance = 6, Reactance = 4.5 }, + new SmithChartData { Resistance = 3.5, Reactance = 1.6 }, + new SmithChartData { Resistance = 2, Reactance = 1.2 }, + new SmithChartData { Resistance = 1, Reactance = 0.8 }, + new SmithChartData { Resistance = 0, Reactance = 0.2 } }; } + ``` ![Blazor Smith Chart with Custom Tooltip](./images/Tooltip/blazor-smith-chart-custom-tooltip.png) ## Tooltip Template -To access the aggregate values inside the template, the implicit named parameter context can be used. The context can be typecast as the [SmithChartPoint](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartPoint.html) to get aggregate values inside the template. The tooltip template using the context is as follows. +To display custom content in the tooltip, use a template. The implicit named parameter `context` can be typecast as [SmithChartPoint](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartPoint.html) to access aggregate values within the template. ```cshtml + @using Syncfusion.Blazor.Charts @@ -112,15 +119,17 @@ To access the aggregate values inside the template, the implicit named parameter public double? Resistance { get; set; } public double? Reactance { get; set; } }; + public List TransmissionData = new List { - new SmithChartData { Resistance= 10, Reactance= 25 }, - new SmithChartData { Resistance= 6, Reactance= 4.5 }, - new SmithChartData { Resistance= 3.5, Reactance= 1.6 }, - new SmithChartData { Resistance= 2, Reactance= 1.2 }, - new SmithChartData { Resistance= 1, Reactance= 0.8 }, - new SmithChartData { Resistance= 0, Reactance= 0.2 } + new SmithChartData { Resistance = 10, Reactance = 25 }, + new SmithChartData { Resistance = 6, Reactance = 4.5 }, + new SmithChartData { Resistance = 3.5, Reactance = 1.6 }, + new SmithChartData { Resistance = 2, Reactance = 1.2 }, + new SmithChartData { Resistance = 1, Reactance = 0.8 }, + new SmithChartData { Resistance = 0, Reactance = 0.2 } }; } + ``` -![Blazor Smith Chart with Tooltip Template](./images/Tooltip/blazor-smith-chart-tooltip-template.png) \ No newline at end of file +![Blazor Smith Chart with Tooltip Template](./images/Tooltip/blazor-smith-chart-tooltip-template.png) diff --git a/blazor/smith-chart/title-subtitle.md b/blazor/smith-chart/title-subtitle.md index 0dbb4b5308..20b2ca9f5c 100644 --- a/blazor/smith-chart/title-subtitle.md +++ b/blazor/smith-chart/title-subtitle.md @@ -1,7 +1,7 @@ --- layout: post title: Title and Subtitle in Blazor Smith Chart Component | Syncfusion -description: Checkout and learn here all about title and subtitle in Syncfusion Blazor Smith Chart component and more. +description: Check out and learn how to configure and customize the title and subtitle in Syncfusion Blazor Smith Chart component. platform: Blazor control: Smith Chart documentation: ug @@ -11,9 +11,10 @@ documentation: ug ## Enable Title -The information about the data plotted in the Smith Chart is depicted using the titles and the subtitles. Using the [Text](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartTitle.html#Syncfusion_Blazor_Charts_SmithChartTitle_Text) property in the [SmithChartTitle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartTitle.html) and the [SmithChartSubtitle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartSubtitle.html), the Smith Chart's title and subtitle can be changed. By default, the title and the subtitles are visible. As shown in the following example, use the simple text for the title and the subtitles. +Information about the data plotted in the Smith Chart is conveyed using the title and subtitle. The [Text](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartTitle.html#Syncfusion_Blazor_Charts_SmithChartTitle_Text) property in [SmithChartTitle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartTitle.html) and [SmithChartSubtitle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartSubtitle.html) allows configuration of the chart's title and subtitle. By default, both are visible. The following example demonstrates simple text for the title and subtitle. ```cshtml + @using Syncfusion.Blazor.Charts @@ -32,24 +33,27 @@ The information about the data plotted in the Smith Chart is depicted using the public double? Resistance { get; set; } public double? Reactance { get; set; } }; + public List TransmissionData = new List { - new SmithChartData { Resistance= 10, Reactance= 25 }, - new SmithChartData { Resistance= 6, Reactance= 4.5 }, - new SmithChartData { Resistance= 3.5, Reactance= 1.6 }, - new SmithChartData { Resistance= 2, Reactance= 1.2 }, - new SmithChartData { Resistance= 1, Reactance= 0.8 }, - new SmithChartData { Resistance= 0, Reactance= 0.2 } + new SmithChartData { Resistance = 10, Reactance = 25 }, + new SmithChartData { Resistance = 6, Reactance = 4.5 }, + new SmithChartData { Resistance = 3.5, Reactance = 1.6 }, + new SmithChartData { Resistance = 2, Reactance = 1.2 }, + new SmithChartData { Resistance = 1, Reactance = 0.8 }, + new SmithChartData { Resistance = 0, Reactance = 0.2 } }; } + ``` ![Blazor Smith Chart with Title and Subtitle](./images/Title/blazor-smith-chart-title-and-subtitle.png) ## Trim Title -Both the title and the subtitle of the Smith Chart can be trimmed if it exceeds certain length. This length can be changed using the [MaximumWidth](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartTitle.html#Syncfusion_Blazor_Charts_SmithChartTitle_MaximumWidth) property. Trimming is enabled by setting the [EnableTrim](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartTitle.html#Syncfusion_Blazor_Charts_SmithChartTitle_EnableTrim) property to **true**. +Both the title and subtitle can be trimmed if they exceed a specified length. The [MaximumWidth](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartTitle.html#Syncfusion_Blazor_Charts_SmithChartTitle_MaximumWidth) property controls the maximum width, and trimming is enabled by setting the [EnableTrim](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartTitle.html#Syncfusion_Blazor_Charts_SmithChartTitle_EnableTrim) property to **true**. ```cshtml + @using Syncfusion.Blazor.Charts @@ -73,27 +77,30 @@ Both the title and the subtitle of the Smith Chart can be trimmed if it exceeds public double? Resistance { get; set; } public double? Reactance { get; set; } }; + public List TransmissionData = new List { - new SmithChartData { Resistance= 10, Reactance= 25 }, - new SmithChartData { Resistance= 6, Reactance= 4.5 }, - new SmithChartData { Resistance= 3.5, Reactance= 1.6 }, - new SmithChartData { Resistance= 2, Reactance= 1.2 }, - new SmithChartData { Resistance= 1, Reactance= 0.8 }, - new SmithChartData { Resistance= 0, Reactance= 0.2 } + new SmithChartData { Resistance = 10, Reactance = 25 }, + new SmithChartData { Resistance = 6, Reactance = 4.5 }, + new SmithChartData { Resistance = 3.5, Reactance = 1.6 }, + new SmithChartData { Resistance = 2, Reactance = 1.2 }, + new SmithChartData { Resistance = 1, Reactance = 0.8 }, + new SmithChartData { Resistance = 0, Reactance = 0.2 } }; } + ``` ![Blazor Smith Chart with Trim Title](./images/Title/blazor-smith-chart-trim-title.png) ## Title Customization -Title and subtitle can be customized using the following properties. +The title and subtitle can be customized using the following properties: -* [TextAlignment](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartTitle.html#Syncfusion_Blazor_Charts_SmithChartTitle_TextAlignment) - It can align the Smith Chart's title text in near, centre, and far positions. By default, it is aligned in the **Center** position. -* [SmithChartTitleTextStyle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartTitleTextStyle.html) - Used to customize the properties such as [FontFamily](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartCommonFont.html#Syncfusion_Blazor_Charts_SmithChartCommonFont_FontFamily), [FontWeight](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartCommonFont.html#Syncfusion_Blazor_Charts_SmithChartCommonFont_FontWeight), [FontStyle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartCommonFont.html#Syncfusion_Blazor_Charts_SmithChartCommonFont_FontStyle), [Opacity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartCommonFont.html#Syncfusion_Blazor_Charts_SmithChartCommonFont_Opacity), [Color](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartTitleTextStyle.html#Syncfusion_Blazor_Charts_SmithChartTitleTextStyle_Color), and [Size](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartTitleTextStyle.html#Syncfusion_Blazor_Charts_SmithChartTitleTextStyle_Size) for title text. +- [TextAlignment](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartTitle.html#Syncfusion_Blazor_Charts_SmithChartTitle_TextAlignment): Aligns the title text to near, center, or far positions. The default is **Center**. +- [SmithChartTitleTextStyle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartTitleTextStyle.html): Customizes properties such as [FontFamily](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartCommonFont.html#Syncfusion_Blazor_Charts_SmithChartCommonFont_FontFamily), [FontWeight](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartCommonFont.html#Syncfusion_Blazor_Charts_SmithChartCommonFont_FontWeight), [FontStyle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartCommonFont.html#Syncfusion_Blazor_Charts_SmithChartCommonFont_FontStyle), [Opacity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartCommonFont.html#Syncfusion_Blazor_Charts_SmithChartCommonFont_Opacity), [Color](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartTitleTextStyle.html#Syncfusion_Blazor_Charts_SmithChartTitleTextStyle_Color), and [Size](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartTitleTextStyle.html#Syncfusion_Blazor_Charts_SmithChartTitleTextStyle_Size) for the title text. ```cshtml + @using Syncfusion.Blazor.Charts @@ -115,6 +122,7 @@ Title and subtitle can be customized using the following properties. public double? Resistance { get; set; } public double? Reactance { get; set; } }; + public List TransmissionData = new List { new SmithChartData { Resistance= 10, Reactance= 25 }, new SmithChartData { Resistance= 6, Reactance= 4.5 }, @@ -124,6 +132,7 @@ Title and subtitle can be customized using the following properties. new SmithChartData { Resistance= 0, Reactance= 0.2 } }; } + ``` -![Blazor Smith Chart with Custom Title](./images/Title/blazor-smith-chart-with-custom-title.png) \ No newline at end of file +![Blazor Smith Chart with Custom Title](./images/Title/blazor-smith-chart-with-custom-title.png)