From 6155da312f673f0d4b93041811252a256ead8612 Mon Sep 17 00:00:00 2001 From: KB Bot Date: Thu, 10 Oct 2024 09:51:00 +0000 Subject: [PATCH 1/4] Added new kb article chart-kb-customize-separate-markers --- .../chart-kb-customize-separate-markers.md | 57 +++++++++++++++++++ 1 file changed, 57 insertions(+) create mode 100644 knowledge-base/chart-kb-customize-separate-markers.md diff --git a/knowledge-base/chart-kb-customize-separate-markers.md b/knowledge-base/chart-kb-customize-separate-markers.md new file mode 100644 index 0000000000..46c6805a5e --- /dev/null +++ b/knowledge-base/chart-kb-customize-separate-markers.md @@ -0,0 +1,57 @@ +--- +title: Configuring Individual Markers in a ScatterLine Chart +description: Learn how to customize markers for specific data points in a ScatterLine chart to highlight them as special. +type: how-to +page_title: How to Customize Markers for Specific Data Points in ScatterLine Chart +slug: chart-kb-customize-separate-markers +tags: charts, blazor, scatterline, markers, customization +res_type: kb +ticketid: 1666618 +--- + +## Environment + + + + + + + + +
ProductCharts for Blazor
+ +## Description + +I need to configure a ScatterLine chart so I can control the marker used for each data point independently. I want to mark some points as "special". + +This KB article also answers the following questions: +- How to mark specific data points in a ScatterLine chart? +- How to customize separate markers in a Blazor ScatterLine chart? +- How to use different markers for special data points in a chart? + +## Solution + +The marker type is defined per series level, so it is not possible to set different markers for the different data points out of the box. + +To achieve the desired result of marking specific data points as "special" in a ScatterLine chart, follow these steps: + +1. Use a Chart type with lines for the first series and provide it with all available data points (for example, ScatterLine). + +2. Use a Chart type without lines for the second series, so the lines do not mix (for example, Scatter). + +3. In the second series data include only the points that you want to mark as special. + +4. Increase the ZIndex of the second series to ensure its points are rendered on top of the first series. + +5. Choose a different marker type for the second series from the options available in the `ChartSeriesMarkersType` enum. Once available, you may consider using the visual template to completely customize the markers. + +5. Optionally, set a different color for the second series to distinguish the "special" points further. + +A basic example demonstrating this approach can be found [here](https://blazorrepl.telerik.com/wnkIcYuh2054iX5041). + +## See Also + +- [ScatterLine Chart Overview](https://docs.telerik.com/blazor-ui/components/chart/types/scatterline) +- [ChartSeriesMarkersType Enum](https://docs.telerik.com/blazor-ui/api/Telerik.Blazor.ChartSeriesMarkersType) +- [Custom Rendering for the Chart Series Markers - Visual Template](https://feedback.telerik.com/blazor/1582456-custom-rendering-for-the-chart-series-markers-visual-template) +- [ChartSeries ZIndex Property](https://docs.telerik.com/blazor-ui/api/Telerik.Blazor.Components.ChartSeries#collapsible-Telerik_Blazor_Components_ChartSeries_ZIndex) From 23017b530015757940e1d66faee4e6a7244f501f Mon Sep 17 00:00:00 2001 From: Nadezhda Tacheva Date: Thu, 10 Oct 2024 13:09:27 +0300 Subject: [PATCH 2/4] chore(Chart): update links, sample and name --- .../chart-customize-separate-markers.md | 121 ++++++++++++++++++ .../chart-kb-customize-separate-markers.md | 57 --------- 2 files changed, 121 insertions(+), 57 deletions(-) create mode 100644 knowledge-base/chart-customize-separate-markers.md delete mode 100644 knowledge-base/chart-kb-customize-separate-markers.md diff --git a/knowledge-base/chart-customize-separate-markers.md b/knowledge-base/chart-customize-separate-markers.md new file mode 100644 index 0000000000..60ec7f7ccf --- /dev/null +++ b/knowledge-base/chart-customize-separate-markers.md @@ -0,0 +1,121 @@ +--- +title: Configuring Individual Markers in a ScatterLine Chart +description: Learn how to customize markers for specific data points in a ScatterLine Chart to highlight them as special. +type: how-to +page_title: How to Customize Markers for Specific Data Points in ScatterLine Chart +slug: chart-kb-customize-separate-markers +tags: charts, blazor, scatterline, markers, customization +res_type: kb +ticketid: 1666618 +--- + +## Environment + + + + + + + + +
ProductCharts for Blazor
+ +## Description + +I need to configure a ScatterLine Chart so I can control the marker used for each data point independently. I want to mark some points as "special". + +This KB article answers the following questions: +- How to mark specific data points in a ScatterLine Chart as special? +- How to customize separate markers in a Blazor ScatterLine Chart? +- How to use different markers for special data points in a ScatterLine Chart? + +## Solution + +The marker type is defined per series level, so it is not possible to set different markers for the different data points out of the box. + +To achieve the desired result of marking specific data points as "special", follow these steps: + +1. Use a Chart type with lines for the first series and provide it with all available data points (for example, [ScatterLine]({%slug components/chart/types/scatterline%})). + +2. Use a Chart type without lines for the second series, so the lines do not mix (for example, [Scatter]({%slug components/chart/types/scatter%})). + +3. In the second series data include only the points that you want to mark as special. + +4. Increase the [ZIndex](/blazor-ui/api/Telerik.Blazor.Components.ChartSeries#collapsible-Telerik_Blazor_Components_ChartSeries_ZIndex) of the second series to ensure its points are rendered on top of the first series. + +5. Choose a different marker type for the second series from the options available in the [`ChartSeriesMarkersType`](/blazor-ui/api/Telerik.Blazor.ChartSeriesMarkersType) enum. Once available, you may consider using the [visual template](https://feedback.telerik.com/blazor/1582456-custom-rendering-for-the-chart-series-markers-visual-template) to completely customize the markers. + +5. Optionally, set a different [color](/blazor-ui/api/Telerik.Blazor.Components.ChartSeries#collapsible-Telerik_Blazor_Components_ChartSeries_Color) for the second series to distinguish the "special" points further. + +>caption Customizing individual markers + +````CSHTML + + + + + + + + + + + + + + + + + + + + + + + + + + + + +@code { + private List Series1Data = new List() + { + new ModelData() { X = 10, Y = 10 }, + new ModelData() { X = 15, Y = 20 }, + new ModelData() { X = 20, Y = 25 }, + new ModelData() { X = 32, Y = 40 }, + new ModelData() { X = 43, Y = 50 }, + new ModelData() { X = 55, Y = 60 }, + new ModelData() { X = 60, Y = 70 }, + new ModelData() { X = 70, Y = 80 }, + new ModelData() { X = 90, Y = 90 }, + }; + + private List Series2Data = new List() + { + //these are the duplicated points that you want to change the symbol for. They are also contained in the data of the first chart, so the line follows the correct curve according to these points' values + new ModelData() { X = 15, Y = 20 }, + new ModelData() { X = 43, Y = 50 } + }; + + public class ModelData + { + public int X { get; set; } + public int Y { get; set; } + } + +} +```` + +## See Also + +* [ScatterLine Chart Overview]({%slug components/chart/types/scatterline%}) +* [Scatter Chart Overview]({%slug components/chart/types/scatter%}) \ No newline at end of file diff --git a/knowledge-base/chart-kb-customize-separate-markers.md b/knowledge-base/chart-kb-customize-separate-markers.md deleted file mode 100644 index 46c6805a5e..0000000000 --- a/knowledge-base/chart-kb-customize-separate-markers.md +++ /dev/null @@ -1,57 +0,0 @@ ---- -title: Configuring Individual Markers in a ScatterLine Chart -description: Learn how to customize markers for specific data points in a ScatterLine chart to highlight them as special. -type: how-to -page_title: How to Customize Markers for Specific Data Points in ScatterLine Chart -slug: chart-kb-customize-separate-markers -tags: charts, blazor, scatterline, markers, customization -res_type: kb -ticketid: 1666618 ---- - -## Environment - - - - - - - - -
ProductCharts for Blazor
- -## Description - -I need to configure a ScatterLine chart so I can control the marker used for each data point independently. I want to mark some points as "special". - -This KB article also answers the following questions: -- How to mark specific data points in a ScatterLine chart? -- How to customize separate markers in a Blazor ScatterLine chart? -- How to use different markers for special data points in a chart? - -## Solution - -The marker type is defined per series level, so it is not possible to set different markers for the different data points out of the box. - -To achieve the desired result of marking specific data points as "special" in a ScatterLine chart, follow these steps: - -1. Use a Chart type with lines for the first series and provide it with all available data points (for example, ScatterLine). - -2. Use a Chart type without lines for the second series, so the lines do not mix (for example, Scatter). - -3. In the second series data include only the points that you want to mark as special. - -4. Increase the ZIndex of the second series to ensure its points are rendered on top of the first series. - -5. Choose a different marker type for the second series from the options available in the `ChartSeriesMarkersType` enum. Once available, you may consider using the visual template to completely customize the markers. - -5. Optionally, set a different color for the second series to distinguish the "special" points further. - -A basic example demonstrating this approach can be found [here](https://blazorrepl.telerik.com/wnkIcYuh2054iX5041). - -## See Also - -- [ScatterLine Chart Overview](https://docs.telerik.com/blazor-ui/components/chart/types/scatterline) -- [ChartSeriesMarkersType Enum](https://docs.telerik.com/blazor-ui/api/Telerik.Blazor.ChartSeriesMarkersType) -- [Custom Rendering for the Chart Series Markers - Visual Template](https://feedback.telerik.com/blazor/1582456-custom-rendering-for-the-chart-series-markers-visual-template) -- [ChartSeries ZIndex Property](https://docs.telerik.com/blazor-ui/api/Telerik.Blazor.Components.ChartSeries#collapsible-Telerik_Blazor_Components_ChartSeries_ZIndex) From ec3675fe6b25a54586556a5c64debaefcf182121 Mon Sep 17 00:00:00 2001 From: Nadezhda Tacheva <73842592+ntacheva@users.noreply.github.com> Date: Tue, 15 Oct 2024 18:58:49 +0300 Subject: [PATCH 3/4] Update knowledge-base/chart-customize-separate-markers.md Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com> --- knowledge-base/chart-customize-separate-markers.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/knowledge-base/chart-customize-separate-markers.md b/knowledge-base/chart-customize-separate-markers.md index 60ec7f7ccf..2c40c69439 100644 --- a/knowledge-base/chart-customize-separate-markers.md +++ b/knowledge-base/chart-customize-separate-markers.md @@ -101,7 +101,8 @@ To achieve the desired result of marking specific data points as "special", foll private List Series2Data = new List() { - //these are the duplicated points that you want to change the symbol for. They are also contained in the data of the first chart, so the line follows the correct curve according to these points' values + // These are the duplicated points that you want to change the symbol for. + // They are also contained in the data of the first Chart series, so the line follows the correct curve according to these points' values new ModelData() { X = 15, Y = 20 }, new ModelData() { X = 43, Y = 50 } }; From 0f8f2c6b1e203970ff31f32762d1ceeb0e110db0 Mon Sep 17 00:00:00 2001 From: Nadezhda Tacheva <73842592+ntacheva@users.noreply.github.com> Date: Tue, 15 Oct 2024 18:59:14 +0300 Subject: [PATCH 4/4] Update knowledge-base/chart-customize-separate-markers.md Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com> --- knowledge-base/chart-customize-separate-markers.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/knowledge-base/chart-customize-separate-markers.md b/knowledge-base/chart-customize-separate-markers.md index 2c40c69439..c055314fa0 100644 --- a/knowledge-base/chart-customize-separate-markers.md +++ b/knowledge-base/chart-customize-separate-markers.md @@ -33,7 +33,7 @@ This KB article answers the following questions: The marker type is defined per series level, so it is not possible to set different markers for the different data points out of the box. -To achieve the desired result of marking specific data points as "special", follow these steps: +To mark specific data points as "special", follow these steps: 1. Use a Chart type with lines for the first series and provide it with all available data points (for example, [ScatterLine]({%slug components/chart/types/scatterline%})).