Skip to content

Commit ade3b2e

Browse files
kendo-botKB Botntachevadimodi
authored
Added new kb article chart-kb-customize-separate-markers (#2422)
* Added new kb article chart-kb-customize-separate-markers * chore(Chart): update links, sample and name * Update knowledge-base/chart-customize-separate-markers.md Co-authored-by: Dimo Dimov <[email protected]> * Update knowledge-base/chart-customize-separate-markers.md Co-authored-by: Dimo Dimov <[email protected]> --------- Co-authored-by: KB Bot <[email protected]> Co-authored-by: Nadezhda Tacheva <[email protected]> Co-authored-by: Nadezhda Tacheva <[email protected]> Co-authored-by: Dimo Dimov <[email protected]>
1 parent 7be2e61 commit ade3b2e

File tree

1 file changed

+122
-0
lines changed

1 file changed

+122
-0
lines changed

‎knowledge-base/chart-customize-separate-markers.md‎

Lines changed: 122 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,122 @@
1+
---
2+
title: Configuring Individual Markers in a ScatterLine Chart
3+
description: Learn how to customize markers for specific data points in a ScatterLine Chart to highlight them as special.
4+
type: how-to
5+
page_title: How to Customize Markers for Specific Data Points in ScatterLine Chart
6+
slug: chart-kb-customize-separate-markers
7+
tags: charts, blazor, scatterline, markers, customization
8+
res_type: kb
9+
ticketid: 1666618
10+
---
11+
12+
## Environment
13+
14+
<table>
15+
<tbody>
16+
<tr>
17+
<td>Product</td>
18+
<td>Charts for Blazor</td>
19+
</tr>
20+
</tbody>
21+
</table>
22+
23+
## Description
24+
25+
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".
26+
27+
This KB article answers the following questions:
28+
- How to mark specific data points in a ScatterLine Chart as special?
29+
- How to customize separate markers in a Blazor ScatterLine Chart?
30+
- How to use different markers for special data points in a ScatterLine Chart?
31+
32+
## Solution
33+
34+
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.
35+
36+
To mark specific data points as "special", follow these steps:
37+
38+
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%})).
39+
40+
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%})).
41+
42+
3. In the second series data include only the points that you want to mark as special.
43+
44+
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.
45+
46+
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.
47+
48+
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.
49+
50+
>caption Customizing individual markers
51+
52+
````CSHTML
53+
<TelerikChart>
54+
<ChartSeriesItems>
55+
56+
<ChartSeries Type="ChartSeriesType.ScatterLine" ZIndex="1"
57+
Data="@Series1Data"
58+
XField="@nameof(ModelData.X)"
59+
YField="@nameof(ModelData.Y)">
60+
<ChartSeriesMarkers Type="ChartSeriesMarkersType.Cross" />
61+
</ChartSeries>
62+
63+
<ChartSeries Type="ChartSeriesType.Scatter" ZIndex="2"
64+
Data="@Series2Data"
65+
Color="blue"
66+
XField="@nameof(ModelData.X)"
67+
YField="@nameof(ModelData.Y)">
68+
<ChartSeriesMarkers Type="ChartSeriesMarkersType.Square" />
69+
</ChartSeries>
70+
71+
</ChartSeriesItems>
72+
73+
<ChartXAxes>
74+
75+
<ChartXAxis Max="100">
76+
<ChartXAxisLabels Format="{0}m"></ChartXAxisLabels>
77+
</ChartXAxis>
78+
</ChartXAxes>
79+
80+
<ChartYAxes>
81+
<ChartYAxis Max="100">
82+
<ChartYAxisLabels Format="{0}%"></ChartYAxisLabels>
83+
</ChartYAxis>
84+
85+
</ChartYAxes>
86+
</TelerikChart>
87+
88+
@code {
89+
private List<ModelData> Series1Data = new List<ModelData>()
90+
{
91+
new ModelData() { X = 10, Y = 10 },
92+
new ModelData() { X = 15, Y = 20 },
93+
new ModelData() { X = 20, Y = 25 },
94+
new ModelData() { X = 32, Y = 40 },
95+
new ModelData() { X = 43, Y = 50 },
96+
new ModelData() { X = 55, Y = 60 },
97+
new ModelData() { X = 60, Y = 70 },
98+
new ModelData() { X = 70, Y = 80 },
99+
new ModelData() { X = 90, Y = 90 },
100+
};
101+
102+
private List<ModelData> Series2Data = new List<ModelData>()
103+
{
104+
// These are the duplicated points that you want to change the symbol for.
105+
// They are also contained in the data of the first Chart series, so the line follows the correct curve according to these points' values
106+
new ModelData() { X = 15, Y = 20 },
107+
new ModelData() { X = 43, Y = 50 }
108+
};
109+
110+
public class ModelData
111+
{
112+
public int X { get; set; }
113+
public int Y { get; set; }
114+
}
115+
116+
}
117+
````
118+
119+
## See Also
120+
121+
* [ScatterLine Chart Overview]({%slug components/chart/types/scatterline%})
122+
* [Scatter Chart Overview]({%slug components/chart/types/scatter%})

0 commit comments

Comments
 (0)